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 ).
Html:
Copy codeThe Code is as follows:
<Input id = "cc" class = "easyui-combotree" style = "width: 200px;">
Javascript:
Copy codeThe Code is as follows:
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 ();
});
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: