首页 > 代码库 > dwz图标样式扩展

dwz图标样式扩展

2024-07-13 18:33:24   220人阅读

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

一、找到项目文件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();

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

iconClass="database_go"

其中“database_go”为图标名称

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


联系
我们