一个基于 EasyUI 的前台架构(4)主体页面框架收工
2011-12-22 14:38
495 查看
在上一篇博客已经完成一个大概的框架效果,还有一个最为重要的功能还没有完善——菜单。
我现在使用的这个项目使用的是 jQuery EasyUI 中的 Tree 来 Building 的一个树形菜单,其实需求非常简单:将功能节点折叠,使用鼠标单击随意展开相应的节点,单击叶节点执行相应的操作(打开相应的页面)。但是 EasyUI 中的 Tree 似乎有点功能强大:修改节点名称,拖移菜单等等。在使用的时候整体遇到几个小问题:展开或闭合父节点的时候,需要单击节点前面的项目符号(小三角)才能完成;而且项目中使用的 1.2 版本还必须运行在 IE 兼容模式下(经测试,新版本的 EasyUI 不存在这个问题)。因此,我自己抽空写了一个基于 jQuery 的简单树形菜单 SimpleTree(请参见/article/5184582.html)。
SimpleTree 本着简单实用的特点,实现了一个具有最基本功能的 Tree :它可以以树形展示菜单,并在单击菜单节点的时候执行用户设置的回调方法,并将该节点下的 <a> 标签对象做为参数传送给该回调方法。修改其附带的 CSS 文件,还可以对其样式进行自定义。
这里打开 untitled.html 页面,引用 SimpleTree 以及其相关的样式文件,编写代码完成主体页面整体框架的实现。代码如下:
OK,执行一下,瞅瞅效果:
展开菜单节点,单击“百度搜索”和“cnblogs”节点,打开两个新的标签,如图:
我现在使用的这个项目使用的是 jQuery EasyUI 中的 Tree 来 Building 的一个树形菜单,其实需求非常简单:将功能节点折叠,使用鼠标单击随意展开相应的节点,单击叶节点执行相应的操作(打开相应的页面)。但是 EasyUI 中的 Tree 似乎有点功能强大:修改节点名称,拖移菜单等等。在使用的时候整体遇到几个小问题:展开或闭合父节点的时候,需要单击节点前面的项目符号(小三角)才能完成;而且项目中使用的 1.2 版本还必须运行在 IE 兼容模式下(经测试,新版本的 EasyUI 不存在这个问题)。因此,我自己抽空写了一个基于 jQuery 的简单树形菜单 SimpleTree(请参见/article/5184582.html)。
SimpleTree 本着简单实用的特点,实现了一个具有最基本功能的 Tree :它可以以树形展示菜单,并在单击菜单节点的时候执行用户设置的回调方法,并将该节点下的 <a> 标签对象做为参数传送给该回调方法。修改其附带的 CSS 文件,还可以对其样式进行自定义。
这里打开 untitled.html 页面,引用 SimpleTree 以及其相关的样式文件,编写代码完成主体页面整体框架的实现。代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="js/themes/icon.css"/> <link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/tabs.js"></script> <script type="text/javascript" src="js/SimpleTree.js"></script> <script type="text/javascript"> $(function(){ $(".st_tree").SimpleTree({ click:function(a){ if(!$(a).attr("hasChild")) { var title=$(a).text(); var url=$(a).attr("rel"); var icon=$(a).attr("icon"); OpenTab(title,url,icon); } } }); }); </script> <style></style> </head> <body class="easyui-layout" > <div region="north" style="height:80px;"> <!-- 页面头部 --> <h1>***管理系统</h1> </div> <div region="west" split="true" style="width:220px;" title="导航菜单"> <div class="st_tree"> <ul> <li>搜索引擎</li> <ul> <li><a href="#" rel="http://www.baidu.com">百度搜索</a></li> <li><a href="#" rel="http://www.google.com">Google搜索</a></li> </ul> <li>博客</li> <ul> <li><a href="#" rel="http://www.cnblogs.com">cnblogs</a></li> <li><a href="#" rel="http://blog.csdn.net">CSDN</a></li> </ul> </ul> </div> </div> <div region="center"> <div id="tabs" class="easyui-tabs" fit="true" border="false"> <!--欢迎标签 START--> <div title="欢迎使用"> <h1 style="font-size: 24px;">asdfasd</h1> <h1 style="font-size: 24px;"></h1> </div> <!--欢迎标签 END--> </div> </div> </body> </html>
OK,执行一下,瞅瞅效果:
展开菜单节点,单击“百度搜索”和“cnblogs”节点,打开两个新的标签,如图:
相关文章推荐
- 一个基于 EasyUI 的前台架构(4)主体页面框架收工
- 一个基于 EasyUI 的前台架构(4)主体页面框架收工
- 一个基于 EasyUI 的前台架构(1)页面布局
- 一个基于 EasyUI 的前台架构(2)主体内容区结构设计
- 一个基于 EasyUI 的前台架构(1)页面布局
- 一个基于 EasyUI 的前台架构(2)主体内容区结构设计
- 一个基于 EasyUI 的前台架构(1)页面布局
- 一个基于 EasyUI 的前台架构(2)主体内容区结构设计
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
- 一个基于 EasyUI 的前台架构(5)右键快捷菜单
- 基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
- 基于MVC+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码
- JEECG - 基于代码生成器的J2EE智能开发框架 续六: JEECG 前台页面和后台交互讲解
- 基于MVC架构写一个UI框架