js列舉css中所有圖標(biāo)的實(shí)現(xiàn)代碼
更新時(shí)間：2011年07月04日 23:31:24 作者：
最近在做一個(gè)通用的配置模塊。配置模塊中必然要對(duì)系統(tǒng)的菜單、功能模塊、權(quán)限資源等進(jìn)行配置，為了更好的用戶體驗(yàn)，圖標(biāo)是必不可少的！
美工做的css樣式里icon越來越多，手工來寫icon名幾乎不可能實(shí)現(xiàn)。所以就有了這個(gè)功能點(diǎn)：將css樣式里的所有icon類列舉出來以圖形化的形式顯示供配置人員選擇！
搜索一圈，發(fā)現(xiàn)介紹從css里遍歷東西的文章非常少。于是花了半天的時(shí)間自己來實(shí)現(xiàn)了！先看下一個(gè)選擇圖標(biāo)的demo：
<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();
});
有幾個(gè)可能存在的問題：
1.大的項(xiàng)目樣式可能巨多巨大，這種遍歷顯然不可能，需要指定到styleSheets。
2.如果各種大小的圖標(biāo)可能用easyui-combotree不太合理。
最后通過配置icon生成的菜單效果：
搜索一圈，發(fā)現(xiàn)介紹從css里遍歷東西的文章非常少。于是花了半天的時(shí)間自己來實(shí)現(xiàn)了！先看下一個(gè)選擇圖標(biāo)的demo：
這里用的是easyui：一個(gè)comboxtree。
這里省略引用css和js庫的代碼（jquery和easyui庫）。
html：
復(fù)制代碼 代碼如下:
<input id="cc" class="easyui-combotree" style="width:200px;">
Javascript：
復(fù)制代碼 代碼如下:
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();
});
有幾個(gè)可能存在的問題：
1.大的項(xiàng)目樣式可能巨多巨大，這種遍歷顯然不可能，需要指定到styleSheets。
2.如果各種大小的圖標(biāo)可能用easyui-combotree不太合理。
最后通過配置icon生成的菜單效果：
相關(guān)文章
這篇文章主要介紹了js如何設(shè)置緩存及獲取設(shè)置的緩存,需要的朋友可以參考下2014-05-05
使用Vue3實(shí)現(xiàn)一個(gè)Upload組件的示例代碼
這篇文章主要介紹了使用Vue3實(shí)現(xiàn)一個(gè)Upload組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
JS隨機(jī)生成不重復(fù)數(shù)據(jù)的實(shí)例方法
這篇文章介紹了JS隨機(jī)生成不重復(fù)數(shù)據(jù)的實(shí)例方法，有需要的朋友可以參考一下2013-07-07
JS如何在不同平臺(tái)實(shí)現(xiàn)多語言方式
這篇文章主要介紹了JS如何在不同平臺(tái)實(shí)現(xiàn)多語言方式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了JS sort排序詳細(xì)使用方法示例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
這篇文章主要介紹了IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法,大家參考使用吧2013-11-11
本篇文章主要介紹了原生js實(shí)現(xiàn)輪播圖的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要給大家介紹了關(guān)于window.open打開新頁面失效的解決方案,移動(dòng)端和PC端全部通過window.open()來跳轉(zhuǎn)頁面窗口,文中給出了詳細(xì)的解決方案,需要的朋友可以參考下2023-07-07
javascript截取字符串(通過substring實(shí)現(xiàn)并支持中英文混合)
用js方法substring()、方法substr()實(shí)現(xiàn)如標(biāo)題所示的截取字符串并支持中英文混合，具體代碼如下，感興趣的各位可以參考下哈2013-06-06
js截取固定長(zhǎng)度的中英文字符的簡(jiǎn)單實(shí)例
下面是自己寫的一個(gè)簡(jiǎn)單的函數(shù)，用于截取固定長(zhǎng)度的字符串，中英文都適用.若有不妥之處還請(qǐng)高手指正2013-11-11