标签：javascript bootstrap html5 jquery
声明： 左侧菜单借鉴了网上 的二级菜单的样式。希望作者不要追究我的法律责任。
功能说明：点击左侧菜单，右侧生成tabs，加载数据。tabs 可关闭。默认选中。
插件说明：使用bootstrapgrid 和jquery ui bootstrap。数据显示使用bootstrapgrid， tabs 生成和删除，使用jquery ui bootstrap。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="jquery-bootgrid-master/demo/css/bootstrap.css" rel="stylesheet" />
</head>
<style>
#main-nav {
margin-left: 1px;
}
#main-nav.nav-tabs.nav-stacked > li > a {
padding: 10px 8px;
font-size: 12px;
font-weight: 600;
color: #4A515B;
background: #E9E9E9;
background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#FAFAFA‘, endColorstr=‘#E9E9E9‘);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#FAFAFA‘, endColorstr=‘#E9E9E9‘)";
border: 1px solid #D5D5D5;
border-radius: 4px;
}
#main-nav.nav-tabs.nav-stacked > li > a > span {
color: #4A515B;
}
#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
color: #FFF;
background: #3C4049;
background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#4A515B‘, endColorstr=‘#3C4049‘);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#4A515B‘, endColorstr=‘#3C4049‘)";
border-color: #2B2E33;
}
#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
color: #FFF;
}
#main-nav.nav-tabs.nav-stacked > li {
margin-bottom: 4px;
}
/*定义二级菜单样式*/
.secondmenu a {
font-size: 10px;
color: #4A515B;
text-align: left;
}
.navbar-static-top {
margin-bottom: 5px;
}
.navbar-brand {
background: url(‘‘) no-repeat 10px 8px;
display: inline-block;
vertical-align: middle;
padding-left: 50px;
color: #fff;
}
</style>
<body>
<header id="header" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" data-i18n="title" href="#" id="logo">配置管理系统
</a>
<a class="navbar-brand" class="btn btn-default" onclick="divhide()">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
<span class="navbar-brand" data-i18n="title">jQuery Bootgrid</span>
</div>
<nav id="menu" class="navbar-collapse collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">退出</a></li>
</ul>
</nav>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2" id="hiddendiv">
<ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
<li class="active">
<a href="#">
<i class="glyphicon glyphicon-th-large"></i>
首页
</a>
</li>
<li>
<a href="#systemSetting" data-toggle="collapse" class="nav-header collapsed" data-parent="hiddendiv">
<i class="glyphicon glyphicon-cog"></i>
系统管理
<span class="pull-right glyphicon glyphicon-chevron-down"></span>
</a>
<ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
<li><a href="#" onclick="createTabs(‘usercode‘,‘用户管理‘,‘./bootgrid.html‘)"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
<li><a href="#" onclick="createTabs(‘menucode‘,‘菜单管理‘,‘./bootgrid.html‘)"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
<li><a href="#" onclick="createTabs(‘rolecode‘,‘角色管理‘,‘./bootgrid.html‘)"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
<li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
<li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="collapse" data-parent="hiddendiv">
<i class="glyphicon glyphicon-credit-card"></i>
物料管理
</a>
</li>
<li>
<a href="#" data-toggle="collapse" data-parent="hiddendiv">
<i class="glyphicon glyphicon-globe"></i>
分发配置
<span class="label label-warning pull-right">5</span>
</a>
</li>
<li>
<a href="#" data-toggle="collapse" data-parent="hiddendiv">
<i class="glyphicon glyphicon-calendar"></i>
图表统计
</a>
</li>
<li>
<a href="#" data-toggle="collapse" data-parent="hiddendiv">
<i class="glyphicon glyphicon-fire"></i>
关于系统
</a>
</li>
</ul>
</div>
<div class="col-md-9" id="tabs2">
<ul class="nav" role="tablist" id="maintab">
</ul>
<!-- Tab panes
<div class="tab-content" id="maindiv">
<div class="tab-pane active" id="home"></div>
</div> -->
</div>
</div>
</div>
</body>
<script src="jquery-bootgrid-master/lib/jquery-1.11.1.min.js"></script>
<script src="jquery-bootgrid-master/demo/js/bootstrap.js"></script>
<link type="text/css" href="./jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="./jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
function divhide(){
$("#hiddendiv").fadeToggle(250);
}
</script>
<script>
//createTabs(‘rolecode‘,‘角色管理‘,‘./bootgrid.html‘)"
function createTabs(functionCode,functionName,url){
addTab(functionName,functionCode,url);
}
<!-- tabs jquery ui bootstrap 中的案例，有些改变，但总体还是借鉴。-->
var tabTitle ="new Tab",
tabTemplate = "<li class=‘active‘ ><a href=‘#{href}‘>#{label}</a> <span class=‘ui-icon ui-icon-close‘>Remove Tab</span></li>",
tabCounter = 0;
var tabs = $( "#tabs2" ).tabs();
function addTab(functionName,functionCode,url ) {
var label = functionName || "Tab " + tabCounter,
id = "tabs-" + functionCode,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
if($("#tabs-"+functionCode).length>0) //如果有相同的functionCode ，说明已经有了tab，不用新建，选中就行了。
{
tabs.tabs(‘select‘, ‘#‘ +id);
return ;
}
tabs.find( ".ui-tabs-nav" ).append( li );
//每个div 中都有一个iframe ,这种方式不是太好，可自己优化。
tabs.append( "<div id=‘" + id + "‘><iframe src=\""+url+"\" width=\"100%\" height=\"550px;\" frameborder=0 scrolling=\"no\"></iframe></div>" );
tabs.tabs( "refresh" );
tabs.tabs(‘select‘, ‘#‘ +id); //根据id 选中tab
tabCounter++;
}
<!--关闭-->
$( "#tabs2" ).on( "click",‘span.ui-icon-close‘, function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
});
</script>
</html>
---bootgrid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Bootgrid Demo</title>
<link href="jquery-bootgrid-master/demo/css/bootstrap.css" rel="stylesheet" />
<link href="jquery-bootgrid-master/dist/jquery.bootgrid.css" rel="stylesheet" />
<style>
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
.column .text { color: #f00 !important; }
.cell { font-weight: bold; }
.pagination {
float: right;
display: inline-block;
padding-right: 0;
margin: 0px 0px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!--div class="table-responsive"-->
<!-- <table id="grid" class="table table-condensed table-hover table-striped"
data-selection="true" data-multi-select="true"
data-row-select="true" data-keep-selection="true"> -->
<!-- 按钮触发模态框 -->
<button id="getSelectedRows" type="button" class="btn btn-success"
data-toggle="modal" data-target="#myModal">添加</button>
<button id="getSelectedRows" type="button" class="btn btn-wran">修改</button>
<table id="grid" data-ajax="true" data-selection="true" data-multi-select="true" data-url="UserSerlvt" data-toggle="bootgrid" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-formatter="id" data-identifier="true" data-visible="true" data-width="15px" data-align="left" >ID</th>
<th data-column-id="sender" data-order="asc" data-align="left" data-header-align="left" data-width="75%">发送者</th>
<th data-column-id="received" data-css-class="cell" data-header-css-class="column" data-filterable="true">回复人</th>
<th data-column-id="link" data-formatter="links" data-sortable="false" data-width="75px">地址</th>
<th data-column-id="status" data-type="numeric" data-visible="true">状态</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!--/div-->
</div>
</div>
</div>
<!-- 按钮触发模态框 -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
<script src="jquery-bootgrid-master/lib/jquery-1.11.1.min.js"></script>
<script src="jquery-bootgrid-master/demo/js/bootstrap.js"></script>
<script src="jquery-bootgrid-master/dist/jquery.bootgrid.js"></script>
<script>
/**
<th>参数说明
data-visible="false" 是否可见 true 可见，false 不可见
data-width="15px" 设置宽度 可谓px 或百分比。
data-type="numeric" 数据格式
data-sortable="false" 是否排序
data-filterable="true" 是否是过滤条件
<table> 参数说明
data-url="UserSerlvt" url 地址 返回json格式
data-ajax="true" 是否是ajax方式
数据选择相关
data-selection="true"
data-multi-select="true"
data-row-select="true"
data-keep-selection="true"
*/
/* $("a[href=#showModal]").click(function(){
$("#showModal").load($(this).attr("data-url"));
}); */
function acb(id){
$("#showModal").modal({
remote: "test.jsp?str="+id
});
}
$("#showModal").on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");
});
function init()
{
// $("#grid").bootgrid("destroy");//测试时formatter 不管用，因为先执行了加载数据，加载后formatter无法影响样式。
//先destroy 后formatters 可以使用
$("#grid").bootgrid({
// ajax:true,
// url:"/UserSerlvt",
formatters: {
"links": function(column, row)
{
return "<a data-toggle=\"modal\" onclick=\"acb("+row.id+")\" data-target=\"#showModal\">" + row.id + ": " + row.id + "</a>";
},
"id":function(column, row)
{
return "<a href=\"#\">" + column.id + ": " + row.id + "</a>";
}
},
rowCount: [10, 25, 50, 75] //-1是显示全部
});
}
$(function()
{
init();
});
</script>
</body>
</html>
最后效果
附：1.修改了bootgrid.js 的源码。隐藏了一些按钮，只留下了分页。
2.jquery ui bootstrap 案例 http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/
3.jQuery Bootgrid 网址 http://www.jquery-bootgrid.com
4.再次感谢二级菜单的作者。
说明，二级菜单样式和bootgrid.css 样式有冲突。 直接load（“***.html”），会影响使用。所以选择使用了iframe 。
标签：javascript bootstrap html5 jquery
原文地址：http://blog.csdn.net/shenyingkui/article/details/46314505
