A general configuration module has been developed recently. In the configuration module, you must configure system menus, function modules, and permission resources. icons are essential for a better user experience! There are more and more icons in the css style made by the artist. It is almost impossible to manually write the icon name. So we have this function: list all icon classes in the css style and display them in a graphical form for the configuration staff to choose!
Search around and find very few articles about traversing things from css. So it took me half a day to implement it myself! First look at the demo of the next selection icon:
Easyui is used here: a comboxtree.
The code for referencing the css and js libraries (jquery and easyui libraries) is omitted here ).
Code:
Copy to ClipboardReference: [www.bkjia.com] <input id = "cc" class = "easyui-combotree" style = "width: 200px;">
<Script>
Function getstyle (){
For (var I = 0; I <document. styleSheets. length; I ++ ){
Var rules;
If (document.stylesheetspolici}.css Rules ){
Rules = document.stylesheetspolici2.16.css Rules;
}
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 ();
});
</Script>
There are several possible problems:
1. Large Project styles may be huge. This traversal is obviously impossible and styleSheets needs to be specified.
2. It may be inappropriate to use easyui-combotree for icons of various sizes.
Finally, configure the menu effect generated by the icon:
Source: http://www.cnblogs.com/lt1983/archive/2011/07/02/2096303.html