`
q137681467
  • 浏览: 23261 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

dwz图标拓展,减少审美疲劳

阅读更多

dwz拓展官方例子图标(博客开始运营,求关注)

 

说明:使用dwz快速开发的时候,发现官网给出的图标才几个,根本不够用,现在我们一起来进行图标拓展,非常的简单。也建议dwz官方把这段代码加进去,这样才能满足我们的需求。

 个人博客:http://q137681467.iteye.com

 

一、找到项目文件dwz.ui.js,在js的最后添加图标扩展代码:

/**
 * 自动加载toolbar的图片,iconClass=contexPath#imageName
 */
function readyToolbarCSS() {
	var $a = $("a[iconClass]");
	$a.each(function(){
		var imageName = $(this).attr("iconClass");
		var $span = $("span", this);
		if ($span.length == 0) {
			// 用作<td>中的<a>
			$(this).css({
				"background":"url(../style/img/toolbar_icons/" + imageName + ".png) no-repeat",
				"background-position":"50% 50%",
				"width":"22px",
				"height":"20px",
				"text-indent":"-1000px",
				"overflow":"hidden",
				"display":"block",
				"float":"left"
			});	
		} else {
			// 用作panelBar toolBar中的<span>
			$span.css({
				"background-image":"url(../style/img/toolbar_icons/" + imageName + ".png)",
				"background-position": "0 3px"
			});						
		}
	});
}

 

二、在上面“// 这里放其他第三方jQuery插件...”下添加下面代码

// 自动加载toolbar的图片
	readyToolbarCSS();

 

 个人博客:http://q137681467.iteye.com

 

三、要使用图标就可以在a标签中使用如下代码,就能实现图标拓展:

iconClass="database_go"

 其中“database_go”为图标名称

 

四、这样就能完成图标的拓展或者是插入图标,除开dwz,其他的前台页面要使用图标都可以这样使用。

 

五、部分图标在附件中,满足大部分的需求。

 

 

 个人博客:http://q137681467.iteye.com

博客声明:

—— —————————— 欢迎大家一起交流,多评论、多留言、多关注——————————————

——————————————如有侵权请及时说明,转载请说明作者和出处 ————————————

0
0
分享到:
评论

相关推荐

    dwz修改菜单图标

    当我们谈论“dwz修改菜单图标”时,我们实际上是在讨论如何自定义DWZ框架中的导航菜单的图标,以符合项目需求或者提升用户体验。 首先,我们需要了解DWZ框架的结构。DWZ通常包含CSS样式文件、JavaScript脚本、图片...

    dwz-demo-1.1.6RC1.zip_DEMO_dwz php_dwz-demo_dwz-ria_php dwz

    【标题】"dwz-demo-1.1.6RC1.zip_DEMO_dwz php_dwz-demo_dwz-ria_php dwz" 指的是一个基于PHP的开源前端框架dwz的演示版本,版本号为1.1.6RC1。这个压缩包包含了一个名为“dwz-demo”的项目,是用于展示和学习dwz...

    dwz - 简单实用国产jQuery UI框架 - DWZ富客户端框架(jUI)

    在实际开发中,使用DWZ可以显著提高开发效率,减少重复工作,同时保证应用的稳定性和性能。对于不熟悉前端技术的开发团队,DWZ也是一个很好的选择,因为它降低了前端开发的门槛,使得更多精力可以集中在业务逻辑上。...

    dwz框架 asp.net mvc3

    在表单提交前,DWZ可以进行初步的验证,减少无效请求;而后端的模型验证则可以确保数据的完整性和准确性。 文件“MvcForDwz”可能包含了使用DWZ框架和ASP.NET MVC3开发的示例项目,包括控制器代码、视图模板、...

    dwz框架官网实例

    **DWZ框架详解** DWZ,全称是“Design for Web Zen”,是一个基于Ajax技术的开源JavaScript框架,专为Web应用程序设计,旨在提高用户体验和开发效率。DWZ框架结合了前端UI设计和后端交互,提供了丰富的组件和便捷的...

    DWZ中文开发手册

    1. **熟悉HTML和CSS**:尽管DWZ减少了对JavaScript的需求,但HTML和CSS仍然是网页布局和样式的基础。 2. **掌握jQuery基础知识**:虽然DWZ尽可能地封装了复杂的JavaScript逻辑,了解jQuery的核心概念仍有助于深入...

    thinkphp3_dwz

    标题“thinkphp3_dwz”指的是一个基于ThinkPHP 3.0框架与DWZ UI集成的项目,主要用于实现角色管理功能。在Web开发中,ThinkPHP是一个流行的PHP框架,而DWZ(Dynamic Web Zone)是一个前端jQuery UI框架,提供了一...

    DWZ文件+文档

    DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级 DWZ框架支持用html扩展的方式来代替...

    DWZ使用帮助文档

    ### DWZ富客户端框架知识点详解 #### 概述 **DWZ富客户端框架**是一款由中国人自主开发的、基于jQuery的Ajax RIA(Rich Internet Application)开源框架。该框架的设计初衷在于提供一种简单实用、易于扩展且能快速...

    dwz开源web界面框架

    学习DWZ的建议 •通读DWZ文档,很多新手提的问题文档中都写了 •看demo每个组件演示效果和代码(留意组件html结构) •建议安装firebug,用firebug看html结构、CSS和调试JS都非常方便。见附录一 firebug介绍 •对于...

    DWZ资源合集

    【DWZ资源合集】是针对DWZ框架的一份综合性的资源集合,包含了用户指南以及相关的项目源码。DWZ,全称为“Dynamic Web Zone”,是一个基于jQuery的前端UI库,专为中国的Web开发者设计,旨在提供一套高效、简洁、易用...

    DWZ帮助文档 PDF版

    DWZ富客户端框架是一种基于JavaScript的前端开发框架,它提供了一套丰富的UI组件和扩展功能,旨在简化Web应用程序的开发流程。DWZ框架具备良好的兼容性、模块化和扩展性,能够帮助开发者快速构建具有丰富交互功能的...

    DWZ开源框架免费

    3. **Ajax无刷新交互**:DWZ强调页面的无刷新更新,通过Ajax技术实现实时的数据交换,提高用户体验,减少页面加载时间。 4. **后台管理模板**:提供了完整的后台管理界面模板,包含登录、权限管理、菜单配置、数据...

    DWZ富客户端框架dwz-ria-1.4.6

    DWZ富客户端框架dwz-ria-1.4.6是一款专为开发高效、美观的Web应用程序而设计的后台框架。这款框架集成了多种技术,旨在简化开发过程,让开发者无需深入理解AJAX和jQuery等复杂技术,也能快速构建出与专业级应用相...

    C# DWZ 项目案例

    【C# DWZ 项目案例】是一个基于C#编程语言和DWZ框架的Web应用程序示例。这个项目可能是一个实际的健康网站服务测试版本,包含了轻量级的测试组件,如`HealthSite.Web.Service.TestLite`。下面我们将深入探讨C#语言、...

    dwz demo按列

    【DWZ 框架与Java Web开发】 DWZ(Design for Web Zen)是一个基于Ajax技术的开源JavaScript框架,主要用于构建富互联网应用(RIA)。它提供了丰富的UI组件、高效的Ajax交互以及优雅的页面布局,旨在简化Web开发...

    jqgird dwz 框架扩展

    **jqGrid和DWZ框架扩展详解** 在Web开发领域,jqGrid和DWZ框架是两个常用的工具,它们分别用于数据展示和页面构建。本篇文章将深入探讨如何在DWZ框架中扩展jqGrid,以及如何利用它们实现JSON数据的初始化加载。 **...

    dwz使用文档

    DWZ通过Ajax技术实现页面局部刷新,减少页面跳转,提升用户体验。例如,表格的分页、筛选、排序功能,以及表单的异步提交,都是通过Ajax实现的。 4. **页面布局** DWZ提供了流式布局、固定布局、混合布局等多种...

Global site tag (gtag.js) - Google Analytics