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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python编写分类决策树的代码
2017/12/21 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
python中的列表与元组的使用
2019/08/08 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
职业生涯规划书的格式
2013/12/29 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
2019各种承诺书范文
2019/06/24 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL