管理系统UI

开源框架引用：

1.jquery/jquery-ui

2.bootstrap

3.效果图

4.index.html代码

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5     <meta charset="UTF-8">
  6     <title>demo</title>
  7     <link href="script/bootstrap-3.2.0/css/bootstrap.css" rel="stylesheet" media="screen"/>
  8     <link href="script/jquery-ui-1.11.1/jquery-ui.css" rel="stylesheet" media="screen"/>
  9
 10     <style type="text/css" rel="stylesheet">
 11         .non-padding{
 12             padding: 0px;
 13         }
 14         .dh-menu{
 15             overflow:auto;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20 <div class="container-fluid">
 21     <div class="row">
 22         <div class="col-md-12 bg-primary dh-head">
 23             <div class="col-md-10"></div>
 24             <div class="col-md-2 bg-primary">
 25                 <button type="button" class="btn btn-primary">LoginOut</button>
 26             </div>
 27         </div>
 28         <div class="col-md-2 bg-primary dh-menu">
 29             <div class="panel-group" id="accordion">
 30                 <div class="panel panel-default">
 31                     <div class="panel-heading">
 32                         <h4 class="panel-title">
 33                             <a role="menuitem" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
 34                                 首页
 35                             </a>
 36                         </h4>
 37                     </div>
 38                     <div id="collapseOne" class="panel-collapse collapse in ">
 39                         <div class="panel-body non-padding">
 40                             <div class="list-group">
 41                                 <a href="#" onclick="javascript:addTab()" class="list-group-item">helloWorld</a>
 42                                 <a href="#" class="list-group-item">吴瑕</a>
 43                                 <a href="#" class="list-group-item">小哥</a>
 44                                 <a href="#" class="list-group-item">三叔</a>
 45                                 <a href="#" class="list-group-item">王胖子</a>
 46                             </div>
 47                         </div>
 48                     </div>
 49                 </div>
 50                 <div class="panel panel-default">
 51                     <div class="panel-heading">
 52                         <h4 class="panel-title">
 53                             <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
 54                                 导航
 55                             </a>
 56                         </h4>
 57                     </div>
 58                     <div id="collapseTwo" class="panel-collapse collapse">
 59                         <div class="panel-body non-padding">
 60                             <div class="list-group">
 61                                 <a href="#" class="list-group-item">helloWorld</a>
 62                                 <a href="#" class="list-group-item">吴瑕</a>
 63                                 <a href="#" class="list-group-item">小哥</a>
 64                                 <a href="#" class="list-group-item">三叔</a>
 65                                 <a href="#" class="list-group-item">王胖子</a>
 66                             </div>
 67                         </div>
 68                     </div>
 69                 </div>
 70                 <div class="panel panel-default">
 71                     <div class="panel-heading">
 72                         <h4 class="panel-title">
 73                             <a class="a-block" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
 74                                 管理
 75                             </a>
 76                         </h4>
 77                     </div>
 78                     <div id="collapseThree" class="panel-collapse collapse">
 79                         <div class="panel-body non-padding">
 80                             <div class="list-group">
 81                                 <a href="#" class="list-group-item">helloWorld</a>
 82                                 <a href="#" class="list-group-item">吴瑕</a>
 83                                 <a href="#" class="list-group-item">小哥</a>
 84                                 <a href="#" class="list-group-item">三叔</a>
 85                                 <a href="#" class="list-group-item">王胖子</a>
 86                                 <a href="#" class="list-group-item">helloWorld</a>
 87                                 <a href="#" class="list-group-item">吴瑕</a>
 88                                 <a href="#" class="list-group-item">小哥</a>
 89                                 <a href="#" class="list-group-item">三叔</a>
 90                                 <a href="#" class="list-group-item">王胖子</a>
 91                                 <a href="#" class="list-group-item">helloWorld</a>
 92                                 <a href="#" class="list-group-item">三叔</a>
 93                                 <a href="#" class="list-group-item">王胖子</a>
 94                                 <a href="#" class="list-group-item">helloWorld</a>
 95                             </div>
 96                         </div>
 97                     </div>
 98                 </div>
 99             </div>
100         </div>
101         <div class="col-md-10">
102             <!-- Nav tabs -->
103             <ul class="nav nav-tabs dh-tabs" role="tablist">
104                 <li class="active">
105                     <a href="#home" role="tab" data-toggle="tab">Home</a>
106                     <span class=‘ui-icon ui-icon-close‘ onclick=‘tabClose(this)‘ role=‘presentation‘>Remove Tab</span>
107                 </li>
108                 <li>
109                     <a href="#profile" role="tab" data-toggle="tab">Profile</a>
110                     <button type="button" class="close" onclick="tabClose(this)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
111                 </li>
112                 <li>
113                     <a href="#messages" role="tab" data-toggle="tab">Messages</a>
114                     <button type="button" class="close" onclick="tabClose(this)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
115                 </li>
116                 <li>
117                     <a href="#settings" role="tab" data-toggle="tab">sideup</a>
118                     <button type="button" class="close" onclick="tabClose(this)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
119                 </li>
120             </ul>
121
122             <!-- Tab panes -->
123             <div class="tab-content">
124                 <div class="tab-pane fade in active" id="home">
125                     <table class="table">
126                         <tr>
127                             <td>1</td>
128                             <td>2</td>
129                             <td>3</td>
130                         </tr>
131                         <tr>
132                             <td>1</td>
133                             <td>2</td>
134                             <td>3</td>
135                         </tr>
136                     </table>
137                 </div>
138                 <div class="tab-pane fade" id="profile">
139                     <table class="table table-hover">
140                         <tr>
141                             <td>1</td>
142                             <td>2</td>
143                             <td>3</td>
144                         </tr>
145                         <tr>
146                             <td>1</td>
147                             <td>2</td>
148                             <td>3</td>
149                         </tr>
150                     </table>
151                 </div>
152                 <div class="tab-pane fade" id="messages">
153                     <iframe name="iframe" width="100%" height="100%"  frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes" src="grid.html" ></iframe>
154                 </div>
155                 <div class="tab-pane fade" id="settings">
156                     <iframe name="iframe" width="100%" height="100%"  frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes" src="sideup.html" ></iframe>
157                 </div>
158             </div>
159         </div>
160
161     </div>
162 </div>
163 <script src="http://code.jquery.com/jquery.js"></script>
164 <script src="script/bootstrap-3.2.0/js/bootstrap.js" ></script>
165 <script src="script/jquery-ui-1.11.1/jquery-ui.js" ></script>
166
167 <script type="text/javascript">
168     function addTab(){
169         var tabHead = $(".nav-tabs");
170         var tabContent = $(".tab-content");
171         var headHtml="<li><a href=‘\#aaaaaaa‘ role=‘tab‘ data-toggle=‘tab‘>sideup</a><span class=‘ui-icon ui-icon-close‘ onclick=‘tabClose(this)‘ role=‘presentation‘>Remove Tab</span></li>";
172         var contentHtml="<div class=‘tab-pane fade‘ id=‘aaaaaaa‘><iframe name=‘iframe‘ width=‘100%‘ height=‘100%‘ frameborder=‘no‘ border=‘0‘ marginwidth=‘0‘ marginheight=‘0‘ allowtransparency=‘yes‘ src=‘sideup.html‘ ><\iframe><\div>";
173         tabHead.append(headHtml);
174         tabContent.append(contentHtml);
175         addCloseIcon();
176         $(‘.dh-tabs a:last‘).tab(‘show‘) // Select last tab
177     }
178     jQuery(document).ready(function(){
179         $(".dh-menu").height($(window).height()-$(".dh-head").height());
180         addCloseIcon();
181     });
182     function addCloseIcon(){
183        $(".dh-tabs").find(".ui-icon-close").css({‘position‘:‘absolute‘,‘top‘:‘2px‘,‘right‘:‘2px‘,‘cursor‘:‘pointer‘});
184        $(".dh-tabs").find(".close").css({‘position‘:‘absolute‘,‘top‘:‘2px‘,‘right‘:‘4px‘,‘cursor‘:‘pointer‘});
185
186     }
187     function tabClose(value){
188         value.parentElement.remove();
189         $(‘.dh-tabs a:last‘).tab(‘show‘) // Select last tab
190     }
191 </script>
192 </body>
193 </html>

时间： 2024-12-15 08:19:59

管理系统UI的相关文章

Android官方开发文档Training系列课程中文版：管理系统UI之隐藏状态条

原文地址:http://android.xsoftlab.net/training/system-ui/status.html 这节课将会介绍如何隐藏不同的版本的状态条.隐藏状态条可以使内容展示区域更大,因此可以提供一种更强的身临其境的用户体验. 含有状态条的APP: 隐藏状态条的APP,注意这里的ActionBar同样也隐藏了.绝不要在没有状态条的时候还显示ActionBar: 在Android 4.0以下的版本中隐藏状态条开发者可以通过设置WindowManager的标志来隐藏Androi

Android官方开发文档Training系列课程中文版：管理系统UI之变暗系统条

原文地址:http://android.xsoftlab.net/training/system-ui/index.html 引言系统条(System Bars)是屏幕上的一块显示区域,专门用来显示通知,设备的通讯状态以及设备的导向.典型的System Bars与APP同时显示在屏幕上.APP展示了具体的内容,比如电影或者照片,这时可以临时性的将System Bars的图标变暗,以便减少不必要的干扰,或者临时性的隐藏System Bars,以便进入一种身临其境的状态. 如果你对Android

黑色的网站后台管理系统ui界面——后台

链接:http://pan.baidu.com/s/1pLffwE3 密码:m4v6

flex开发的企业管理系统ui

预览地址: http://rj.8634.com/xiaoshandong/CompanyInfosystem/flex.html 源代码下载地址: http://files.cnblogs.com/files/ffmpeg/flexQiye.zip

Android官方开发文档Training系列课程中文版：目录

原文地址 : http://android.xsoftlab.net/training/index.html 引言在翻译了一篇安卓的官方文档之后,我觉得应该做一件事情,就是把安卓的整篇训练课程全部翻译成英文,供国内的开发者使用,尤其是入门开发者,虽然现在网络上有很多入门课程,但是还是依靠官方文档学习来的靠谱,安卓官方文档是一系列的课程,使每个人可以系统的掌握安卓的知识,相比其它课程来说,它为开发者提供了查缺补漏的功能. 在这里你可以领略到安卓开发世界的精彩. Tips : 同时,本目录可以作为

Android 系统服务

Android系统服务大致分为三大类:本地守护进程.Native系统服务和Java系统服务.如下图所示: 本地守护进程 init进程根据init.rc文件中的定义,启动本地守护进程.这些进程会常驻在系统中,有的只会启动一次,有的如果退出了,还会被init启动.具体的启动方式就在init.rc中定义. 下面大体列举几个守护进程及其功能. 守护进程功能 vold 管理存储设备,自动安装存储设备,将设备分区格式化 netd 管理蓝牙.wifi.usb等各种网络连接 installd 负责安装及卸载软

vue2.0 + element ui 后台管理系统

vue2.0 和 elementui 搭建的一个后台管理系统概述: 这是一个用vuejs2.0和element搭建的后台管理界面. 技术栈: vue2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element ui:基于vue2.0的ui组件库. vue-router:一般单页面应用spa都要用到的前端路由. vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. webpack + es6/7 + less mock.js : 相

后台管理系统效果图UI界面html源码后台源代码

后台管理系统效果图UI界面html源码后台源代码亲注意,我们销售的网站模板或者网站代码.系统源代码,是网站开发者(程序员)才可能用到的模板或者代码. 网站模拟适用于做好网站前台又不太想在后台界面花太多时间构想.对传统管理界面审美疲劳的中小企业或个人建站者,因需自行套上ASP/ASP.NET/PHP等程序后使用,所以我们不建议没有专业知识基础的亲购买,不懂专业知识和不懂此为何物的请慎怕! 程序源代码,适用于开发者对于个别功能没有开发经验或者无从下手,可以参照或者直接使用的. ----------

ASP.NET MVC后台管理系统精美UI设计

现在越来越多的系统都是BS架构,什么样的界面风格才更加大气.美观.实用呢? 先给大家看一下我自己做的后台系统风格,然后再讲几个主要的界面地址:http://121.40.148.178:8080/ . 用户名:guest,密码:123456 一.整体部局现在的管理系统比较流行把界面做得跟CS应用程序很像,让人一眼看去都以为是CS程序,的确那样看起来很大气,很漂亮. 以往的做法,通常是在工作区只能显示一个功能页面,打开一个新的功能以后页面就跳转了,当用户需要同时打开两个功能的时候就很蛋疼,所以