js列举css中所有图标的实现代码


Posted in Javascript onJuly 04, 2011

美工做的css样式里icon越来越多,手工来写icon名几乎不可能实现。所以就有了这个功能点:将css样式里的所有icon类列举出来以图形化的形式显示供配置人员选择!

搜索一圈,发现介绍从css里遍历东西的文章非常少。于是花了半天的时间自己来实现了!先看下一个选择图标的demo:

js列举css中所有图标的实现代码 
这里用的是easyui:一个comboxtree。
这里省略引用css和js库的代码(jquery和easyui库)。
html:

<input id="cc" class="easyui-combotree" style="width:200px;">

Javascript:
function getstyle() { 
for (var i = 0; i < document.styleSheets.length; i++) { 
var rules; 
if (document.styleSheets[i].cssRules) { 
rules = document.styleSheets[i].cssRules; 
} 
else { 
rules = document.styleSheets[i].rules; 
} 
for (var j = 0; j < rules.length; j++) { 
if (rules[j].selectorText.substr(0, 5) == ".icon") 
$('#cc').combotree('tree').tree('append', { 
data: [{ 
id: rules[j].selectorText.substr(1), 
text: rules[j].selectorText.substr(1), 
iconCls: rules[j].selectorText.substr(1) 
}] 
}); 
} 
} 
} 
$(function () { 
getstyle(); 
});

有几个可能存在的问题:
1.大的项目样式可能巨多巨大,这种遍历显然不可能,需要指定到styleSheets。
2.如果各种大小的图标可能用easyui-combotree不太合理。
最后通过配置icon生成的菜单效果: js列举css中所有图标的实现代码

js列举css中所有图标的实现代码

Javascript 相关文章推荐
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 #Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 #Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 #Javascript
js静态方法与实例方法分析
Jul 04 #Javascript
JavaScript 变量作用域分析
Jul 04 #Javascript
JavaScript XML和string相互转化实现代码
Jul 04 #Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
php生成xml简单实例代码
2009/12/16 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
python Django框架实现自定义表单提交
2016/03/25 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Python实现SMTP邮件发送
2020/06/16 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
database面试题
2013/03/28 面试题
公务员培训心得体会
2013/12/28 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
2015年除四害工作总结
2015/07/23 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis