2015-04-21 47 views
0

我想知道如何在將視圖分隔成3個文件時在codeigniter中添加活動類。如:如何在codeigniter中添加活動的引導類

  • 的header.php
  • ... page1.php中page10.php
  • footer.php

從這個thread,有沒有辦法如何分離時做的視圖。

這個我的頭看起來像:

<body class="skin-red"> 
<div class="wrapper"> 
<header class="main-header"> 
</header> 
<aside class="main-sidebar"> 
     <!-- sidebar: style can be found in sidebar.less --> 
     <section class="sidebar"> 
      <!-- Sidebar user panel --> 
      <div class="user-panel"> 
      <div class="pull-left image"> 
       <img src="<?php echo base_url();?>assets/dist/img/admin.png" class="img-circle" alt="User Image" /> 
      </div> 
      <div class="pull-left info"> 
       <p>Username</p> 
       <small>Privilage</small> 
      </div> 
      </div> 
      <!-- search form --> 
      <!-- /.search form --> 
      <!-- sidebar menu: : style can be found in sidebar.less --> 
      <ul class="sidebar-menu" id="sidebar"> 
      <li class="header">MAIN NAVIGATION</li> 
      <li class="treeview"> 
       <a href="#"> 
       <i class="fa fa-users"></i> <span>Users</span> 
       <i class="fa fa-angle-left pull-right"></i> 
       </a> 
       <ul class="treeview-menu"> 
       <li><a href="<?php echo base_url(); ?>user_man"><i class="fa fa-chevron-right"></i>User List</a></li> 
       </ul> 
      </li> 
      <li class="treeview"> 
       <a href="#"> 
       <i class="fa fa-hospital-o"></i> <span>Provider</span> 
       <i class="fa fa-angle-left pull-right"></i> 
       </a> 
       <ul class="treeview-menu"> 
       <li><a href="<?php echo base_url();?>provider"><i class="fa fa-chevron-right"></i>Provider List</a></li> 
       </ul> 
      </li> 
      <li class="treeview"> 
       <a href="#"> 
       <i class="fa fa-book"></i> <span>Product Info</span> 
       <i class="fa fa-angle-left pull-right"></i> 
       </a> 
       <ul class="treeview-menu"> 
       <li><a href="<?php echo base_url(); ?>productinfo"><i class="fa fa-chevron-right"></i>List Product Info</a></li> 
       </ul> 
      </li> 
      <li class="treeview"> 
       <a href="#"> 
       <i class="fa fa-book"></i> <span>Procedure</span> 
       <i class="fa fa-angle-left pull-right"></i> 
       </a> 
       <ul class="treeview-menu"> 
       <li><a href="<?php echo base_url(); ?>procedure"><i class="fa fa-headphones"></i>Procedure List</a></li> 
       <!-- <li><a href="#"><i class="fa fa-user"></i>Link Customer Portal</a></li> --> 
       </ul> 
      </li> 
      <li class="treeview"> 
       <a href="#"> 
       <i class="fa fa-film"></i> <span>Video Upload</span> 
       <i class="fa fa-angle-left pull-right"></i> 
       </a> 
       <ul class="treeview-menu"> 
       <li><a href="#"><i class="fa fa-chevron-right"></i>Video Data</a></li> 
       <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Prosedur</a></li> --> 
       <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Informasi NAB</a></li> --> 
       <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Demo(Video)</a></li> --> 
       </ul> 
      </li> 
      <li class="treeview"> 
       <a href="#"> 
       <i class="fa fa-camera-retro"></i> <span>Slide Show Wallpaper</span> 
       <i class="fa fa-angle-left pull-right"></i> 
       </a> 
       <ul class="treeview-menu"> 
       <li><a href="#"><i class="fa fa-chevron-right"></i>Slide Show Data</a></li> 
       <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Prosedur</a></li> --> 
       <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Informasi NAB</a></li> --> 
       <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Demo(Video)</a></li> --> 
       </ul> 
      </li> 
      <li class="treeview"> 
       <a href="#"> 
       <i class="fa fa-camera-retro"></i> <span>Examples</span> 
       <i class="fa fa-angle-left pull-right"></i> 
       </a> 
       <ul class="treeview-menu"> 
       <li><a href="<?php echo base_url();?>user/login"><i class="fa fa-chevron-right"></i>Login</a></li> 
       </ul> 
      </li> 
      </ul> 
     </section> 
     <!-- /.sidebar --> 
     </aside> 
</div> 
</body> 

訪問內容,這是我該怎麼做:

<section class="content"> 
..... 
</section> 

,這我頁腳視圖:

</div> 
<!-- /.content-wrapper --> 
<footer class="main-footer"> 
    <div class="pull-right hidden-xs"> 
    <b>Version</b> 2.0 
    </div> 
    <strong>Copyright &copy; 2014-2015</strong> All rights reserved. 
</footer> 


</div><!-- ./wrapper --> 

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

</body> 
</html> 

我想要製作,當用戶點擊treeview子菜單時它會變爲活動狀態, 右鍵知道當我點擊treeview子菜單。它將重新加載而不會激活。 在樣品我下載AdminLTE活性類中每個子菜單頁面中定義,如菜單 - <li class="active">submenu</li>

問候, 巴比

cmiiw

============== ==================================

我找到了js代碼,它在.app中。 JS。

$.AdminLTE.tree = function (menu) { 
    var _this = this; 

    $("li a", $(menu)).click(function (e) { 
    //Get the clicked link and the next element 
    var $this = $(this); 
    var checkElement = $this.next(); 

    //Check if the next element is a menu and is visible 
    if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) { 
     //Close the menu 
     checkElement.slideUp('normal', function() { 
     checkElement.removeClass('menu-open'); 
     //Fix the layout in case the sidebar stretches over the height of the window 
     //_this.layout.fix(); 
     }); 
     checkElement.parent("li").removeClass("active"); 
    } 
    //If the menu is not visible 
    else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) { 
     //Get the parent menu 
     var parent = $this.parents('ul').first(); 
     //Close all open menus within the parent 
     var ul = parent.find('ul:visible').slideUp('normal'); 
     //Remove the menu-open class from the parent 
     ul.removeClass('menu-open'); 
     //Get the parent li 
     var parent_li = $this.parent("li"); 

     //Open the target menu and add the menu-open class 
     checkElement.slideDown('normal', function() { 
     //Add the class active to the parent li 
     checkElement.addClass('menu-open'); 
     parent.find('li.act').addClass('active'); 
     // parent_li.addClass('active'); 
     //Fix the layout in case the sidebar stretches over the height of the window 
     _this.layout.fix(); 
     }); 
    } 
    //if this isn't a link, prevent the page from being redirected 
    if (checkElement.is('.treeview-menu')) { 
     e.preventDefault(); 
    } 
    }); 
}; 

這裏是佈局的第一個模式。 in page.A <li>是活躍的,所以page.B,當我點擊其中一個它變得活躍。 將頁面切分成codeigniter方式後,我分離成3:header,content(body)和footer。 我刪除所有的類標籤<li> ..

我嘗試修改像下面thie:

checkElement.addClass('menu-open'); 
parent.find('li').on('click', function(){ 
    $(this).addClass('active'); 
}); 

它不會工作,如果 難怪能跟大家有一個途徑。

對不起我的英文不好:-D

回答

0

嘗試preventDefault()

$('.treeview').on('click', function(e) { 
    e.preventDefault(); 
}); 
+0

感謝@kapantzak但它仍然不會工作 –

0

嘗試標記之前把下面的代碼的代碼 結束

$(document).ready(function(e){ 
    $('.treeview a').each(function(e){ 
     var pathname = window.location.pathname.split("/"); 
     var url= pathname[pathname.length-1]; 
     var link = $(this).attr('href'); 
     if(link==url){$(this).parent('li').addClass('active');} 
    }); 
    }); 

,並在那裏寫「 $(「li a」,$(menu))。點擊(函數(E){」 下面放線後,

$('.treeview .active').removeClass('active'); 
    e.preventDefault(); 
    $(this).addClass('active'); 
+0

它工作,但我無法加載我的網頁。它由'e.preventDefault();' 我試圖修改它,但它仍然不會工作太。這是我如何道:$('。treeview-菜單li a [href =「'+ url +'」]')。addClass('active');'@nirmal –

+0

沒有我的網頁不重新加載兄弟。我的菜單和子菜單放在header.php中,我分開了AdmintLte模板。在AdminLte活動類中,放置在菜單或子菜單的每個頁面中。 @nirmal –

+0

對不起,我的意思是URL更改。因爲在這種情況下,標題將以新的方式進入新頁面,在這種情況下,雖然我也有該解決方案,但仍想確認自己的狀況,但仍有不同的解決方案。 – nirmal

0

這是很容易和正常工作

$(document).ready(function(e){ 
var url=window.location 
$('.treeview-menu a').each(function(e){ 
    var link = $(this).attr('href'); 
    if(link==url){ 
     $(this).parent('li').addClass('active'); 
     $(this).closest('.treeview').addClass('active'); 
    } 
}); 

});

相關問題