Jquery EeasyUI等框架中图标的处理方法

标签：

在使用Query EasyUI、Ext等框架开发项目的时候，经常会用到很多小的图标，常见几个图片应用方式总结如下：

一、在jQuery Easyui中添加小图标

1、添加图标的两小步：

    先到themes目录下的icon.css中，添加新图标对应的CSS类选择器，参照已有的图标类，只要指定图标对应的路径即可，如下所示：

    .icon-forward{  

    background:url(‘icons/forward.png‘) no-repeat;  

    }  

    然后将图标文件放置到icons目录下即可。

2、应用新图标不生效的问题

    已经按上述的步骤处理了，但是用到窗口上时，一直都没效果。后来查看网页的源码得知，引入的jquery-easyui-1.2.6/themes/icon.css文件中没有加载新的样式类，当前使用的是firefox浏览器，估计可能是缓存的原因，所以清了一下缓存后重新刷了一下就有效果了。

二、CSS从大图片上截取小图标的操作

注：图片名称（tabicons.png）每个小图标width:18px;height:18px从左上角坐标为（-0px;-0px;）;

例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素

截取小图标样式

.icon
{
    background: url(imges/tabicons.png) no-repeat;
    width: 18px;
    line-height: 18px;
    display: inline-block;
}
.icon-set
{
 background-position: -380px -200px;
}

.icon-add
{
 background-position: -20px 0px;
}

 样式调用示例

<form id="form1" runat="server">
    <div class="icon icon-sys">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
    </form>

Jquery EeasyUI等框架中图标的处理方法

标签：

原文地址：http://www.cnblogs.com/gisera/p/4453664.html