此篇文章是基于ztree实现,若是dwz与ztree未整合,请先按照《DWZ和zTree整合(实现版)》文章整合。
需求描述:
点击左侧树形菜单(target=navTab)时,在左侧Tab动态添加图标;树形菜单可以根据需要事先设置好,或者通过数据库读取。
先上效果图:
实现思路:
后台生成Json对象时,添加一个json属性,此属性就是前段图标class样式,命名可以随意取,此demo为tabIconCss属性;在加载树[zTree树]时,赋予tabIconCss属性;然后修改调用dwz.navTab.js中的openTab方法,添加class=#tabIconCss#属性。还要修改dwz.ui.js文件中的$("a[target=navTab]", $p).each(……);代码段;目的就是传递树节点Dom的tabIconCss属性。还需要在jquery.ztree.core-3.5.js添加tabIConCss属性,此步骤可以参考《dwz与ztree整合》篇实现。
dwz.ui.js代码如下:
var tabIconCss = $this.attr("tabIconCss") || "tabIconCss"; /**2nd dev add tabIconCss attribute end**/ var external = eval($this.attr("external") || "false"); var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first")); DWZ.debug(url); if (!url.isFinishedTm()) { alertMsg.error($this.attr("warn") || DWZ.msg("alertSelectMsg")); return false; } //navTab.openTab(tabid, url,{title:title, fresh:fresh, external:external}); navTab.openTab(tabid, url,{title:title, fresh:fresh, external:external,tabIconCss:tabIconCss});
dwz.navTab.js代码段:
/****2nd dev add tabIconCss start*************/ var tabFrag = '<li tabid="#tabid#"><a href="javascript:" title="#title#" class="#tabid#"><span><span class="#tabIconCss#">#title#</span></span></a><a href="javascript:;" class="close">close</a></li>'; this._tabBox.append(tabFrag.replaceAll("#tabid#", tabid).replaceAll("#title#", op.title).replaceAll("#tabIconCss#",op.tabIconCss)); /****2nd dev add tabIconCss end*************/
Json代码段:
[{ id : 0, pId : -1, name : "搜索", url : "demo/w_alert.html", target : "navTab", rel : "sl", tabIconCss:"home2_icon", //open:true, children:[{ id : 1, pId : 0, name : "百度", url : "demo/w_panel.html", target : "navTab", rel : "bd", tabIconCss:"home2_icon", //open:true, children:[{ id : 1, pId : 0, name : "文库", url : "demo/w_tabs.html", target : "navTab", rel : "wk", tabIconCss:"home2_icon" }, { id : 2, pId : 0, name : "地图", url : "demo/w_dialog.html", target : "navTab", rel : "dt" } ] }, { id : 2, pId : 0, name : "Google", url : "http://www.google.com.cn", target : "navTab", rel : "gg" } ]},{ id : -2, pId : -1, name : "门户", url : "http://www.sina.com.cn", target : "navTab", rel : "xl" },{ id : -3, pId : -1, name : "异步加载Tree", url : "asyncTreeDemo.jsp", target : "navTab", rel : "ybjz" }];
css代码段:
.tabsPage .tabsPageHeader li .home2_icon, .tabsPage .tabsPageHeader li.main .home2_icon { background:url(../default/images/home3.png) no-repeat; width:auto; padding:0 0 0 15px; background-position:0 3px;}
相关推荐
通过以上步骤,我们可以成功地在DWZ框架中替换或添加自定义的菜单图标,从而提升网站或应用的视觉效果和用户体验。需要注意的是,修改框架默认设置时,应考虑到后续升级和维护,避免因个性化定制而带来的额外工作量...
通过JavaScript根据获取到的后台数据动态生成DOM元素,并添加相应的点击事件处理,实现菜单的点击跳转或展开收缩。 7. **安全性考虑**:在实现动态菜单时,需要防止SQL注入和跨站脚本攻击(XSS)。同时,对于敏感的...
"源码"标签表明“dwz图标拓展”可能包含了可自定义和扩展的源代码,这意味着开发者不仅可以直接使用提供的图标,还可以根据需要进行修改或添加新的图标。这种灵活性对于那些希望根据品牌规范或特定需求定制图标集的...
本文将详细探讨如何通过自定义标签实现DWZ表格的分页功能,以提高开发效率和代码可维护性。 首先,我们需要理解DWZ分页的基本原理。DWZ内置的分页组件基于jQuery,提供了一套完整的分页模板和API接口。默认情况下,...
菜单导航系统是DWZ框架中的另一大亮点,它允许开发者轻松创建多级菜单,菜单项可以根据权限动态生成,适应复杂的权限控制需求。 在压缩包“dwz-demo”中,通常包含了DWZ框架的示例代码和文档,通过学习和研究这些...
- **Tab组件扩展**: 为页面添加可交互的标签页。 - **Accordion组件**: 实现折叠面板效果。 - **容器高度自适应**: 使元素根据内容自动调整高度。 - **CSSTable**: 提供了一种简单的方法来创建和管理表格样式。 - **...
3. 组件扩展:DWZ提供了Tab组件、Accordion组件、Table组件等多种UI组件的扩展,帮助开发者实现复杂的界面布局和交互。 4. CSS样式支持:DWZ框架具有内置的CSS样式集,开发者可以根据项目需求进行自定义。 5. 输入...
DWZ RIA 1.4.4 (20121016 修正了横向导航js报错问题) 修复使用xheditor插件IE下兼容问题:IE下打开一个含有编辑器的页面,然后关闭,再打开不能录入问题 修复多文件上传插件uploadify 的html扩展方式,java读取不...
dwz框架支持RIA,意味着它可以创建具有高度互动性和动态性的网页应用,提升用户体验。 4. **dwz-demo**:这个部分是实际的项目文件,包含了使用dwz框架开发的各种示例页面和代码,帮助开发者了解如何在实际项目中...
- **Ajax链接扩展:**允许在页面中创建动态链接,点击后触发Ajax请求,而非传统的页面跳转。 - **navTab中链接ajaxpost扩展:**专门用于更新导航标签中的内容,通过Ajax方式刷新指定区域的数据。 - **dialog...
在DWZ UI框架中,开发者可以找到一系列的组件和工具,用于快速搭建页面布局、表单、按钮、提示框、对话框、菜单、导航等元素。这些组件遵循一致的设计风格,使得整个应用界面具有统一的视觉体验。此外,DWZ UI还提供...
通过DWZ的事件机制,可以在jqGrid的某些操作(如点击行、点击按钮)时触发相应的行为,实现复杂的功能。 总结,jqGrid与DWZ框架的整合能为Web应用带来高效的数据管理和用户友好的界面。通过理解两者的基本用法和...
例如,添加新数据时,我们可以使用DWZ的AjaxForm组件,通过异步提交表单,然后在回调函数中处理返回的结果,如显示成功提示或错误信息。删除操作类似,通常会有一个确认对话框,点击确认后发送Ajax请求,服务器返回...
### DWZ富客户端框架:深度解析与应用指南 #### 概述 DWZ富客户端框架,作为一款由国人自主研发的RIA(Rich Internet Application)框架,其核心构建在jQuery基础上,旨在提供一种简单实用、易于扩展且能快速进行...
例如,使用DWZ的表格组件,可以通过Ajax调用MVC3的Controller中的Action获取数据,然后动态填充到表格中,提供快速的数据浏览和操作。 此外,DWZ的表单验证功能可以与ASP.NET MVC3的模型验证机制协同工作,保证...
DWZ提供了一系列的前端组件,如表格、表单、对话框、提示信息、菜单、按钮等,这些组件不仅美观,而且具有良好的可定制性和可扩展性,能够满足各种界面设计需求。 3. **Ajax交互** DWZ内置了Ajax处理机制,使得...
标题“thinkphp3_dwz”指的是一个基于ThinkPHP 3.0框架与DWZ UI集成的项目,主要用于实现角色管理功能。在Web开发中,ThinkPHP是一个流行的PHP框架,而DWZ(Dynamic Web Zone)是一个前端jQuery UI框架,提供了一...
同时,DWZ会根据用户的登录状态和权限信息动态生成菜单,确保用户只能访问其有权操作的功能。 用户超时机制是保证系统安全的重要一环。在ThinkPHP中,我们可以设置session过期时间和检查机制。当用户长时间未操作,...