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

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

1、案例描述
　　在开发项目过程中，界面使用了EasyUI框架，该框架自带了一些图标，如下图所示。
　　
　　相关图标样式定义在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;
　　}

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

2、案例分析
2.1 基本思路
　　对CSS样式文件的读取和解析，使用Web方式和JavaScript无疑是最方便的，要使JavaScript能够获取到样式文件和样式内容，那么，需要在Web页面中引用样式文件。另外，后续将自定义的图标样式文件引入到页面中，即可方便的查看样式文件中的图标。
　　样式文件中，需要区分图标样式和其它的样式，参考EasyUI自带的图标样式文件icon.css，所有图标样式统一以“.icon”作为前缀，通过该前缀来区分图标样式和其它的样式。
　　为方便使用，提供查看所有样式图标和查看指定样式文件图标两种功能，相关处理过程如下所示：
　　（1）查看所有样式图标的时序图
　　　　
　　（2）查看指定样式文件图标的时序图
　　

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

3、解决过程
3.1 获取页面中所有的样式文件

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，可通过该值查看所有的图标。

3.2 获取单个样式文件中的所有图标样式

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开始。

3.3 获取所有样式文件中所有的图标样式

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

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

3.4 使用ComboTree和TreeGrid来展示相关的图标

　　$(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则用于展示图标，方便使用人员直观的查看图标及对应的样式和所在的样式文件地址。

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

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

4、运行结果
　　1、使用ComboTree列出页面中所有样式文件，如下图所示：

　　2、查看所有样式图标，如下图所示：
　　
　　3、查看指定样式文件图标，如下图所示：


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

6、源代码
　　下面附件为完整源代码，请将代码解压到任意的Web服务器下，即可访问查看效果。
　　（注： 本地直接打开运行会报错，无法查看到效果）
    点击这里下载

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

评论

1 楼 baukh789 2014-06-26  

受教了。谢谢分享