基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理

在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可以把这些图标方便应用在各个页面部件上,如菜单模块,按钮界面,表单输入等多个场合进行使用。在前面随笔《基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用》中,我对如何抽取Bootstrap图标,并单独开发一个页面进行图表的管理,本随笔介绍如何在这个基础上进行优化,实现更方便的使用。

1、优化图标管理界面

在前面随笔中,我们介绍了对图标的抽取、图标管理界面等内容。我们再来回顾一下Bootstrap的图表类型,Bootstrap图标库里面分为了三类内容:

Font Awesome:Bootstrap专用图标字体,Font Awesome 中包含的所有图标都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。

Simple Icons:收集众多网站的Logo,并提供高质量、不同尺寸的png格式图片给广大网友,所有Icon版权归其所属公司。

Glyphicons:包括200个符号字体格式图表集合,由Glyphicons提供,Glyphicons Halflings 一般是收费的,但是经过Bootstrap和Glyphicons作者之间的协商,允许开发人员不需要支付费用即可使用。

我们从样式表中抽取这几类图标信息,放到数据库里面,然后方便界面管理和选择处理。

在前面随笔介绍我的Bootstrap框架的时候,图标管理界面如下所示。

选择图标的时候,提供一个弹出的对话框显示分类不同的图标,让用户选择后返回即可。

虽然有了这些功能界面,能够降低我们寻找图标的过程,但是实际使用的时候,还是有一些不方便,因为寻找一个特定的图标,需要翻了很多页才能寻找到合适的,效率不高,通过了解我们自身的图标名称和它显示的内容还是有很大的关联关系的,因此我们应该提供一个显示名称的搜索,方便查询出来,并可以在查询列表中进行选择,这样就可以大大加快我们寻找Bootstrap图标的速度了。

这个界面比原来改进了很多,我们可以通过名称搜索,并获取数据库里面符合条件的图标进行分页显示,如果选择其中之一,可以把图标和名称显示在上面,这样可以方便我们使用。

查询的操作和其他分页的部分类似,把数据通过AJax方式获取后,在界面上进行分页显示即可。

<div class="form-group">
	<label class="control-label col-md-2">图标显示名称</label>
	<div class="input-icon col-md-3">
		<div class="input-group">
			<div class="input-icon ">
				<input id="WHC_DisplayName" name="WHC_DisplayName" type="text" class="form-control" placeholder="显示名称...">
			</div>
			<span class="input-group-btn">
				<button id="btnSearch" class="btn btn-success" type="button" onclick="SearchDisplayName()">
					<i class="glyphicon glyphicon-list"></i>查询
				</button>
			</span>
		</div>
	</div>
</div>
//根据名称查询图标
function SearchDisplayName()
{
	var condition = "WHC_DisplayName=" + $("#WHC_DisplayName").val();
	SearchCondition(currentPage, condition);
}

//图标查询
function Search(page) {
	var condition = "WHC_SourceType=SimpleLine";//SimpleLine,FontAwesome,Glyphicons

	SearchCondition(page, condition);
}
function SearchCondition(page, condition) {
	var iconUrl = "/BootstrapIcon/FindWithPager?page=" + page + "&rows=" + rows;

	$.getJSON(iconUrl + "&" + condition, function (data) {
		$("#grid_body").html("");
		$.each(data.rows, function (i, item) {
			var tr = "<a href=‘javascript:;‘ onclick=\"SetIconClass(‘" + item.ClassName + "‘)\" class=‘icon-btn‘ title=\"" + item.DisplayName + "\">";
			tr += "    <i class=\"" + item.ClassName + " \" style=\"font-size: 2.2em\"></i>";//
			tr += "</a>";
			$("#grid_body").append(tr);
		});

		var element = $(‘#grid_paging‘);
		if(data.total > 0) {
			var options = {
				bootstrapMajorVersion: 3,
				currentPage: page,
				numberOfPages: rows,
				totalPages: Math.ceil(data.total / rows),
				onPageChanged: function (event, oldPage, newPage) {
					SearchCondition(newPage, condition);
				}
			}
			element.bootstrapPaginator(options);
		} else {
			element.html("");
		}
	});
}

另外图标的样式我们也方便一起整合让它显示,如Primary Success Info Warning Danger等经典样式,当然我们也可以设置颜色使图标呈现更多的色彩。

相关的界面代码如下所示。

<div class="input-icon col-md-6">
	<button type="button" class="btn btn-default" onclick="ChangeIconStyle(‘default‘)">Default</button>
	<button type="button" class="btn btn-primary" onclick="ChangeIconStyle(‘primary‘)">Primary</button>
	<button type="button" class="btn btn-success" onclick="ChangeIconStyle(‘success‘)">Success</button>
	<button type="button" class="btn btn-info" onclick="ChangeIconStyle(‘info‘)">Info</button>
	<button type="button" class="btn btn-warning" onclick="ChangeIconStyle(‘warning‘)">Warning</button>
	<button type="button" class="btn btn-danger" onclick="ChangeIconStyle(‘danger‘)">Danger</button>
</div>
<script>
	//通过JS修改界面图标的显示和样式
	function ChangeIconStyle(style) {
		var icon = $("#WebIcon").val();
		if (style != ‘default‘) {
			$("#i_WebIcon").attr("class", icon + " icon-state-" + style);
			$("#lbl_WebIcon").attr("class", "label label-" + style);
			$("#lbl_WebIcon").text(icon + " icon-state-" + style);
		} else {
			$("#i_WebIcon").attr("class", icon);
			$("#lbl_WebIcon").attr("class", "");
			$("#lbl_WebIcon").text(icon);
		}
	}
</script>

2、图标的应用场景

有了这种方便选择图标的管理界面,可以极大提高我们的效率。我们可以在菜单、按钮等多个地方使用图标,使得界面更加美观。

如在菜单界面中使用如下所示。

或者可以左侧菜单进行使用。

我们还可以把图标用在界面的功能按钮上。

时间: 2024-10-20 04:26:44

基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理的相关文章

基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:http

基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2

在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按钮的方式移动收藏记录,功能虽然实现的还算不错,不过文章出来后,有读者同行指出可以利用直接拖动的方式实现排序更方便,因此对其中列表记录的排序进行了研究,从而介绍了如何利用Sortable开源JS组件实现拖动排序的处理,本篇随笔介绍了该组件在连接收藏夹排序中的应用. 1.收藏记录的排序处理回顾 上篇随笔介绍的收藏

基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序.APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML文档的编辑和图片插入操作,这个控件的使用非常方便,并且用户群也很大. Summernote 是一个简单灵活,所见即所得(WYSIWYG)的编辑器,Summernote是一个轻量级.灵活基于Bootstrap和jQuery的HTML文本编辑器,拥有强大的API配置功能,多国语言支持支持Bootstra

基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用.在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理 1)数据的列

基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可以会引入一些更好更新的内容进行完善,本篇继续这个系列,主要介绍如何实现Web页面内容的打印预览和保存操作. 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预

基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍

在前面介绍了一系列的<基于Metronic的Bootstrap开发框架经验总结>的随笔文章,随笔主要是介绍各个知识点的内容,对框架的总体性界面没有很好的阐述,本篇随笔主要介绍这个Bootstrap框架的总体性功能界面,介绍其中用到的知识点和整体性的界面.希望读者对框架有一个更加直观.真实的认识了解,界面设计以及相关思路可以借鉴提高,也可以对相关的内容进行相互探讨,共同提高. 1.<基于Metronic的Bootstrap开发框架>技术特点 1)采用最新最炫的Bootstrap响应式

基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用.关于Uploadify的控件介绍,可以参考我之前的随笔介绍<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>. 1.文件上传插件File In

基于Metronic的Bootstrap开发框架经验总结(15)-- 更新使用Metronic 4.75版本

在基于Metronic的Bootstrap开发框架中,一直都希望整合较新.较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个版本的内容进行一次更新调整,以期达到与时俱进的目的.从最近这几个版本来看,Metronic本身的目录结构以及功能没有太多的变化,但增加了一些较为方便的功能,本篇随笔对比它们进行介绍. 1.Metronic版本更新 首先我们来对空白页面进行不同版本的对比,文件的对比首选Beyond Compare,两

基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录进行合理的分页,集成各种增删改查的按钮等功能.随着开发项目的需求辩护,对数据记录分页展示.排序等功能都是常态的要求,因此在代码生成工具中调整了主列表界面的列表展示插件为Bootstrap-table插件,本篇随笔主要介绍在代码生成工具Database2Sharp中集成对Bootstrap-table