实现CSS样式文件中图标的可视化

关键词：
　　CSS，EasyUI，图标
摘 要：
　　本案例主要介绍，使用EasyUI实现CSS样式文件中图标的可视化，方便使用CSS样式文件中的图标。

[size=x-large][b]1、案例描述[/b][/size]
　　在开发项目过程中，界面使用了EasyUI框架，该框架自带了一些图标，如下图所示。
　　[img]http://dl2.iteye.com/upload/attachment/0098/5065/e523bd0d-6f9e-3ab0-85d2-81d64346cb3a.png[/img]
　　相关图标样式定义在icon.css文件中，样式内容如下所示：

　　.icon-blank{
　　	background:url('icons/blank.gif') no-repeat center center;
　　}
　　.icon-add{
　　	background:url('icons/edit_add.png') no-repeat center center;
　　}
　　……（篇幅有限，这里省略）
　　.icon-mini-refresh{
　　	background:url('icons/mini_refresh.png') no-repeat center center;
　　}

　　上述有二十几个图标，另外，后续项目还会根据需要，增加自定义的图标。在开发时存在一个问题：不知道样式对应的图标是什么样的，需要查看对应的图标文件才能知道，开发时要找到合适的图标可能需要查看所有的图标文件，这样开发比较麻烦，且效率不高。
　　那么，能不能使样式文件中的所有图标可视化？这样开发人员可以直观、快速的找到所需要的图标及对应的样式，从而提高开发效率。
　　经过一番研究，笔者实现了相关功能，下面我们一起探讨分析和解决的过程。

[size=x-large][b]2、案例分析[/b][/size]
[size=large][b]2.1 基本思路[/b][/size]
　　对CSS样式文件的读取和解析，使用Web方式和JavaScript无疑是最方便的，要使JavaScript能够获取到样式文件和样式内容，那么，需要在Web页面中引用样式文件。另外，后续将自定义的图标样式文件引入到页面中，即可方便的查看样式文件中的图标。
　　样式文件中，需要区分图标样式和其它的样式，参考EasyUI自带的图标样式文件icon.css，所有图标样式统一以“.icon”作为前缀，通过该前缀来区分图标样式和其它的样式。
　　为方便使用，提供查看所有样式图标和查看指定样式文件图标两种功能，相关处理过程如下所示：
　　（1）查看所有样式图标的时序图
　　[img]http://dl2.iteye.com/upload/attachment/0098/5067/1d62bc0a-4158-326f-b7b8-9deedf0fc381.png[/img]　　
　　（2）查看指定样式文件图标的时序图
　　[img]http://dl2.iteye.com/upload/attachment/0098/5069/369e1109-b200-3626-b7f3-47a282b5811c.png[/img]

[size=large][b]2.2 关键技术点[/b][/size]
　　1、规约图标的样式，统一图标格式，如：统一增加“.icon”前缀；
　　2、获取页面中所有引用的样式文件；
　　3、获取指定样式文件中的所有图标样式；

[size=x-large][b]3、解决过程[/b][/size]
[size=large][b]3.1 获取页面中所有的样式文件[/b][/size]

function getStyleSheets() {
　　	var data = [];
　　	data[data.length] = {id: -1, text: "全部"};
　　	for ( var i = 0; i < document.styleSheets.length; i++) {
　　		var url = document.styleSheets[i].href;
　　		if (url) {
　　			data[data.length] = {
　　				id: i, 
　　				text: url.substr(url.lastIndexOf("/") + 1)
　　			};
　　		}
　　	}
　　	return data;
}

　　注：返回的数组中，第一个为“全部”，索引值为-1，可通过该值查看所有的图标。

[size=large][b]3.2 获取单个样式文件中的所有图标样式[/b][/size]

function getIcons(index) {
　　	var data = [];
　　
　　	var styleSheet = document.styleSheets[index];
　　
　　	var rules;
　　	if (styleSheet.cssRules) {
　　		rules = styleSheet.cssRules;
　　	} else {
　　		rules = styleSheet.rules;
　　	}
　　	for ( var j = 0; j < rules.length; j++) {
　　		// 样式中，规约以".icon"开头的即为图标
　　		if (rules[j].selectorText.substr(0, 5) == ".icon") {
　　			data[data.length] = {
　　				id: index + "-" + j, 
　　				text: rules[j].selectorText.substr(1),
　　				iconCls: rules[j].selectorText.substr(1), 
　　				href: (styleSheet.href ? styleSheet.href : "")
　　			};
　　		}
　　	}
　　
　　	return data;
}

注：参数index为页面中样式文件的索引值，从0开始。

[size=large][b]3.3 获取所有样式文件中所有的图标样式[/b][/size]

function getAllIcons() {
　　	var data = [];
　　	for ( var i = 0; i < document.styleSheets.length; i++) {
　　		data = $.merge(data, getIcons(i));
　　	}
　　	return data;
}

注：上面已获取到单个样式文件中的图标样式，那么获取所有的样式文件中的所有图标样式，只须遍历所有的样式文件，然后将结果合并即可。

[size=large][b]3.4 使用ComboTree和TreeGrid来展示相关的图标[/b][/size]

　　$(function() {
　　	$("#data-grid").treegrid({
　　		idField: "id",
　　		treeField: "iconCls",
　　		rownumbers: true,
　　		striped: true,
　　		singleSelect: true,
　　		width: 800,
　　		height: 500,
　　		fitColumns: true,
　　		autoRowHeight: true,
　　		columns: [[{
　　				field: "iconCls", 
　　				title: "IconCls", 
　　				halign: "center", 
　　				width: 60,
　　				formatter: function(value, row, index) {
　　					return "";
　　				}
　　			}, {
　　				field: "id", 
　　				title: "ID", 
　　				halign: "center", 
　　				width: 60,
　　				hidden: true
　　			}, {
　　				field: "text", 
　　				title: "Text", 
　　				halign: "center", 
　　				width: 100
　　			}, {
　　				field: "href", 
　　				title: "Href", 
　　				halign: "center", 
　　				width: 200
　　			}
　　		]]
　　	});
　　
　　	$("#css-list").combotree({
　　		data: getStyleSheets(),
　　		onClick: function(node) {
　　			var id = node.id;
　　			var data = id<0 ? getAllIcons() : getIcons(id);
　　			$("#data-grid").treegrid("loadData", data);
　　		},
　　		onLoadSuccess : function(node,data) {
　　			$('#css-list').combotree('setValue', -1);
　　
　　			var data = getAllIcons();
　　			$("#data-grid").treegrid("loadData", data);
　　		}
　　	});
　　});

注：这里使用1个ComboTree和1个TreeGrid来实现整个界面，ComboTree用于列出页面中所有的样式文件，并可通过切换样式文件来查看指定样式文件中所包含的图标；而TreeGrid则用于展示图标，方便使用人员直观的查看图标及对应的样式和所在的样式文件地址。

[size=large][b]3.5 引入自定义的样式文件[/b][/size]
　　参考EasyUI的icon.css，编写自定义样式文件myicon.css，添加自定义样式对应的图标，并在页面中引入：

　　<link rel="stylesheet" type="text/css" href="static/myicon.css">

[size=x-large][b]4、运行结果[/b][/size]
　　1、使用ComboTree列出页面中所有样式文件，如下图所示：
[img]http://dl2.iteye.com/upload/attachment/0098/5071/330457db-740a-306b-ac8f-d9b206307eb3.png[/img]
　　2、查看所有样式图标，如下图所示：
[img]http://dl2.iteye.com/upload/attachment/0098/5073/ef3012fd-020e-3a66-9c3d-8b988699c1e2.png[/img]　　
　　3、查看指定样式文件图标，如下图所示：
[img]http://dl2.iteye.com/upload/attachment/0098/5075/45118748-be69-353c-8964-e51ac2582852.png[/img]

[size=x-large][b]5、总结[/b][/size]
　　综上所述，相关的解决过程和结果，实现了CSS样式文件中图标的可视化，直观展示图标的效果、对应的样式名称以及所属的样式文件，方便了开发使用。上述的解决方案，还可应用于样式文件中其它类型图片或样式效果的可视化，这里就不再赘述。

[size=x-large][b]6、源代码[/b][/size]
　　下面附件为完整源代码，请将代码解压到任意的Web服务器下，即可访问查看效果。
　　（注： 本地直接打开运行会报错，无法查看到效果）
[url=http://dl.iteye.com/topics/download/3db98e7e-f75d-342e-b6e2-6b37a0d71b47]点击这里下载[/url]

[size=x-large][b]7、参考资料[/b][/size]
[1] js列举css中所有图标的实现代码
http://dev.128.com/document/32701.html