码迷,mamicode.com
首页 > 其他好文 > 详细

dwz图标样式扩展

时间:2014-07-24 12:11:35      阅读:890      评论:0      收藏:0      [点我收藏+]

标签:style   blog   java   color   使用   os   文件   io   

说明:使用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,其他的前台页面要使用图标都可以这样使用。

dwz图标样式扩展,布布扣,bubuko.com

dwz图标样式扩展

标签:style   blog   java   color   使用   os   文件   io   

原文地址:http://www.cnblogs.com/muyutingfeng/p/3865171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!