jQuery EasyUI结合zTree树形结构制作web页面
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <script type= "text/javascript" > // ztree菜单设置 var zTreeObj, 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的tabs if ($( "#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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | < body class = "easyui-layout" > < div data-options = "region:'north',title:'北丐:洪七公',split:true" style = "height:100px;" ></ div > < div data-options = "region:'south',title:'南帝:一灯大师',split:true" style = "height:100px;" ></ div > < div data-options = "region:'east',iconCls:'icon-reload',title:'东邪:黄药师',split:true" style = "width:100px;" ></ div > < div data-options = "region:'west',title:'西毒:欧阳锋',split:true" style = "width:250px;" > < div id = "aa" data-options = "fit:'true'" class = "easyui-accordion" > < div title = "赵敏" data-options = "iconCls:'icon-save'" > < h3 style = "color:#0099FF;" >Accordion for jQuery</ h3 > < p >Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</ p > </ div > < div title = "大玉儿" data-options = "iconCls:'icon-reload',selected:true" > // ztree属性结构 < ul id = "tree" class = "ztree" style = "width:230px; overflow:auto;" ></ ul > </ div > < div title = "婉容儿" > who? </ div > </ div > </ div > < div data-options = "region:'center',title:'中神通:周伯通'" > // tabs 面板 < div id = "tt" class = "easyui-tabs" data-options = "fit:true" > < div title = "小龙女" data-options = "closable:true" ></ div > < div title = "沐剑屏" data-options = "closable:true" ></ div > < div title = "阿珂" data-options = "iconCls:'icon-reload',closable:true" ></ div > </ div > </ div > // menu菜单栏 < div id = "mm" class = "easyui-menu" style = "width:120px;" > < div name = "current" >关闭当前选项卡</ div > < div name = "others" >关闭其他选项卡</ div > < div class = "menu-sep" ></ div > < div data-options = "iconCls:'icon-cancle'" name = "all" >关闭所有选项卡</ div > </ div > </ body > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
jquery.Ajax()方法调用Asp.Net后台的方法解析
本篇文章主要是对jquery.Ajax()方法调用Asp.Net后台的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助2014-02-02
最新评论