在使用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等框架中图标的处理方法的更多相关文章

  1. jquery iframe父子框架中的元素访问方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window. ...

  2. SSH框架中配置log4j的方法

    SSH框架中使用log4j的方便之处 1. 动态的改变记录级别和策略,即修改log4j.properties,不需要重启Web应用,这需要在web.xml中设置一下.2. 把log文件定在 /WEB- ...

  3. 知乎上有一个问题“在mfc框架中,有上面方法能直接将opencv2.0库中的Mat格式图片传递到Picture Control”中显示?

    一直以来,我使用的方法都是shiqiyu在opencvchina上面提供的引入directshow,并且采用cvvimage和cameraDs的方法.这个方法虽然在xp/win7/win8下面都能够成 ...

  4. Yii框架中安装srbac扩展方法

    首先,下载srbac_1.3beta.zip文件和对应的blog-srbac_1.2_r228.zip 问什么要下载第二个文件,后面就知道了. 按照手册进行配置: 解压缩srbac_1.3beta.z ...

  5. Xposed框架中XSharePreference的使用

    本文博客地址:https://blog.csdn.net/QQ1084283172/article/details/81194406 在Xposed框架的模块编写中,通常希望我们自己写的Android ...

  6. SSM项目 以及 springboot 中引入swagger2的方法

    swagger2是一个非常好用的接口文档,在开发的过程中方便前后端接口的交接. 下面我们就来讲讲在使用java时,分别在SSM框架,以及springboot+mybatis框架中引入swagger2的 ...

  7. ztree树形图自定义图标在jeecg框架中不显示

    有时候工作遇到问题,就会硬着头皮去解决,今天给大家说一个ztree树形图自定义图标在jeecg框架中不显示的解决方法 对于这个问题,官方观法说法是在节点元素中加入icon的字段,然后后跟图标的url, ...

  8. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  9. 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

随机推荐

  1. 常见bug及解决方案

    1.外边距叠加 一.发生在一个div内 <!DOCTYPE> <html> <head> <meta http-equiv=Content-Type cont ...

  2. Learn ZYNQ(10) – zybo cluster word count

    1.配置环境说明 spark:5台zybo板,192.168.1.1master,其它4台为slave hadoop:192.168.1.1(外接SanDisk ) 2.单节点hadoop测试: 如果 ...

  3. Android课程---添加黑名单的练习2(课堂讲解)

    实现黑名单的添加.修改.查询和删除,首先得有封装的3个类,便于使用 BlackNumber.java package com.hanqi.test3; /** * Created by Adminis ...

  4. 2016年终分析(传统开发与网络时代的Java开发)

    2016重大事件:(在此将2016年的开发称为传统开发) 1.乌镇互联网大会大会(大数据&云计算) 2.某东struts2安全漏洞 3.作为一个程序呀对于淘宝双11和双12的分析应该是最好的案 ...

  5. 使用 PHP 内置函数 get_browser() 判断是否是移动浏览器

    get_browser — 获取浏览器具有的功能.该函数通过查找 browscap.ini 文件中的浏览器信息,尝试检测用户的浏览器所具有的功能. 由于许可证的问题,PHP 未提供浏览器功能文件,可以 ...

  6. centos6修改nameserver

    1.直接修改/etc/resolv.conf,重启网卡 #service network restart 后发现并没有修改掉 2.直接修改ifcfg-eth0文件 /etc/sysconfig/net ...

  7. js常用关键字和函数

    document.createElement("div"): 创建一个div元素申明一个变量 document.body.appendChild(div);   将创建好的div添 ...

  8. javaScript的简单学习

    JavaScript介绍 JavaScript跟java没半毛钱关系 JavaScript有三部分组成:ECMAScript,document object model,broswer object ...

  9. Net中httpResponse和httpRequest的简单实用;

    这对象很简单,封装很多常用的方法和属性:使用起来也很方便: 这个关键是要对我们的 http中的各种协议要很了解滴呀: 模拟一个简单的暴力破解: public static class HttpInfo ...

  10. 监控redis python脚本

    #!/bin/env python #-*- coding:utf- -*- import json import time import socket import os import re imp ...