dougua3706 2016-08-24 09:33
浏览 92

切换选项卡菜单

I want to have a switch tab menus, i already did this to my other page(my user view/page) Tab menus

My codes in user view

<script id="tabs" type="text/html">
        <header class="head">
            <a class="head-btn btn btn-default pull-left" data-do="go-back" data-on="click" href="#home">Back</a>
            <h1 class="title">My PLMAR</h1>
            </header>
        <section class="body with-head with-foot">
            <!-- Nav tabs -->
            <nav class="tabs">
                <a class="active" data-do="tab-switch" data-on="click" href="#tab1">My Profile</a>
                <a data-do="tab-switch" data-on="click" href="#tab2">My Organizations</a>


            </nav>

            <div id="tab1">
                <div class="focus focus-group">
                     <div class="row">
                        <div class="col-xs-3 middle">
                            <img title="" />
                        </div>
                            <div class="col-xs-9">
                                <div class="col-xs-9">
                                    <h3>Name : <?= $this->session->userdata('name')?> </h3>
                                    <h3>Course: <?= $this->session->userdata('course')?></h3>
                                    <h3>Year: <?= $this->session->userdata('year_level')?></h3>
                                    <p></p>
                                </div>

                            </div>

                     </div>
                </div>
                <h4 class="pad upper">DOWNLOAD FILES</h4>
                <nav class="nav-list">

                    <span>PDF 1<i class="fa fa-chevron-right"></i></span>
                    <span>PDF 2<i class="fa fa-chevron-right"></i></span>
                    <span>PDF 3<i class="fa fa-chevron-right"></i></span>
            </nav>
             <h4 class="pad upper">MY CERTIFICATES</h4>
                <nav class="nav-list">
                    <span>CERTIFICATE 1<i class="fa fa-chevron-right"></i></span>
                    <span>CERTIFICATE 1<i class="fa fa-chevron-right"></i></span>
                    <span>CERTIFICATE 1<i class="fa fa-chevron-right"></i></span>
            </div>

            <div class="container-fluid">
                 <div class="row">
                     <div class="col-sm-9">
                        <div class="panel panel-primary">
                            <div id="tab2" class="focus-group hide">
                               <div class="panel-body">

                                     <table class="hoverTable">
                                     <tr>
                                            <td>Organization Name</td>
                                            <td>Action</td>
                                     </tr>
                                    <?php  foreach($orgName as $org)
                                    {?>
                                          <tr>

                                        <?= "<td>" .$name = $org->org_name . "<hr></td>"; ?>


                                            <td><a href ="<?= base_url().'User/viewOrgActivity/'. $org->org_id?>"><button type="button" class="btn btn-info">View Activity</button></td>
                                     <?php }
                                ?>      
                                </tr>
                                    </table>
                                </div>

                            </div>
                 </div>
            </div>
            </div>
            </div>
            </div>
            </div>
</script>

enter image description here

and i want to this again but it's not working.. I checked the source page, it just read all my data/codes but the output in my page (its just a blank page) and I dont know what is the problem Blank page

enter image description here any help will be appreciate. Thank you

My view

<meta charset="utf-8" />
        <!-- Sets initial viewport load and disables zooming  -->
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, height=device-height, width=device-width">
        <title>User Account</title>

        <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->



        <link href="<?php echo base_url() . 'bootstrapUser/' ?>font-awesome/awesome.css" rel="stylesheet">
        <link href="<?php echo base_url() . 'bootstrapUser/' ?>open-sans/open-sans.css" rel="stylesheet">
        <link href="<?php echo base_url() . 'bootstrapUser/' ?>bootstrap/bootstrap.css" rel="stylesheet">
        <link href="<?php echo base_url() . 'bootstrapUser/' ?>mobility/mobility.css" rel="stylesheet">
        <link href="<?php echo base_url() . 'bootstrapUser/' ?>bootstrap/js-image-slider.css" rel="stylesheet">
        <link href="<?php echo base_url() . 'bootstrapUser/' ?>bootstrap/generic.css" rel="stylesheet">

        <script src="<?php echo base_url() . 'bootstrapUser/' ?>jquery/jquery.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>classified/classified.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>doon/doon.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>time/time.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>mobility/mobility.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>acquire/acquire.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>handlebars/handlebars.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>chops/chops.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>cropper/cropper.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>password/password.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>bootstrap/bootstrap.js"></script>
        <script src="<?php echo base_url() . 'bootstrapUser/' ?>bootstrap/js-image-slider.js"></script>
        <!--calendar-->
        <!--script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <script id="tabs" type="text/html">
        <header class="head">
            <a class="head-btn btn btn-default pull-left" data-do="go-back" data-on="click" href="#home">Back</a>
            <h1 class="title">My PLMAR</h1>
            </header>
        <section class="body with-head with-foot">
            <!-- Nav tabs -->
            <nav class="tabs">
                <a class="active" data-do="tab-switch" data-on="click" href="#tab1">My Profile</a>
                <a data-do="tab-switch" data-on="click" href="#tab2">My Organizations</a>


            </nav>

            <div id="tab1">
                <div class="focus focus-group">
                     <div class="row">
                        <div class="col-xs-3 middle">
                            <img title="" />
                        </div>
                            <div class="col-xs-9">
                                <div class="col-xs-9">
                                    <h3>Name : <?= $this->session->userdata('name')?> </h3>
                                    <h3>Course: <?= $this->session->userdata('course')?></h3>
                                    <h3>Year: <?= $this->session->userdata('year_level')?></h3>
                                    <p></p>
                                </div>

                            </div>

                     </div>
                </div>
                <h4 class="pad upper">DOWNLOAD FILES</h4>
                <nav class="nav-list">

                    <span>PDF 1<i class="fa fa-chevron-right"></i></span>
                    <span>PDF 2<i class="fa fa-chevron-right"></i></span>
                    <span>PDF 3<i class="fa fa-chevron-right"></i></span>
            </nav>
             <h4 class="pad upper">MY CERTIFICATES</h4>
                <nav class="nav-list">
                    <span>CERTIFICATE 1<i class="fa fa-chevron-right"></i></span>
                    <span>CERTIFICATE 1<i class="fa fa-chevron-right"></i></span>
                    <span>CERTIFICATE 1<i class="fa fa-chevron-right"></i></span>
            </div>

            <div class="container-fluid">
                 <div class="row">
                     <div class="col-sm-9">
                        <div class="panel panel-primary">
                            <div id="tab2" class="focus-group hide">
                               <div class="panel-body">

                                     <table class="hoverTable">
                                     <tr>
                                            <td>Organization Name</td>
                                            <td>Action</td>
                                     </tr>

                                </tr>
                                    </table>
                                </div>

                            </div>
                 </div>
            </div>
            </div>
            </div>
            </div>
            </div>
</script>

 <script type="text/javascript">
            //initialize
            jQuery.mobility.start();

            //config aquire
            require.config({ templates: { root: 'templates' } });

            //add header and footer spacing
            jQuery(window).trigger('mobility-swap-complete', function() {
                jQuery('section.screen.current').addClass('with-head with-foot');
            });

            //now load the home page
            jQuery.mobility.swap(jQuery('#home').html());

            //remote transition are pluggable in this manner
            jQuery(window).on('mobility-request', function(e, target, effect) {
                jQuery(window).one('mobility-swap-complete', function() {
                    var current = jQuery('section.screen.current').addClass('loading');

                    //remote call yes? lets use acquire!
                    if(target === '/acquire') {
                        require('templates/sample.html', function(html) {
                            jQuery.mobility.swap(html);
                        });

                        return;
                    }

                    //Probably do Ajax instead of this
                    setTimeout(function() {
                        jQuery.mobility.swap(jQuery('#transition').html());
                    }, 5000);
                });

                jQuery.mobility.swap('', 'slide-left');
            });

            //default refresh pagination
            var i = 0;
            jQuery(window).on('mobility-refresh', function(e, target, callback) {
                var rows = $(jQuery('#refresh-template').html());
                setTimeout(function() {
                    callback(rows[(++i) % 4]);
                }, 1000);   
            });


            //default paginate pagination
            var j = 0;
            jQuery(window).on('mobility-paginate', function(e, target, callback) {
                setTimeout(function() {
                    if(j === 3) {
                        callback();
                        jQuery('.pagi-wait').removeClass('hide');
                        return;
                    }

                    callback(jQuery('#refresh-template').html());
                    j++;
                }, 1000);   
            });

            jQuery(document).on('click', 'nav.themes a', function(e) {
                e.preventDefault();
                var color = this.innerHTML.toLowerCase();
                jQuery('<link />').attr({
                    rel: 'stylesheet', 
                    type: 'text/css',
                    href: 'vendor/mobility/mobility-'+color+'.css' })
                    .appendTo('head');
            });
        </script>

        <style style="text/css">
    .hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; border:#4e95f4 1px solid;
    }

    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }
</style>

My controller

public function viewOrganization()
        {


         $this->load->view('organizer/header');
         $this->load->view('organizer/sidebar');
         $user_id = $this->session->userdata('user_id');
         $data['organization'] = $this->organizerModel->getOrganization2($user_id);
         $this->load->view('plmar/organizer/viewOrganization',$data);
         $this->load->view('organizer/footer');
       }
  • 写回答

1条回答 默认 最新

  • dongli7870 2016-08-24 09:48
    关注

    Is that normal your conteneur is : <script id="tabs" type="text/html"> ?

    If yes can you comment <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> or <script src="<?php echo base_url() . 'bootstrapUser/' ?>jquery/jquery.js"></script>

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题