bootstrap 后台管理页面

上传人：知*** IP属地：北京上传时间：2023-06-28 格式：DOC 页数：11 大小：58KB 积分：12 举报 版权申诉

已阅读5页，还剩6页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

bootstrap后台管理页面插件说明：使用bootstrapgrid和jqueryuibootstrap。数据显示使用bootstrapgrid，tabs生成和删除，使用jqueryuibootstrap。index.html<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><linkhref="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:10px8px;;font-weight:600;color:#4A515B;background:#E9E9E9;background:-moz-linear-gradient(top,#FAFAFA0%,#E9E9E9100%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#FAFAFA),color-stop(100%,#E9E9E9));background:-webkit-linear-gradient(top,#FAFAFA0%,#E9E9E9100%);background:-o-linear-gradient(top,#FAFAFA0%,#E9E9E9100%);background:-ms-linear-gradient(top,#FAFAFA0%,#E9E9E9100%);background:linear-gradient(top,#FAFAFA0%,#E9E9E9100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA',endColorstr='#E9E9E9');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA',endColorstr='#E9E9E9')";border:1pxsolid#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,#4A515B0%,#3C4049100%);background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#4A515B),color-stop(100%,#3C4049));background:-webkit-linear-gradient(top,#4A515B0%,#3C4049100%);background:-o-linear-gradient(top,#4A515B0%,#3C4049100%);background:-ms-linear-gradient(top,#4A515B0%,#3C4049100%);background:linear-gradient(top,#4A515B0%,#3C4049100%);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;}/*定义二级菜单样式*/.secondmenua{;color:#4A515B;text-align:left;}.navbar-static-top{margin-bottom:5px;}.navbar-brand{background:url('')no-repeat10px8px;display:inline-block;vertical-align:middle;padding-left:50px;color:#fff;}</style><body><headerid="header"class="navbarnavbar-defaultnavbar-static-top"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"data-i18n="title"href="#"id="logo">配置管理系统</a><aclass="navbar-brand"class="btnbtn-default"onclick="divhide()"><spanclass="glyphiconglyphicon-align-justify"></span></a><spanclass="navbar-brand"data-i18n="title">jQueryBootgrid</span></div><navid="menu"class="navbar-collapsecollapse"role="navigation"><ulclass="navnavbar-navnavbar-right"><li><ahref="#">退出</a></li></ul></nav></div></header><divclass="container-fluid"><divclass="row"><divclass="col-md-2"id="hiddendiv"><ulid="main-nav"class="navnav-tabsnav-stacked"style=""><liclass="active"><ahref="#"><iclass="glyphiconglyphicon-th-large"></i>首页</a></li><li><ahref="#systemSetting"data-toggle="collapse"class="nav-headercollapsed"data-parent="hiddendiv"><iclass="glyphiconglyphicon-cog"></i>系统管理<spanclass="pull-rightglyphiconglyphicon-chevron-down"></span></a><ulid="systemSetting"class="navnav-listcollapsesecondmenu"style="height:0px;"><li><ahref="#"onclick="createTabs('usercode','用户管理','./bootgrid.html')"><iclass="glyphiconglyphicon-user"></i>用户管理</a></li><li><ahref="#"onclick="createTabs('menucode','菜单管理','./bootgrid.html')"><iclass="glyphiconglyphicon-th-list"></i>菜单管理</a></li><li><ahref="#"onclick="createTabs('rolecode','角色管理','./bootgrid.html')"><iclass="glyphiconglyphicon-asterisk"></i>角色管理</a></li><li><ahref="#"><iclass="glyphiconglyphicon-edit"></i>修改密码</a></li><li><ahref="#"><iclass="glyphiconglyphicon-eye-open"></i>日志查看</a></li></ul></li><li><ahref="#"data-toggle="collapse"data-parent="hiddendiv"><iclass="glyphiconglyphicon-credit-card"></i>物料管理</a></li><li><ahref="#"data-toggle="collapse"data-parent="hiddendiv"><iclass="glyphiconglyphicon-globe"></i>分发配置<spanclass="labellabel-warningpull-right">5</span></a></li><li><ahref="#"data-toggle="collapse"data-parent="hiddendiv"><iclass="glyphiconglyphicon-calendar"></i>图表统计</a></li><li><ahref="#"data-toggle="collapse"data-parent="hiddendiv"><iclass="glyphiconglyphicon-fire"></i>关于系统</a></li></ul></div><divclass="col-md-9"id="tabs2"><ulclass="nav"role="tablist"id="maintab"></ul></div></div></div></body><scriptsrc="jquery-bootgrid-master/lib/jquery-1.11.1.min.js"></script><scriptsrc="jquery-bootgrid-master/demo/js/bootstrap.js"></script><linktype="text/css"href="./jquery-ui-1.9.2.custom.css"rel="stylesheet"/><scripttype="text/javascript"src="./jquery-ui-1.9.2.custom.min.js"></script><scripttype="text/javascript">functiondivhide(){$("#hiddendiv").fadeToggle(250);}</script><script>//createTabs('rolecode','角色管理','./bootgrid.html')"functioncreateTabs(functionCode,functionName,url){addTab(functionName,functionCode,url);}vartabTitle="newTab",tabTemplate="<liclass='active'><ahref='#{href}'>#{label}</a><spanclass='ui-iconui-icon-close'>RemoveTab</span></li>",tabCounter=0;vartabs=$("#tabs2").tabs();functionaddTab(functionName,functionCode,url){varlabel=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("<divid='"+id+"'><iframesrc=\""+url+"\"width=\"100%\"height=\"550px;\"frameborder=0scrolling=\"no\"></iframe></div>");tabs.tabs("refresh");tabs.tabs('select','#'+id);//根据id选中tabtabCounter++;}$("#tabs2").on("click",'span.ui-icon-close',function(){varpanelId=$(this).closest("li").remove().attr("aria-controls");$("#"+panelId).remove();tabs.tabs("refresh");});</script></html>---bootgrid.html<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>jQueryBootgridDemo</title><linkhref="jquery-bootgrid-master/demo/css/bootstrap.css"rel="stylesheet"/><linkhref="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:0px0px;border-radius:4px;}</style></head><body><divclass="container-fluid"><divclass="row"><divclass="col-md-12"><buttonid="getSelectedRows"type="button"class="btnbtn-success"data-toggle="modal"data-target="#myModal">添加</button><buttonid="getSelectedRows"type="button"class="btnbtn-wran">修改</button><tableid="grid"data-ajax="true"data-selection="true"data-multi-select="true"data-url="UserSerlvt"data-toggle="bootgrid"class="tabletable-condensedtable-hovertable-striped"><thead><tr><thdata-column-id="id"data-formatter="id"data-identifier="true"data-visible="true"data-width="15px"data-align="left">ID</th><th-id="sender"data-order="asc"data-align="left"data-header-align="left"data-width="75%">发送者</th><thdata-column-id="received"data-css-class="cell"data-header-css-class="column"data-filterable="true">人</th><thdata-column-id="link"data-formatter="links"data-sortable="false"data-width="75px">地址</th><thdata-column-id="status"data-type="numeric"data-visible="true">状态</th></tr></thead><tbody></tbody></table></div></div></div><divclass="modalfade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button><h4class="modal-title"id="myModalLabel">模态框（Modal）标题</h4></div><divclass="modal-body"><formclass="form-horizontal"role="form"><divclass="form-group"><labelfor="firstname"class="col-sm-2control-label">名字</label><divclass="col-sm-10"><inputtype="text"class="form-control"id="firstname"placeholder="请输入名字"></div></div><divclass="form-group"><labelfor="lastname"class="col-sm-2control-label">姓</label><divclass="col-sm-10"><inputtype="text"class="form-control"id="lastname"placeholder="请输入姓"></div></div><divclass="form-group"><divclass="col-sm-offset-2col-sm-10"><divclass="checkbox"><label><inputtype="checkbox">请记住我</label></div></div></div><divclass="form-group"><divclass="col-sm-offset-2col-sm-10"><buttontype="submit"class="btnbtn-default">登录</button></div></div></form></div><divclass="modal-footer"><buttontype="button"class="btnbtn-default"data-dismiss="modal">关闭</button><buttontype="button"class="btnbtn-primary">提交更改</button></div></div></div><scriptsrc="jquery-bootgrid-master/lib/jquery-1.11.1.min.js"></script><scriptsrc="jquery-bootgrid-master/demo/js/bootstrap.js"></script><scriptsrc="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="t

人人文库> 全部分类> 行业资料 > 各类标准

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

bootstrap 后台管理页面

文档简介

温馨提示

最新文档

评论

bootstrap 后台管理页面

文档简介

温馨提示

最新文档

评论

相关文档