基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
在上篇基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理，介绍了Bootstrap开发框架的一些基础性概括，包括总体界面效果，以及布局、菜单等内容，本篇继续这一主题，介绍页面内容常用到的数据分页处理，以及Bootstrap插件JSTree的使用。在数据的界面显示当中，表格数据的展示以及分页是非常常见的处理操作，利用Bootstrap的样式布局，以及JQuery的Ajax数据处理，就能很好实现数据的动态展示和分页处理。1、列表展示和分页处理1）数据的列表展示在很多页面里面，我们一般都需要对数据库记录进行列表展示并进行分页。左侧的树列表下面小节介绍，右边就是我们一般的数据查询显示区域，分为查询内容和数据列表两部分，查询内容，我们一般放在一个表单里面进行处理，用户触发查询的时候，我们对事件进行处理，并从MVC后台的控制器里面请求对应的数据返回给页面前端，对数据进行显示和分页处理即可。如菜单页面的查询代码如下所示。 &form class="form-horizontal" id="ffSearch"& &div class="col-md-3 col-sm-3 col-xs-6"& &div class="form-group"& &label class="control-label col-md-4"&显示名称&/label& &div class="col-md-8"& &input name="WHC_Name" type="text" class="form-control"& &/div& &/div& &/div& &div class="col-md-3 col-sm-3 col-xs-6"& &div class="form-group"& &label class="control-label col-md-4"&功能ID&/label& &div class="col-md-8"& &input name="WHC_FunctionId" type="text" class="form-control"& &/div& &/div& &/div& &div class="col-md-3 col-sm-3 col-xs-6"& &div class="form-group"& &label class="control-label col-md-4"&Web连接地址&/label& &div class="col-md-8"& &input name="WHC_Url" type="text" class="form-control"& &/div& &/div& &/div& &div class="col-md-3 col-sm-3 col-xs-6"& &div class="form-group"& &label class="control-label col-md-4"&Web菜单图标&/label& &div class="col-md-8"& &input name="WHC_WebIcon" type="text" class="form-control"& &/div& &/div& &/div& &/form&我们在页面的JS代码里面，处理页面初始化后，对数据进行查询的处理操作，如下脚本所示。 //页面初始化 $(function () { initJsTree(); //初始化树 BindEvent(); //绑定事件处理 Search(currentPage);//初始化第一页数据 InitDictItem(); //初始化字典信息 });而数据的显示部分，HTML代码如下所示。主要就是显示了表头内容，表格的主体内容grid_body则有脚本动态构建并显示&table id="grid" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"& &thead id="grid_head"& &tr& &th class="table-checkbox" style="width:40px"&&input class="group-checkable" type="checkbox" onclick="selectAll(this)"&&/th& &th&显示名称&/th& &th&排序&/th& &th&功能ID&/th& &th&菜单可见&/th& &th&Web连接地址&/th& &th&Web菜单图标&/th& &th&系统编号&/th& &th style="width:90px"&操作&/th& &/tr& &/thead& &tbody id="grid_body"&&/tbody& &/table& &div class="paging-toolbar"& &ul id='grid_paging'&&/ul& &/div&而数据的显示，是在页面准备完成后，通过Search脚本函数进行处理，处理的时候，先序列号表单的条件和分页的条件信息，传入MVC控制器，获取对应的列表数据，在界面上进行动态绑定即可完成整个处理过程了。具体代码截图如下所示。而其中的代码tr += getActionHtml(item.ID);则是通过脚本生成一些操作按钮，界面如下所示。2）数据分页处理我们页面显示的数据一般不是固定的记录，因此分页也是很必要的处理，可以提高性能，也可以提高用户的友好体验，其中的数据分页是采用了Bootstrap的插件Bootstrap Paginator进行处理的。这个控件用的很多，是一个很强大的分页插件。Bootstrap Paginator它的GitHub代码地址为：/lyonlai/bootstrap-paginator它的使用例子介绍，可以参考：http://lyonlai.github.io/bootstrap-paginator/该控件使用的时候，引入Jquery和Bootstrap样式和类库后，通过下面的代码行即可添加使用。&script src="/js/bootstrap-paginator.min.js"&&/script&该控件分页可以通过处理page-clicked和page-changed事件进行实现。分页展示内容，我们通过在HTML代码里面添加一个DIV进行，声明一个ID为grid_paging的UL元素，代码如下所示。 &div class="paging-toolbar"& &ul id='grid_paging'&&/ul& &/div&然后具体的JS里面处理代码如下所示。在MVC的后台，我们需要获取用户在前端页面传入的分页条件和表单数据条件，这样我们就可以根据这些参数，获取到对应的数据返回给客户端了。由于这些处理都是很通用的，因此我们可以放到基类控制器进行处理，如果需要特殊化处理，再在子类控制器里面重写分页函数FindWithPager即可。 /// &summary& /// 根据条件查询数据库,并返回对象集合(用于分页数据显示) /// &/summary& /// &returns&指定对象的集合&/returns& public virtual ActionResult FindWithPager() { //检查用户是否有权限，否则抛出MyDenyAccessException异常 base.CheckAuthorized(AuthorizeKey.ListKey); string where = GetPagerCondition(); PagerInfo pagerInfo = GetPagerInfo(); List&T& list = baseBLL.FindWithPager(where, pagerInfo); //Json格式的要求{total:22,rows:{}} //构造成Json的格式传递 var result = new { total = pagerInfo.RecordCount, rows = list }; return ToJsonContentDate(result); } 其中GetPagerInfo就是获取用户传入进来的分页参数，还记得我们上面前端页面处理的URL参数吗，如下所示。url = "/Menu/FindWithPager?page=" + page + "&rows=" +具体MVC控制器GetPagerInfo函数的实现代码如下所示。 /// &summary& /// 根据Request参数获取分页对象数据 /// &/summary& /// &returns&&/returns& protected virtual PagerInfo GetPagerInfo() { int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]); int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]); PagerInfo pagerInfo = new PagerInfo(); pagerInfo.CurrenetPageIndex = pageI pagerInfo.PageSize = pageS return pagerI }然后获取到表单条件和分页条件后，传入给框架的业务逻辑类处理就可以了，这里已经是框架底层的支持范畴了，不在继续展开。List&T& list = baseBLL.FindWithPager(where, pagerInfo);最后的界面效果如下所示2、插件JSTree前面小节也提高的树列表的展示，在一般情况下，如果数据有层次的，那么通过树列表展示，可以很直观的显示出它们的结构，因此树列表在很多情况下，可以辅助我们对数据的分类展示。如对于用户数据来说，我们可以根据用户的组织机构或者角色进行分类，他们两者可以通过树列表进行直观的展示，这样我们在寻找不同类型的用户列表的时候，就很好找了。或者对于字典数据或者省份城市的数据，一样更可以通过树列表进行展示 JSTree 控件的官方地址为/网站对JSTree控件的使用说明及案例讲解的已经很清晰了，一般情况下，我们直接参考例子就可以使用了。简单的JSTree使用代码如下所示$(function () { $('#jstree_demo_div').jstree(); });对于JSTree的事件，我们一般可以通过下面代码进行绑定事件。$('#jstree_demo_div').on("changed.jstree", function (e, data) { console.log(data.selected);});JSTree一般我们会通过JSON数据进行动态绑定，这个JSON的数据格式定义如下所示。{ id : "string" // required parent : "string" // required text : "string" // node text icon : "string" // string for custom state : { opened : boolean // is the node open disabled : boolean // is the node disabled selected : boolean // is the node selected }, li_attr : {} // attributes for the generated LI node a_attr : {} // attributes for the generated A node}一般情况下，我们通过下面的脚本进行数据的清空和绑定操作$('#jstree_demo_div').data('jstree', false);//清空数据，必须//异步进行JSON数据的绑定$.getJSON(url, function (data) { $('#jstree_demo_div').jstree({ 'core': { 'data': data, "themes": { "responsive": false } } }).bind('loaded.jstree', loadedfunction);}); 如果我们需要给用户提供复选框，设置JSTree的选中状态，界面效果如下所示。那么一般的初始化函数就需要变化一下，如下代码所示 //带复选框的JSTree的初始化代码 $.getJSON(url, function (data) { control.jstree({ 'plugins' : [ "checkbox" ], //出现选择框 'checkbox': { cascade: "", three_state: false }, //不级联 'core': { 'data': data, "themes": { "responsive": false } } }).bind('loaded.jstree', loadedfunction); });综合两者，我们可以进一步把JSTree控件的初始化绑定提炼为一个JS的公共函数bindJsTree即可。//以指定的Json数据，初始化JStree控件//treeName为树div名称，url为数据源地址，checkbox为是否显示复选框，loadedfunction为加载完毕的回调函数function bindJsTree(treeName, url, checkbox, loadedfunction) { var control = $('#' + treeName) control.data('jstree', false);//清空数据，必须 var isCheck = arguments[2] || //设置checkbox默认值为false if(isCheck) { //复选框树的初始化 $.getJSON(url, function (data) { control.jstree({ 'plugins' : [ "checkbox" ], //出现选择框 'checkbox': { cascade: "", three_state: false }, //不级联 'core': { 'data': data, "themes": { "responsive": false } } }).bind('loaded.jstree', loadedfunction); }); } else { //普通树列表的初始化 $.getJSON(url, function (data) { control.jstree({ 'core': { 'data': data, "themes": { "responsive": false } } }).bind('loaded.jstree', loadedfunction); });
}}因此在页面的绑定JSTree的时候，代码可以简化一下 //初始化组织机构列表 function initDeptTreeview() { var treeUrl = '/User/GetMyDeptJsTreeJson?["UserId"]'; bindJsTree("jstree_div", treeUrl); //树控件的变化事件处理 $('#jstree_div').on("changed.jstree", function (e, data) { var icon = data.node.
loadDataByOu(data.selected); }); }对于复选框的列表，初始化代码如下所示。 //初始化所有该用户的所有功能集合 var treeUrl = '/Function/GetRoleFunctionJsTreeByUser?["UserId"]'; bindJsTree("tree_function", treeUrl, true); //角色数据权限，先初始化所有部门 treeUrl = '/User/GetMyDeptJsTreeJson?["UserId"]'; bindJsTree("tree_roledata", treeUrl, true);对于复选框，我们一般是初始化数据，然后在根据需要设置树列表的选中状态，这种不用频繁初始化树，可以有效提高性能和响应体验。那么我们在初始化树列表后，就需要清空选择项，然后设置我们所需要的选择项即可，具体代码如下所示，注意其中的uncheck_all和check_node事件的处理。//初始化角色数据权限集合（组织机构） function initRoleData(id) { if (id != "") { var treeMenu = "tree_roledata"; $('#' + treeMenu).jstree("uncheck_all");//取消所有选中 //勾选指定内容 $.getJSON("/RoleData/GetRoleDataList?r=" + Math.random() + "&roleId=" + id, function (json) { $.each(json, function (i, item) { $('#' + treeMenu).jstree('check_node', item);//将节点选中
}); }); } }数据保存的时候，我们获得JSTree的节点选中列表就可以进行数据的保存了，具体代码如下所示。//保存角色数据权限 function saveRoleData(roleid) { var ouList = $('#tree_roledata').jstree('get_selected'); var url = '/RoleData/UpdateData?r=' + Math.random(); var postData = { roleId: roleid, ouList: ouList.join(',')}; $.post(url, postData, function (json) { initRoleData(roleid); }).error(function () { showTips("您未被授权使用该功能，请联系管理员进行处理。"); }); }好了，介绍到这里，基本上也把常规的数据展示，数据分页；JSTree的绑定、事件处理，数据保存等操作介绍的相对完整了，希望得到大家的继续支持，我会继续详细介绍Bootstrap开发里面涉及到的要点和各个插件的使用，以便把学习更加具体化，实用化，能够给我们实价开发项目做有用的参考。以上内容是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用 的相关知识，希望对大家有所帮助。在此也感谢大家对脚本之家网站的支持，相信我们会做的更好！
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
人生就像一场舞会，教会你最初舞步的人，却未必能陪你走到散场。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.netBootstrap Metronic 学习记录（二）菜单
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
1) .环境配置
2) .提取页面
2）.动态生成菜单（无限级别树）
2.系统环境配置
项目需要程序数据支撑，这里选择MVC5.0+EF6.0[SQLSERVER]（不对MVC架构和SQLServer做出解读）
运行环境：VS2013+MVC5.0+EF6.1+SQLServer2012
解决方案名称：AppSolution 项目名称：App.Web(UI层)与App.Models(数据访问层) -直接访问模式
提取theme下的所有文件到MVC的Content，提取admin的index.html到_Layout.cshtml来准备改造
3.创建数据库和表
数据库：AppDataBase
创建以下数据表，并创建AppDB.edmx
USE [AppDataBase]GO/****** Object: Table [dbo].[SysModule] Script Date:
21:03:39 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOSET ANSI_PADDING ONGOCREATE TABLE [dbo].[SysModule]( [ID] [varchar](50) NOT NULL, --主键ID [Name] [varchar](50) NOT NULL, --菜单名称 [ParentID] [varchar](50) NULL, --上级ID [Url] [varchar](200) NULL, --URL [Iconic] [varchar](200) NULL, --图标 [Sort] [int] NULL, --排序 [Enable] [bit] NOT NULL, --是否显示 [CreateTime] [datetime] NULL, --创建时间 [IsLast] [bit] NOT NULL --是否最后一项 CONSTRAINT [PK_SysModule] PRIMARY KEY CLUSTERED ( [Id] ASC)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]) ON [PRIMARY]GOSET ANSI_PADDING OFFGOALTER TABLE [dbo].[SysModule] WITH NOCHECK ADD CONSTRAINT [FK_SysModule_SysModule] FOREIGN KEY([ParentID])REFERENCES [dbo].[SysModule] ([Id])GOALTER TABLE [dbo].[SysModule] NOCHECK CONSTRAINT [FK_SysModule_SysModule]GO
人为造点数据
INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('0','root','root','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('1','一级菜单01','0','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('11','二级菜单01-01','1','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('111','三级菜单01-01-01','11','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('112','三级菜单01-01-02','11','Index','icon-settings',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('12','二级菜单01-02','1','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('13','二级菜单01-03','1','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('2','一级菜单02','0','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('21','二级菜单02-01','2','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('211','三级菜单02-01-01','5','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('212','三级菜单02-01-02','5','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('22','二级菜单02-02','2','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('23','二级菜单02-03','2','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('3','一级菜单03','0','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('31','二级菜单03-01','3','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('311','三级菜单03-01-01','31','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('312','三级菜单03-01-02','31','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('32','二级菜单03-02','3','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('33','二级菜单03-03','3','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('4','一级菜单04','0','Index','icon-settings',NULL,0,NULL,0)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('41','二级菜单04-01','4','Index','icon-link',NULL,0,NULL,1)INSERT INTO [SysModule] ([ID],[Name],[ParentID],[Url],[Iconic],[Sort],[Enable],[CreateTime],[IsLast]) values ('42','二级菜单04-02','4','Index','icon-link',NULL,0,NULL,1)(22 行受影响)
4.提取页面重要布局
我们是后台系统所以我们保留top. left menu和foot3个部分
我已经提取好了，请复制
&!DOCTYPE html&&html lang="en" class="no-js"&&head& &meta charset="utf-8" /& &title&Metronic | 版面展示&/title& &meta http-equiv="X-UA-Compatible" content="IE=edge"& &meta content="width=device-width, initial-scale=1" name="viewport" /& &meta content="" name="description" /& &meta content="" name="author" /& &link href="~/Content/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /& &link href="~/Content/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /& &link href="~/Content/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /& &link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" /& &link href="~/Content/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" /& &!-- END GLOBAL MANDATORY STYLES --& &!-- BEGIN PAGE LEVEL PLUGIN STYLES --& &link href="~/Content/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" /& &link href="~/Content/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" /& &link href="~/Content/assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" /& &!-- END PAGE LEVEL PLUGIN STYLES --& &!-- BEGIN PAGE STYLES --& &link href="~/Content/assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css" /& &!-- END PAGE STYLES --& &!-- BEGIN THEME STYLES --& &link href="~/Content/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css" /& &link href="~/Content/assets/global/css/plugins.css" rel="stylesheet" type="text/css" /& &link href="~/Content/assets/admin/layout/css/layout.css" rel="stylesheet" type="text/css" /& &link href="~/Content/assets/admin/layout/css/themes/darkblue.css" rel="stylesheet" type="text/css" id="style_color" /& &link href="~/Content/assets/admin/layout/css/custom.css" rel="stylesheet" type="text/css" /& &!-- END THEME STYLES --& &link rel="shortcut icon" href="favicon.ico" /&&/head&&body class="page-header-fixed page-quick-sidebar-over-content page-sidebar-closed-hide-logo page-container-bg-solid"& &!-- BEGIN HEADER --& &div class="page-header navbar navbar-fixed-top"& &!-- BEGIN HEADER INNER --& &div class="page-header-inner"& &!-- BEGIN LOGO --& &div class="page-logo"& &a href="index.html"& &img src="~/Content/assets/admin/layout/img/logo.png" alt="logo" class="logo-default" /& &/a& &div class="menu-toggler sidebar-toggler hide"& &/div& &/div& &!-- END LOGO --& &!-- BEGIN RESPONSIVE MENU TOGGLER --& &a href=":;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse"& &/a& &!-- END RESPONSIVE MENU TOGGLER --& &!-- BEGIN TOP NAVIGATION MENU --& &div class="top-menu"& &ul class="nav navbar-nav pull-right"& &!-- BEGIN NOTIFICATION DROPDOWN --& &!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte --& &li class="dropdown dropdown-extended dropdown-notification" id="header_notification_bar"& &a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"& &i class="icon-bell"&&/i& &span class="badge badge-default"& 7 &/span& &/a& &ul class="dropdown-menu"& &li class="external"& &h3&&span class="bold"&12 pending&/span& notifications&/h3& &a href="extra_profile.html"&view all&/a& &/li& &li& &ul class="dropdown-menu-list scroller" style="height: 250" data-handle-color="#637283"& &li& &a href="javascript:;"& &span class="time"&just now&/span& &span class="details"& &span class="label label-sm label-icon label-success"& &i class="fa fa-plus"&&/i& &/span& New user registered. &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="time"&3 mins&/span& &span class="details"& &span class="label label-sm label-icon label-danger"& &i class="fa fa-bolt"&&/i& &/span& Server #12 overloaded. &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="time"&10 mins&/span& &span class="details"& &span class="label label-sm label-icon label-warning"& &i class="fa fa-bell-o"&&/i& &/span& Server #2 not responding. &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="time"&14 hrs&/span& &span class="details"& &span class="label label-sm label-icon label-info"& &i class="fa fa-bullhorn"&&/i& &/span& Application error. &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="time"&2 days&/span& &span class="details"& &span class="label label-sm label-icon label-danger"& &i class="fa fa-bolt"&&/i& &/span& Database overloaded 68%. &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="time"&3 days&/span& &span class="details"& &span class="label label-sm label-icon label-danger"& &i class="fa fa-bolt"&&/i& &/span& A user IP blocked. &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="time"&4 days&/span& &span class="details"& &span class="label label-sm label-icon label-warning"& &i class="fa fa-bell-o"&&/i& &/span& Storage Server #4 not responding dfdfdfd. &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="time"&5 days&/span& &span class="details"& &span class="label label-sm label-icon label-info"& &i class="fa fa-bullhorn"&&/i& &/span& System Error. &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="time"&9 days&/span& &span class="details"& &span class="label label-sm label-icon label-danger"& &i class="fa fa-bolt"&&/i& &/span& Storage server failed. &/span& &/a& &/li& &/ul& &/li& &/ul& &/li& &!-- END NOTIFICATION DROPDOWN --& &!-- BEGIN INBOX DROPDOWN --& &!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte --& &li class="dropdown dropdown-extended dropdown-inbox" id="header_inbox_bar"& &a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"& &i class="icon-envelope-open"&&/i& &span class="badge badge-default"& 4 &/span& &/a& &ul class="dropdown-menu"& &li class="external"& &h3&You have &span class="bold"&7 New&/span& Messages&/h3& &a href="page_inbox.html"&view all&/a& &/li& &li& &ul class="dropdown-menu-list scroller" style="height: 275" data-handle-color="#637283"& &li& &a href="inbox.html?a=view"& &span class="photo"& &img src="~/Content/assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt=""& &/span& &span class="subject"& &span class="from"& Lisa Wong &/span& &span class="time"&Just Now &/span& &/span& &span class="message"& Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... &/span& &/a& &/li& &li& &a href="inbox.html?a=view"& &span class="photo"& &img src="~/Content/assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt=""& &/span& &span class="subject"& &span class="from"& Richard Doe &/span& &span class="time"&16 mins &/span& &/span& &span class="message"& Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... &/span& &/a& &/li& &li& &a href="inbox.html?a=view"& &span class="photo"& &img src="~/Content/assets/admin/layout3/img/avatar1.jpg" class="img-circle" alt=""& &/span& &span class="subject"& &span class="from"& Bob Nilson &/span& &span class="time"&2 hrs &/span& &/span& &span class="message"& Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh... &/span& &/a& &/li& &li& &a href="inbox.html?a=view"& &span class="photo"& &img src="~/Content/assets/admin/layout3/img/avatar2.jpg" class="img-circle" alt=""& &/span& &span class="subject"& &span class="from"& Lisa Wong &/span& &span class="time"&40 mins &/span& &/span& &span class="message"& Vivamus sed auctor 40% nibh congue nibh... &/span& &/a& &/li& &li& &a href="inbox.html?a=view"& &span class="photo"& &img src="~/Content/assets/admin/layout3/img/avatar3.jpg" class="img-circle" alt=""& &/span& &span class="subject"& &span class="from"& Richard Doe &/span& &span class="time"&46 mins &/span& &/span& &span class="message"& Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... &/span& &/a& &/li& &/ul& &/li& &/ul& &/li& &!-- END INBOX DROPDOWN --& &!-- BEGIN TODO DROPDOWN --& &!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte --& &li class="dropdown dropdown-extended dropdown-tasks" id="header_task_bar"& &a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"& &i class="icon-calendar"&&/i& &span class="badge badge-default"& 3 &/span& &/a& &ul class="dropdown-menu extended tasks"& &li class="external"& &h3&You have &span class="bold"&12 pending&/span& tasks&/h3& &a href="page_todo.html"&view all&/a& &/li& &li& &ul class="dropdown-menu-list scroller" style="height: 275" data-handle-color="#637283"& &li& &a href="javascript:;"& &span class="task"& &span class="desc"&New release v1.2 &/span& &span class="percent"&30%&/span& &/span& &span class="progress"& &span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"&&span class="sr-only"&40% Complete&/span&&/span& &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="task"& &span class="desc"&Application deployment&/span& &span class="percent"&65%&/span& &/span& &span class="progress"& &span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"&&span class="sr-only"&65% Complete&/span&&/span& &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="task"& &span class="desc"&Mobile app release&/span& &span class="percent"&98%&/span& &/span& &span class="progress"& &span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"&&span class="sr-only"&98% Complete&/span&&/span& &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="task"& &span class="desc"&Database migration&/span& &span class="percent"&10%&/span& &/span& &span class="progress"& &span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"&&span class="sr-only"&10% Complete&/span&&/span& &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="task"& &span class="desc"&Web server upgrade&/span& &span class="percent"&58%&/span& &/span& &span class="progress"& &span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100"&&span class="sr-only"&58% Complete&/span&&/span& &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="task"& &span class="desc"&Mobile development&/span& &span class="percent"&85%&/span& &/span& &span class="progress"& &span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"&&span class="sr-only"&85% Complete&/span&&/span& &/span& &/a& &/li& &li& &a href="javascript:;"& &span class="task"& &span class="desc"&New UI release&/span& &span class="percent"&38%&/span& &/span& &span class="progress progress-striped"& &span style="width: 38%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100"&&span class="sr-only"&38% Complete&/span&&/span& &/span& &/a&
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
阅读(1006)
每一次烦恼的出现，都是一个给我们寻找自己缺点的机会。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net