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

博客声明：

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

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