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">
</div>
</form>
Jquery EeasyUI等框架中图标的处理方法的更多相关文章
- jquery iframe父子框架中的元素访问方法
在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window. ...
- SSH框架中配置log4j的方法
SSH框架中使用log4j的方便之处 1. 动态的改变记录级别和策略,即修改log4j.properties,不需要重启Web应用,这需要在web.xml中设置一下.2. 把log文件定在 /WEB- ...
- 知乎上有一个问题“在mfc框架中,有上面方法能直接将opencv2.0库中的Mat格式图片传递到Picture Control”中显示?
一直以来,我使用的方法都是shiqiyu在opencvchina上面提供的引入directshow,并且采用cvvimage和cameraDs的方法.这个方法虽然在xp/win7/win8下面都能够成 ...
- Yii框架中安装srbac扩展方法
首先,下载srbac_1.3beta.zip文件和对应的blog-srbac_1.2_r228.zip 问什么要下载第二个文件,后面就知道了. 按照手册进行配置: 解压缩srbac_1.3beta.z ...
- Xposed框架中XSharePreference的使用
本文博客地址:https://blog.csdn.net/QQ1084283172/article/details/81194406 在Xposed框架的模块编写中,通常希望我们自己写的Android ...
- SSM项目 以及 springboot 中引入swagger2的方法
swagger2是一个非常好用的接口文档,在开发的过程中方便前后端接口的交接. 下面我们就来讲讲在使用java时,分别在SSM框架,以及springboot+mybatis框架中引入swagger2的 ...
- ztree树形图自定义图标在jeecg框架中不显示
有时候工作遇到问题,就会硬着头皮去解决,今天给大家说一个ztree树形图自定义图标在jeecg框架中不显示的解决方法 对于这个问题,官方观法说法是在节点元素中加入icon的字段,然后后跟图标的url, ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享
http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享 在上四篇文章 ...
随机推荐
- 常见bug及解决方案
1.外边距叠加 一.发生在一个div内 <!DOCTYPE> <html> <head> <meta http-equiv=Content-Type cont ...
- 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测试: 如果 ...
- Android课程---添加黑名单的练习2(课堂讲解)
实现黑名单的添加.修改.查询和删除,首先得有封装的3个类,便于使用 BlackNumber.java package com.hanqi.test3; /** * Created by Adminis ...
- 2016年终分析(传统开发与网络时代的Java开发)
2016重大事件:(在此将2016年的开发称为传统开发) 1.乌镇互联网大会大会(大数据&云计算) 2.某东struts2安全漏洞 3.作为一个程序呀对于淘宝双11和双12的分析应该是最好的案 ...
- 使用 PHP 内置函数 get_browser() 判断是否是移动浏览器
get_browser — 获取浏览器具有的功能.该函数通过查找 browscap.ini 文件中的浏览器信息,尝试检测用户的浏览器所具有的功能. 由于许可证的问题,PHP 未提供浏览器功能文件,可以 ...
- centos6修改nameserver
1.直接修改/etc/resolv.conf,重启网卡 #service network restart 后发现并没有修改掉 2.直接修改ifcfg-eth0文件 /etc/sysconfig/net ...
- js常用关键字和函数
document.createElement("div"): 创建一个div元素申明一个变量 document.body.appendChild(div); 将创建好的div添 ...
- javaScript的简单学习
JavaScript介绍 JavaScript跟java没半毛钱关系 JavaScript有三部分组成:ECMAScript,document object model,broswer object ...
- Net中httpResponse和httpRequest的简单实用;
这对象很简单,封装很多常用的方法和属性:使用起来也很方便: 这个关键是要对我们的 http中的各种协议要很了解滴呀: 模拟一个简单的暴力破解: public static class HttpInfo ...
- 监控redis python脚本
#!/bin/env python #-*- coding:utf- -*- import json import time import socket import os import re imp ...