基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用


Posted in Javascript onMay 12, 2016

在前面的一篇随笔基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理,介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表。其中菜单信息的图标样式,也是从数据库里面获取的,因此要求我们能够动态取得Bootstrap里面的各种图标定义了。本篇主要介绍如何提取Bootstrap的图标信息,存储到数据库里面为我所用。

1、菜单的显示及各种Bootstrap图标

我们从下图可以看到,为了菜单的美观,每个菜单项(这里分了三级菜单)都有一个图标,虽然大小不同,我们利用Bootstrap的图标,都是从Bootstrap图标库里面的内容。

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

Bootstrap图标库里面分为了三类内容:

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

如下面是部分Font Awesome 的图标:

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

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

如下面所示是Simple Icons的部分图标:

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

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

如下是部分Glyphicons内容:

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

利用这几种图标内容,我们引入下面几种样式就可以了。

<link href="/Content/metronic/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/metronic/simple-line-icons/simple-line-icons.min.css" rel="stylesheet"/>
<link href="/Content/metronic/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

这几种图标,都是支持各种Bootstrap的主题化显示的,如下面几种效果所示。

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

或者也可以把图标变大一些:

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

2、各种Bootstrap的图标的提取

我们通过上面的介绍,估计对这几种Bootstrap的图标有了一定的了解,但是我们如果要能够在菜单编辑里面选择图标,那么我们还是需要把这些信息提取到数据库里面,然后展示出来给我进行选择的,否则无法做到动态配置。

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

如上面的编辑界面,对菜单的Web图标提供了动态的选择,那么我们如果数据库里面记录了上面几种图标的集合,那么我们就可以把它在界面进行展示,并可以从中选择合适的图表了。

根据上面的几个样式文件,我们分析一下,如对于font-awesome.min.css的文件内容,它对于图标定义部分如下所示。

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

而对于simple-line-icons来说,它的样式定义也差不多,如下所示。

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

对于Glyphicons来说,它的样式定义也是很类似的,如下所示。

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

根据这几种信息,我们就可以通过正则表达式匹配的方式,把我们所需要的信息提取出来,并存储在数据库里面即可实现图标动态显示和选择的第一步了。

例如,我们定义部分变量和正则表达式来处理这些文件内容:

string regex = "^\\.(?<name>.*?):before\\s*\\{";
      List<string> filePathList = new List<string>()
      {
        "~/Content/themes/metronic/assets/global/plugins/bootstrap/css/bootstrap.css",
        "~/Content/themes/metronic/assets/global/plugins/font-awesome/css/font-awesome.css",
        "~/Content/themes/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.css",
      };

然后通过读取文件内容,并进行匹配记录获取即可提取出来集合内容了。

string content = FileUtil.FileToString(realPath);
  List<string> matchList = CRegex.GetList(content, regex, 1);

最后我们把这些信息保存到数据库表里面即可。

BootstrapIconInfo info = new BootstrapIconInfo()
  {
    DisplayName = item,
    ClassName = prefix + item,
    CreateTime = DateTime.Now,
    SourceType = sourceType,
  };
  BLLFactory<BootstrapIcon>.Instance.Insert(info);

最后记录存储在数据库里面,效果如下所示,里面已经记录我们所需的图标信息了,这样在实际使用的时候,就可以利用各个字段的信息,显示出好看的界面了。

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

3、Bootstrap的图标显示和选择

我们通过文件读取并以正则表达式提取出内容,然后保存到数据库后,这些图标信息就可以为我们使用了,可以在页面里面分类显示出来,每类的图标进行分页处理,方便查询,如下所示。

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

这部分的显示页面代码和常规的数据显示差不多的,只是不需要表头信息而已,我们来看看页面代码如下所示。

<div class="portlet box green-meadow">
      <div class="portlet-title">
        <div class="caption"> <i class="fa fa-filter"></i>
          图标信息
        </div>
      </div>
      <div class="portlet-body flip-scroll">
        <div>
          <span>每页显示</span>
          <select id="rows" onchange="ChangeRows()">
            <option>50</option>
            <option selected>100</option>
            <option>200</option>
            <option>1000</option>
          </select>
          <span>条记录</span>  
          <span>共有记录:</span><span id='totalCount' class="label label-success">0</span>条,总页数:<span id='totalPageCount' class="label label-success">0</span>页。
        </div>
        <hr />
        <div class="row" style="padding-left:20px">
          <div class="portlet-body" id="grid_body"></div>
          <div class="paging-toolbar">
            <ul id='grid_paging'></ul>
          </div>
        </div>
      </div>
    </div>

其中主要的图标显示内容在上面这部分的HTML里面。

<div class="portlet-body" id="grid_body"></div>

动态获取并生成HTML代码显示在界面上的处理脚本如下所示。

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

用户选择对应的图标后,我们可以通过脚本设置Span的样式就可以显示出来我们选中的图标了,如下所示。

$("#i_WebIcon").attr("class", classname);

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

基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

这样我们就完成了,从图标文件里面提取不同类型的图表,然后存储在数据库里面,并在页面里面显示出来,可供我们动态选择和设置了。

以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用 的相关知识,希望对大家有所帮助,如果大家想了解更多资讯,敬请关注三水点靠木网站!

Javascript 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
vue.js路由跳转详解
Aug 28 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
使用bootstrap3开发响应式网站
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 #Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 #Javascript
去除字符串左右两边的空格(实现代码)
May 12 #Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 #Javascript
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
房屋出租协议书
2014/04/10 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
给朋友的赠语
2015/06/23 职场文书
电工生产实习心得体会
2016/01/22 职场文书
《司马光》教学反思
2016/02/22 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL