我想知道在将视图分成3个文件时如何在codeigniter中添加活动类。如:
来自此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 © 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();
}
});
};
这是布局的第一个架构。
在页面中。<li>
处于活动状态,所以page.B,当我点击其中一个时,它变为活动状态。
在将页面切换为codeigniter方式之后,我分为3:标题,内容(正文)和页脚。
我删除了标记<li>
..
我尝试修改如下:
checkElement.addClass('menu-open');
parent.find('li').on('click', function(){
$(this).addClass('active');
});
它不会工作,
不知道你们有没有办法。
抱歉我的英语不好:-D
答案 0 :(得分:1)
这很容易且工作正常
$(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');
}
});
});
答案 1 :(得分:0)
尝试preventDefault()
$('.treeview').on('click', function(e) {
e.preventDefault();
});
答案 2 :(得分: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))。点击(function(e){” 在它之后放下线
$('.treeview .active').removeClass('active');
e.preventDefault();
$(this).addClass('active');