很不错的两款Bootstrap Icon图标选择组件


Posted in Javascript onJanuary 28, 2016

一、Bootstrap icon picker组件

这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap风格的,所以更加适合使用bootstrap风格布局的项目。既然是github上面的,毋庸置疑,这是一个开源组件,源码地址。好了,说了这么多,一起来看看它到底长啥样子吧。

1、组件效果预览

第一次初始化

很不错的两款Bootstrap Icon图标选择组件

支持“上一页”和“下一页”

很不错的两款Bootstrap Icon图标选择组件

支持自定义图标的选择

很不错的两款Bootstrap Icon图标选择组件

支持模糊搜索图标,比如我们搜索camera

很不错的两款Bootstrap Icon图标选择组件

选择图标后对应的样式放入到文本框里面

很不错的两款Bootstrap Icon图标选择组件

2、组件代码示例
(1)普通用法
此组件基于bootstrap和jquery,需要引用的文件如下

  <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
 <link href="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/css/icon-picker.css" rel="stylesheet" />

 <script src="~/Scripts/jquery-1.9.1.js"></script>
 <script src="~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/js/iconPicker.js"></script>

在html页面上面放置一个普通的的input文本框

<input type="text" class="form-control" id="txt_boostrap_icon">

JS初始化

$(function () {
 //bootstrap icon初始化
 $("#txt_boostrap_icon").iconPicker();
 });

这样初始化之后就能看到如上图的效果了。有木有很简单~~

然后我们需要获取选中的值,和普通input文本框的使用方法没有任何区别 var bootstrap_icon = $("#txt_boostrap_icon").val();

(2)自定义图标

我们看到使用上面的方法初始化之后,图标的个数是固定的那么几十个。如果我们需要往里面加一些我们自己的icon图标怎么办呢?又或者,我们需要使用背景图片来作为图标,该怎么办?别急,办法总是会有的!我们先来简单看看它的js源码:

很不错的两款Bootstrap Icon图标选择组件

总共也就一百多行代码,要看懂也不难。我们重点来看看上面红线匡里面的变量icons,观察发现这个数组里面存放的就是我们所有图标的集合。再来看看生成的html源码。

很不错的两款Bootstrap Icon图标选择组件

由此我们猜想是否可以自定义样式也命名为glyphicon-这样的一些样式来自定义图标呢?有了这个想法,我们在css文件里面新加两个样式

很不错的两款Bootstrap Icon图标选择组件

然后在icons变量里面加test11、test12、test13、test14四个项之后

var icons = new Array("adjust", "align-center", "align-justify", "align-left", "align-right", "arrow-down", "arrow-left", "arrow-right", "arrow-up",......... "zoom-out","test11","test12","test13", "test14");

好了,大功告成。接下来就是刷新页面看效果了。

很不错的两款Bootstrap Icon图标选择组件

所以这个组件最大的好处就是扩展自己的图标方便,不管是用content写还是使用背景图片都可以无缝对接。杠杠的!

二、jQuery fontIconPicker组件

jquery fonticonpicker是博主是找jquery插件的时候无意中发现的,不发现不要紧,仔细研究后发现这组件真心不错,尤其是界面效果很棒。并且开源,文档全,功能丰富。

1、组件效果预览

初始化的时候有自定义了四种主题(博主更偏爱第一种bootstrap风格的)

很不错的两款Bootstrap Icon图标选择组件

很不错的两款Bootstrap Icon图标选择组件

很不错的两款Bootstrap Icon图标选择组件

很不错的两款Bootstrap Icon图标选择组件

支持分页

很不错的两款Bootstrap Icon图标选择组件

鼠标上上面效果

很不错的两款Bootstrap Icon图标选择组件

支持模糊搜索

很不错的两款Bootstrap Icon图标选择组件

支持自定义每页显示的图标个数

很不错的两款Bootstrap Icon图标选择组件

选择某个图标后的效果

很不错的两款Bootstrap Icon图标选择组件

2、组件代码示例
(1)普通用法
这个组件不需要bootstrap的支持,但是需要jquery的支持,不过我们测试的需要还是将bootstrap.css给引用进来。

<script src="~/Scripts/jquery-1.9.1.js"></script>
 <script src="~/Content/fontIconPicker-2.0.0/jquery.fonticonpicker.js"></script>

 <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
 <link href="~/Content/fontIconPicker-2.0.0/css/jquery.fonticonpicker.css" rel="stylesheet" />
 <link href="~/Content/fontIconPicker-2.0.0/themes/grey-theme/jquery.fonticonpicker.grey.css" rel="stylesheet" />
 <link href="~/Content/fontIconPicker-2.0.0/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.css" rel="stylesheet" />
 <link href="~/Content/fontIconPicker-2.0.0/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.css" rel="stylesheet" />
 <link href="~/Content/fontIconPicker-2.0.0/themes/inverted-theme/jquery.fonticonpicker.inverted.css" rel="stylesheet" />
 <link href="~/Content/fontIconPicker-2.0.0/fontIconPicker-2.0.0/demo/fontello-7275ca86/css/fontello.css" rel="stylesheet" />

效果炫,必然引用的文件就多了。

再来看看html准备

1)静态html

<select id="myselect" name="myselect" class="myselect">
 <option value="">No icon</option>
 <option>icon-user</option>
 <option>icon-search</option>
 <option>icon-right-dir</option>
 <option>icon-star</option>
 <option>icon-cancel</option>
 <option>icon-help-circled</option>
 <option>icon-info-circled</option>
 <option>icon-eye</option>
 <option>icon-tag</option>
 <option>icon-bookmark</option>
 <option>icon-heart</option>
 <option>icon-thumbs-down-alt</option>
 <option>icon-upload-cloud</option>
 <option>icon-phone-squared</option>
 <option>icon-cog</option>
 <option>icon-wrench</option>
 <option>icon-volume-down</option>
 <option>icon-down-dir</option>
 <option>icon-up-dir</option>
 <option>icon-left-dir</option>
 <option>icon-thumbs-up-alt</option>
 </select>

2)如果是动态设置图标,这里只需要放一个空的select即可

<select id="myselect" name="myselect" class="myselect"></select>

JS初始化

1)静态初始化(针对select里面已经写好了option的情况)

$(function () {
 //jquery icon初始化
 $('#myselect').fontIconPicker(); // Load with default options
 });

2)动态初始化(针对空的select标签)

$(function () {
 //jquery icon初始化
 $('#myselect').fontIconPicker({
 theme: 'fip-bootstrap',//四种主题风格:fip-grey, fip-darkgrey, fip-bootstrap, fip-inverted
 source: ["icon-music", "icon-search", "icon-mail", "icon-mail-alt", "icon-heart", "icon-heart-empty", "icon-star", "icon-star-empty", "icon-star-half", "icon-star-half-alt", "icon-user", "icon-users", "icon-male", "icon-female", "icon-video", "icon-videocam", "icon-picture", "icon-camera", "icon-camera-alt", "icon-th-large", "icon-th", "icon-th-list", "icon-ok", "icon-ok-circled", "icon-ok-circled2", "icon-ok-squared", "icon-cancel", "icon-cancel-circled", "icon-cancel-circled2", "icon-plus", "icon-plus-circled", "icon-plus-squared", "icon-plus-squared-small", "icon-minus", "icon-minus-circled", "icon-minus-squared", "icon-minus-squared-alt", "icon-minus-squared-small", "icon-help", "icon-help-circled", "icon-info-circled", "icon-info", "icon-home", "icon-link", "icon-unlink", "icon-link-ext", "icon-link-ext-alt", "icon-attach", "icon-lock", "icon-lock-open", "icon-lock-open-alt", "icon-pin", "icon-eye", "icon-eye-off", "icon-tag", "icon-tags", "icon-bookmark", "icon-bookmark-empty", "icon-flag", "icon-flag-empty", "icon-flag-checkered", "icon-thumbs-up", "icon-thumbs-down", "icon-thumbs-up-alt", "icon-thumbs-down-alt", "icon-download", "icon-upload", "icon-download-cloud", "icon-upload-cloud", "icon-reply", "icon-reply-all", "icon-forward", "icon-quote-left", "icon-quote-right", "icon-code", "icon-export", "icon-export-alt", "icon-pencil", "icon-pencil-squared", "icon-edit", "icon-print", "icon-retweet", "icon-keyboard", "icon-gamepad", "icon-comment", "icon-chat", "icon-chat-empty", "icon-bell", "icon-bell-alt", "ion-android-alert", "ion-android-apps"],
 emptyIcon: true,//是否显示空
 emptyIconValue: "none",//空值
 iconsPerPage: 30, //每页显示图标的个数,默认20
 hasSearch: true,//是否显示试试框,默认true

 }); 
 });

其实也很简单,就那么几个可以设置的参数,代码里面已经写了相应的注释,这里就不做过多讲解。

同样,获取选中的值,可以直接使用jquery的val()即可。

(2)自定义图标
看了上面bootstrap icon的自定义图标,你是否也在想,这个组件也能支持自定义就好了。呵呵,博主也是这样想得。行不行呢?我们先来试一试。

1)使用背景图片的图标尝试,结果失败

首先直接在页面上面定义一个使用背景图片的样式

<style type="text/css">
 .glyphicon-test13 {
 background: url('/Content/images/icons/p13.png') no-repeat center center!important;
 height: 15px!important;
 width: 14px!important;
 }
</style>

然后将"glyphicon-test13"放入到初始化source对应的数组的最后,看似大功告成。我们刷新下界面看看

很不错的两款Bootstrap Icon图标选择组件

事与愿违,图标背景图无法正常显示。这是为什么呢?好奇心又来了,审核元素看看:

很不错的两款Bootstrap Icon图标选择组件

原来这个组件生成的是i标签,它和上面的span是不同的,span可以作为容器,而只能作为一种斜体标签。所以此种尝试失败。但是不服气了,你说i标签不是容器没有实际的占位是吧,我们将i里面写入多个空格行不行呢?

很不错的两款Bootstrap Icon图标选择组件

可以看到向i标签里面加入空格之后,确实可以让图片显示出来,貌似问题完美解决!但是,但是,别高兴太早了,选中的时候还是不行,因为选中的里面还是空的i标签。所以总的来说,这种方式可以作为一种参考思路,后面有时间看是否可以适当修改下源码实现这个功能,目前这阶段是不支持自定背景图片的!

2)使用css写的图标尝试,结果成功

既然自定义背景图片不行,那么如果我们自定icon呢,也就是如果我们都通过:before{content:""}这种方式来写的图标是否可以呢?答案是可以的。我们找到一个专门放icon的网站,去里面下载icon包,引用到我们项目的页面中来。

很不错的两款Bootstrap Icon图标选择组件

我们随便选两个"ion-android-archive"、"ion-android-arrow-back"放到初始化source对应的数组的最后。刷新界面

很不错的两款Bootstrap Icon图标选择组件

选中之后

很不错的两款Bootstrap Icon图标选择组件

三、比较
以上就是两种icon图标选择组件的使用示例。对比一下,这种组件其实各有利弊。

1、从界面效果来看,第二种(jquery fontIconPicker)要比第一种(Bootstrap icon picker)要好看,界面更炫,用户体验更好。这个没有争议。

2、从组件的轻量级上面来说,第一种是要比第二种更优的,很明显,第二种引用了那么多的css,肯定或多或少会导致组件的臃肿。

3、从使用是否方便的角度来看,第一种使用更加简单,更易扩展;第二种api 更加全面,可自定义的项比较多,使用灵活,但是自定义背景图片目前会有问题。

好了,这篇就到这里。如果你的项目正好也需要用到这种图标选择组件,可以用起来试试。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

Javascript 相关文章推荐
基于jquery的回到页面顶部按钮
Jun 27 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
深入理解vue路由的使用
Mar 24 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
js实现随机点名程序
Sep 17 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
Angular实现form自动布局
Jan 28 #Javascript
理解javascript中的MVC模式
Jan 28 #Javascript
jQuery获取checkbox选中的值
Jan 28 #Javascript
探讨JavaScript语句的执行过程
Jan 28 #Javascript
Javascript复制实例详解
Jan 28 #Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 #Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 #Javascript
You might like
php数据库密码的找回的步骤
2011/01/12 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
JavaScript 原型与继承说明
2010/06/09 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python异常和文件处理机制详解
2016/07/19 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
资深生产主管自我评价
2013/09/22 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
2016国培学习心得体会
2016/01/08 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js