首页 > 代码库 > 企业管理系统开发笔记（2）---后台主界面
企业管理系统开发笔记（2）---后台主界面
一、今天我们主要用到了以下技术：
Jquery Easy UI
jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。
jQuery EasyUI有以下特点：
1、基于jquery用户界面插件的集合
2、为一些当前用于交互的js应用提供必要的功能
3、EasyUI支持两种渲染方式分别为javascript方式（如：$(‘#p‘).panel({...})）和html标记方式（如：class="easyui-panel"）
4、支持HTML5（通过data-options属性）
5、开发产品时可节省时间和资源
6、简单，但很强大
7、支持扩展，可根据自己的需求扩展控件
8、目前各项不足正以版本递增的方式不断完善
jquery easyui和jquery ui的区别
jquery ui 是jquery开发团队 开发，适用于网站式的页面。
jquery easyui 是第三方基于jquery开发，适用于应用程序式的页面。
两者的方法调用也略有不同：
jquery ui 是：
$("#divTabs").tabs("remove" , index);
jquery easyui 是：
$("#divTabs").tabs("close" , title);
类似的区别还有一些，只有具体使用后才会注意，基本思路差不多。
二、主界面搭建
效果图
1、页面布局解析：
我们将页面划分为4个部分，分别是：上、左、右、底。一般情况都是使用iframe进行划分，这里使用easyUI的panel面板。下面是我们将panel官方代码进行改造成我们需要的格式
<body class="easyui-layout"> <!---------------------------顶部布局开始--------------------------------> <div data-options="region:‘north‘,border:false" style="height: 65px; padding: 10px; overflow: hidden; background-image: url(‘/Content/Images/bg3.png‘)"> <img src=http://www.mamicode.com/"~/Content/Images/logo.gif" /> </div> <!---------------------------顶部布局结束--------------------------------> <!---------------------------左边布局开始--------------------------------> <div data-options="region:‘west‘,split:true,title:‘West‘" style="width: 150px; padding: 2px;"> <div class="easyui-accordion" data-options="multiple:true" style="width: auto; height: auto;"> <div title="新闻管理" data-options="iconCls:‘icon-ok‘" style="overflow: auto; padding: 10px;"> <a href=http://www.mamicode.com/"#" class="Aonclick" url="/AdminNewsList/index">国内新闻管理</a> </div> <div title="评论管理" style="padding: 10px;"> <a href=http://www.mamicode.com/"#">评论管理</a> </div> </div> </div> <!---------------------------左边布局结束--------------------------------> <!---------------------------中间布局开始--------------------------------> <div data-options="region:‘center‘,title:‘Center‘" style=""> <div class="easyui-tabs" style="width: 700px; height: 250px" fit="true" id="tt"> <div title="登录" style="padding: 10px" data-options="closable:true"> <span>欢迎登录本系统！</span> </div> </div> </div> <!---------------------------中间布局结束--------------------------------> <!---------------------------底部边布局开始--------------------------------> <div data-options="region:‘south‘,border:false" style="height: 40px; background: #A9FACD; text-align: center; padding: 10px;"> <label style="font-size: 10px;">版权 © YPF</label> </div> <!---------------------------底部边布局结束--------------------------------></body>
在左部，我们在里面使用到了”分类面板（accordion）“；
在中部，使用了”选项卡（tabs）“。这里我们需要注意的是：当我们在调用了该选项卡插件后，也给它设置了width和height后但是他就是没有全部展开在中部的空间中。为了解决该问题，我们需要设置tabs的fit="true"。这样就可以实现铺满该部分。
接下来要说下引用easyUi方法：
头部必须引用easyUI相关样式和类库以及jquery库。由于easyUi是基于jquery的。
@*easyUI的图标css样式*@ <link href=http://www.mamicode.com/"~/Content/themes/icon.css" rel="stylesheet" /> @*easyUi核心样式*@ <link href=http://www.mamicode.com/"~/Content/themes/default/easyui.css" rel="stylesheet" /> @*jquery核心库_压缩版*@ <script src=http://www.mamicode.com/"~/Scripts/jquery-1.8.2.min.js"></script> @*easyUi核心库_压缩版*@ <script src=http://www.mamicode.com/"~/Scripts/jquery.easyui.min.js"></script> @*easyUI中文提示库*@ <script src=http://www.mamicode.com/"~/Scripts/easyui-lang-zh_CN.js"></script>
注意：必须将jquery库在easyUI核心库之前引用，否则会报错！！！
企业管理系统开发笔记（2）---后台主界面
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。