在使用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. JVM中对象的创建过程

    JVM中对象的创建过程如以下流程图中所示: 对其主要步骤进行详细阐述: 为新生对象分配内存: 内存的分配方式: 指针碰撞:假设Java堆中内存是绝对规整的,所有用过的内存放在一边,空闲的内存在另一边, ...

  2. jqgrid no url reset

    如果发现 jqgrid 在运行中出现次错误,可能是以下原因 $('#@(ViewBag.tabcid + "_grid")').jqGrid('navGrid', '#@(View ...

  3. Django入门1

    Django中的应用是以APP形式存在的,这是Django的主要特色. 入门--Hello,Django     在mysite中新建文件views.py,并在里面定义方法hello: 这里#-*- ...

  4. 解决echsop兼容jquery(transport.js的冲突)的问题

    方案一: 本人亲测过,可以用.有的人说需要删除js目录下的gobal.js文件,否则依然会冲突.我没删除也解决了冲突. 1.加入JSON2.js文件 原因很简单,transport修改Object是为 ...

  5. Unity -- EventSystem完全掌握

    Event System 组成 系统生成的Event System里面主要有两个Components,分别是Event System和Standalone Input Module. 其中Standa ...

  6. ADO.Net读取器获取数据库数据

    string str = Configuration.ConfigurationManager.AppSettings[str].ToString(); string sql = "sele ...

  7. ansible 简单使用

    前面讲完安装,现在说说怎么用 1.创建目录 mkdir -p /etc/ansible 2. 编辑(或创建)/etc/ansible/hosts 并在其中加入一个或多个远程系统:echo '192.1 ...

  8. 给Source Insight做个外挂系列之三--构建外挂软件的定制代码框架

    上一篇文章介绍了“TabSiPlus”是如何进行代码注入的,本篇将介绍如何构建一个外挂软件最重要的部分,也就是为其扩展功能的定制代码.本文前面提到过,由于windows进程管理的限制,扩展代码必须以动 ...

  9. Gradle 刷新依赖

    $ ./gradlew build --refresh-dependencies

  10. 转摘 MySQL扫盲篇

    一下文章摘自:http://www.jellythink.com/archives/636 MySQL扫盲篇 2014-09-15 分类:MySQL / 数据库 阅读(1412) 评论(1)  为什么 ...