bootstrap 后台管理页面

声明： 左侧菜单借鉴了网上 的二级菜单的样式。希望作者不要追究我的法律责任。

功能说明：点击左侧菜单，右侧生成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">

&times;

</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 。

时间： 2024-11-05 02:35:40

bootstrap 后台管理页面的相关文章

17款免费的Bootstrap后台管理模板集合

Bootstrap是Twitter推出的一个用于前端开发的开源工具包.是目前最受欢迎的前端框架之一.下面为大家推荐17个免费的Bootstrap后台管理界面模板. 1. Admin Lite AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. 2. Dashboard Sidebar 这是一个管理后台模板,拥有控制面板或仪表板.这个模板有一个可折叠的工具栏菜单,并且有可以作为一个数据网格的表

8 功能6：后台管理页面，编辑文章

1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^cn_backend/add_article/$', views.add_article, name='add_articles'), view视图 from django.shortcuts import render, HttpResponse, redirect from blog import

wordpress——在插件后台管理页面中添加javascript和ajax

最近在开发一个wordpress插件,需要在插件的后台管理页面上,添加自己写的javascript文件,以达到一些功能. 查了好几天的文档和资料,终于实现了. 这里先介绍下wordpress后台页面添加javascript的过程,再介绍添加ajax的过程. 添加javascript 首先我们需要知道wordpress插件开发的框架,然后再介绍javascript添加的步骤. 添加插件设置页面 开发插件,总需要在管理后台添加自己的插件设置页面.插件设置子页面,在这些页面中,可以设置和保存插件的一些

后台管理页面布局

1 <!DOCTYPE html> 2 <!--后台管理页面布局1--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .rig

HTML高级标签（2）————窗口分帧（2）————后台管理页面

使用frameset进行窗口分帧,构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. 1  首先,需要一个页面,使用<frameset>按比例划分为适合的三个区域:头部,菜单,主体. <frameset>不能放在<body>中编写. 给每一个<frame>进行命名,便于后面链接时target属性可以直接指向指定位置. 代码如下(文件名自定义,我写的是 frameset.html): <html> <head> <

最为纯粹简单的后台管理页面框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title

css做的后台管理页面，不考虑ie8一下的

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>盒子模型</title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; width:100%; overflow:hidden; } .wrap { he

5. 添加后台管理页面

接着上篇继续,博客网站少不了后台管理页面,在后台可以添加文章以及维护基础数据,因此本文主要就介绍怎样添加视图页面.怎样使用视图模型.绑定静态资源以及ThymeLeaf模板引擎的基本使用,具体如下:1. 添加Menu类,表示后台管理页面中的左侧菜单 1 package com.lvniao.blog.model; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 public class Menu { 7 8 private

Bootstrap后台管理界面模板(ACE后台管理界面)

响应式Bootstrap网站后台管理系统模板ACE,非常不错的轻量级易用的后台管理系统,基于Bootstrap3,拥有强大的功能组件以及UI组件,基本能满足后台管理系统的需求,而且能根据不同设备适配显示,而且还有四个主题可以切换. 网页图标全采用FontAwesome,除Bootstrap,jQuery UI使用到的第三方插件有: jQuery 2.0.3 jQuery UI 1.10.3 (Custom Build) Twitter Bootstrap 3.0.0 FontAwesome 3.