基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作 - 伍华聪

本邮件内容由第三方提供，如果您不想继续收到该邮件，可 点此退订 。

基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作 - 伍华聪  阅读原文»

在很多Web系统中，一般都可能提供一些图标的选择，方便配置按钮，菜单等界面元素的图标，从而是Web系统界面看起来更加美观和协调。但是在系统中一般内置的图标样式相对比较有限，而且硬编码写到样式表里面，这样给我们扩展使用有很多的不方便。基于这个原因，我想如果能够独立一个模块，自动根据图标生成图标CSS样式文件，并存储相应的记录到数据库里面，方便我们查询显示，那样我们使用起来就很方便了，最后有了这些数据，只需要做一个通用的图标选择界面，并可以在很多地方重用了。本文正是基于这个思路，开发了一个图标管理模块和图标选择界面，本文主要阐述这个开发过程和最终的效果展示。

1、图标样式生成管理

为了方便根据读取的图标文件列表，生成对应的图标样式文件，我们可以利用NVelocity组件，基于模板进行CSS样式文件的生成。关于NVelocity的使用，可以参考我多篇关于它的介绍，这个组件非常强大，我自己的代码生成工具也是基于它编写了很多模板进行代码生成，具体可以参考一下《使用NVelocity生成内容的几种方式》这篇文章。

1.1 图标样式文件准备

有了这些准备，我们可以定义一个模板的文件用来生成样式文件了，我们先看最终的样式文件效果。

.icon-table{
background:url('table.png') no-repeat center center;
}
.icon-telephone{
background:url('telephone.png') no-repeat center center;
}
.icon-user{
background:url('user.png') no-repeat center center;
}
.icon-view{
background:url('view.png') no-repeat center center;
}
.icon-word{
background:url('word.png') no-repeat center center;
}

根据以上组织效果，我们可以定义一个模板内容如下所示。

#foreach($item in ${FileNameList})
.${item.Text}{
background:url('${item.Value}') no-repeat center center;
}