zoukankan      html  css  js  c++  java
  • 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)每个小图标18px;height:18px从左上角坐标为(-0px;-0px;);

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

    截取小图标样式

    .icon
    {
        background: url(imges/tabicons.png) no-repeat;
         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>

  • 相关阅读:
    maven超级pom内容
    elasticsearch日志删除命令
    maven 设置跳过测试
    centos7.4 开启ftp服务
    部分Linux时区改为东八区的方法
    docker overlay存储驱动介绍(传送门)
    HotSpot学习(一)——如何下载openjdk源码
    nginx 代理静态资源报 403
    【转载】C#通过遍历DataTable的列获取所有列名
    【转载】C#通过Remove方法移除DataTable中的某一列数据
  • 原文地址:https://www.cnblogs.com/gisera/p/4453664.html
Copyright © 2011-2022 走看看