JQuery EasyUI 结合ztrIee的后台页面开发
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的, zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐
- easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件。
- easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
- 使用 easyui,不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面。
- HTML 网页的完整框架。
- easyui 节省了开发产品的时间和规模。
- easyui 非常简单,但是功能非常强大。
- 需要的导入以下几种js文件和样式表
- easyui/themes/default/easyui.css
- easyui/themes/icon.css
- jquery-1.8.3.js
- easyui/jquery.easyui.min.js
- ztree/jquery.ztree.all-3.5.js(该文件包括core,exhide,exedit,excheck)
- ztree/zTreeStyle.css
<script type="text/javascript"> //ztree菜单设置varzTreeObj,setting={view: {selectedMulti:false},//添加编辑设置:修改树节点名称/删除树节点 edit: {enable:true},data: { simpleData: { enable:true}},callback:{onClick: zTreeOnClick}};//回调函数:单击事件function zTreeOnClick(event, treeId, treeNode, clickFlag) { alert(treeNode.id+ "," +treeNode.name);var content = '<div style="width:100%;height:100% ;overflow:hidden;">'+'<iframe src="'+treeNode.url+'" scrolling="auto" style="width:100%;height:100%;border:0;"></iframe></div>';if(treeNode.url != undefined && treeNode.url != ""){//当centre中是否存在名称为treeNode.name的tabsif($("#tt").tabs('exists',treeNode.name)){$("#tt").tabs('select',treeNode.name);}else{$("#tt").tabs('add',{title:treeNode.name,content:content,closable:true})}};event.preventDefault();};//提供ztree树形菜单数据zTreeNodes = [ {"id":1, "pId":0, "name":"海贼王"}, {"id":11, "pId":1, "name":"娜美", "url":"http://man.linuxde.net/"}, {"id":12, "pId":1, "name":"罗宾", "url":"http://www.baidu.com"},{"id":13, "pId":1, "name":"汉库克", "url":"http://www.google.cn/"},{"id":2, "pId":0, "name":"父节点 2", "open":true},{"id":21,"pId":2, "name":"叶子节点 2-1"},{"id":22, "pId":2, "name":"叶子节点 2-2"},{"id":23,"pId":2, "name":"叶子节点 2-3"},{"id":3, "pId":0, "name":"父节点 3", "open":true},{"id":31, "pId":3, "name":"叶子节点 3-1"},{"id":32, "pId":3, "name":"叶子节点 3-2"},{"id":33, "pId":3, "name":"叶子节点 3-3"}];//3.生成树形菜单 $(document).ready(function(){zTreeObj= $.fn.zTree.init($("#tree"), setting, zTreeNodes);});//4.对象选项卡注册右击事件 $(document).ready(function(){$("#tt").tabs({onContextMenu:function(e,title,index){//阻止系统默认的右击事件 e.preventDefault();$('#mm').menu('show', {left: e.pageX,top: e.pageY}); }});});//获取所选取的面板对象 $(document).ready(function(){$("#tt").tabs({//获取所选取的面板对象 onSelect : function(title,index ){//5. menu的单击事件绑定$("#mm").menu({ onClick:function(item){ alert(item.name);//当点击关闭当前选项卡时if(item.name==='current'){$('#tt').tabs('close',title);//当点击关闭其他选项卡时}else if(item.name === 'others'){var tabs = $('#tt').tabs('tabs');$(tabs).each(function(){if($(this).panel('options').title != '消息中心' && $(this).panel('options').title !=title){$('#tt').tabs('close',$(this).panel('options').title);}});//当点击关闭所有选项卡时}else if(item.name === 'all'){var tabs = $('#tt').tabs('tabs');$(tabs).each(function(){if($(this).panel('options').title != '消息中心'){$('#tt').tabs('close',$(this).panel('options').title);}});}} });}})})</script>
相应的htm 部分代码
1 <bodyclass="easyui-layout"> 2 <divdata-options="region:'north',title:'北丐:洪七公',split:true"style="height:100px;"></div> 3 <divdata-options="region:'south',title:'南帝:一灯大师',split:true"style="height:100px;"></div> 4 <divdata-options="region:'east',iconCls:'icon-reload',title:'东邪:黄药师',split:true"style="width:100px;"></div> 5 <divdata-options="region:'west',title:'西毒:欧阳锋',split:true"style="width:250px;"> 6 <divid="aa"data-options="fit:'true'"class="easyui-accordion"> 7 <divtitle="赵敏"data-options="iconCls:'icon-save'" > 8 <h3style="color:#0099FF;">Accordion for jQuery</h3> 9 <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> 10 </div> 11 <divtitle="大玉儿"data-options="iconCls:'icon-reload',selected:true" > 12 // ztree属性结构13 <ulid="tree"class="ztree"style="width:230px; overflow:auto;"></ul> 14 </div> 15 <divtitle="婉容儿" > 16 who?17 </div> 18 </div> 19 </div> 20 <divdata-options="region:'center',title:'中神通:周伯通'"> 21 // tabs 面板22 <divid="tt"class="easyui-tabs"data-options="fit:true"> 23 <divtitle="小龙女"data-options="closable:true" ></div> 24 <divtitle="沐剑屏"data-options="closable:true" ></div> 25 <divtitle="阿珂"data-options="iconCls:'icon-reload',closable:true"></div> 26 </div> 27 </div> 28 29 // menu菜单栏30 <divid="mm"class="easyui-menu"style="width:120px;"> 31 <divname="current">关闭当前选项卡</div> 32 <divname="others">关闭其他选项卡</div> 33 <divclass="menu-sep"></div> 34 <divdata-options="iconCls:'icon-cancle'"name="all">关闭所有选项卡</div> 35 </div> 36 </body>
以上
转载于:https://www.cnblogs.com/maria-ld/p/7461186.html
JQuery EasyUI 结合ztrIee的后台页面开发相关推荐
- discuz 后台页面开发
后台页面开发 创建项目 在 ./source/admincp/menu/ 目录下创建 menu_mynav.php 文件 在"管理中心-全局"中加一个项目,需要在 menu_myn ...
- Discuz后台页面开发
创建项目 在 ./source/admincp/menu/ 目录下创建 menu_mynav.php 文件 在"管理中心-全局"中加一个项目,需要在 menu_mynav.php ...
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享 在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> & ...
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
- easyui java1234_李炎恢jQuery EasyUI视频教程 下载
李炎恢jQuery EasyUI视频教程 下载 01.[jQuery EasyUI]第1章 jQuery EasyUI入门 02.[jQuery EasyUI]第2章 使用EasyUI 03.[jQ ...
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
转自:https://blog.csdn.net/eson_15/article/details/51312490 前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基 ...
- DoNet开源项目-基于jQuery EasyUI的后台管理系统
本文转载于 石佳劼的博客,有问题请到原文咨询,原文连接. 博主在业余时间开发了一个简单的后台管理系统,其中用到了 jQuery EasyUI 框架,上次分享过系统布局,参考文章:jQuery Easy ...
- JQuery EasyUI后台UI框架使用连载
在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI.它的学习条件.市场上的同类产品.所支持的浏览器等.然后配置运行 jQuery EasyUI. 一.什么是 ...
- ztree和php结合实例,实例详解jQuery EasyUI结合zTree树形结构制作web页面
JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的,z ...
最新文章
- java 中常用的类
- 基于Spark的大规模推荐系统特征工程
- 大班体育游戏电子计算机教案,幼儿园大班体育游戏教案《夹球走走走》
- em算法python代码_EM 算法求解高斯混合模型python实现
- is_callable — 检测参数是否为合法的可调用结构
- Self-training在目标检测任务上的实践
- wxWidgets:wxRichMessageDialog类用法
- java 日期是否合法_java 中 Date 类型快判断日期是否合法.
- linux时间路径,关于linux中的时间 时区问题
- VMware创建Ubuntu操作系统到网络配置详细流程
- IOS背景半透明渐变问题
- 【HDU - 5977】Garden of Eden(树分治)
- 关于毫米波技术的描述
- python tkinter控件_python tkinter 控件与布局 项目实战
- 【IRA/GSM/UCS2】the difference of IRA/GSM/UCS2 character set
- Modscan和Modsim 两种Modbus调试工具使用说明
- sql2000 数据库置疑解决办法
- 中国大学生计算机设计大赛 历史作品博物馆
- 使用prometheus+grafana监控k8s集群
- mysql根据15位或者18位身份证号计算年龄的自定义函数
热门文章
- matlab光斑质心,一种基于质心法的光斑图像中心的快速定位方法
- 读写算杂志读写算杂志社读写算编辑部2022年第16期目录
- html有序列表标签圆点,什么是无序列表、有序列表、定义列表?html列表标签学习笔记...
- 二手房交易有哪些税费?
- 谷歌浏览器怎么调试php,如何简单快速调试高大上的谷歌浏览器
- 如何关闭谷歌浏览器阅读清单(新方法)
- 服务器2008修改虚拟内存,Windows 2008 关闭系统虚拟内存功能 如何删除pagefile.sys
- springboot上传图片
- 计算机病毒大多数具有自身复制的功能,《计算机基础》第五章练习题
- python 网络拓扑图_python 网络拓扑图