JS组件系列的引导图标图标选择组件

最近很多朋友都在群里聊到了bootstrap图标，比如最常见的菜单管理。每个菜单肯定需要一个对应的菜单图标。如果只有可视化图标选择组件，不如直接选择图标，得到对应的类样式。结果各种百度，天助自助者，最后被博主发现。感觉不错，支持自定义图标。今天就来分享一下。绝对干货！

一、引导图标选取器组件。

在github上搜索时找到了此组件。乍一看确实不错，而且是基于bootstrap风格，所以更适合采用bootstrap风格布局的项目。既然是在github上，那么它无疑是一个带有源代码地址的开源组件。好了，说了这么多，我们来看看它到底是什么样子。

1.组件效果预览。

第一次初始化

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

支持选择自定义图标。

支持模糊搜索图标，比如我们搜索摄像头。

选择图标并将相应的样式放入文本框。

2.组件代码示例(1)常见用法。

该组件基于bootstrap和jquery，要引用的文件如下。

link href=' ~/Content/Bootstrap/CSS/Bootstrap . CSS ' rel='样式表'/link href=' ~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-picker-master/CSS/icon-picker . CSS ' rel='样式表'/脚本src=' http : ~/script/jquery-1 . 9 . 1 . js '/脚本src=' http : ~/Content/Bootstrap-icon-picker-master/Bootstrap-icon-icon-picker-master/

Type=' text' js初始化。

$(function () {//bootstrap icon初始化$ ('# txt _ bootstrap _ icon ')。icon picker()；});初始化后，可以看到上面显示的效果。有木头很简单~ ~

然后我们需要得到选中的值，这和正常的输入文本框没有什么区别。var bootstrap _ icon=$(' # txt _ bootstrap _ icon ')。val()；

(2)自定义图标。

我们可以看到，使用上述方法初始化后，图标的数量是固定的十个。如果我们需要添加一些自己的图标怎么办？或者，我们需要使用背景图片作为图标。我们做什么呢放心吧，总会有办法的！让我们简单看看它的js源代码：

一共一百多行代码，不难理解。我们关注上面红线中的变量图标，并观察到存储在这个数组中的是我们所有图标的集合。让我们看看生成的html源代码。

因此，我们想知道是否可以自定义样式并将其命名为graphicon-像这样的一些样式可以自定义图标？有了这个想法，我们向css文件中添加了两种新的样式。

然后将test11、test12、test13和test14添加到图标变量中。

var图标=新数组(‘调整’，‘居中对齐’，‘左右对齐’，‘左右对齐’，‘向下箭头’，‘向左箭头’，‘向右箭头’，‘向上箭头’，.“缩小”、“test11”、“test12”、“test13”、“test 14”)；好了，你说完了。下一步是刷新页面以查看效果。

所以这个组件最大的优点就是方便扩展自己的图标，无论是写内容还是用背景图片都可以无缝连接。酒吧！

第二，jQuery fontIconPicker组件。

Jquery fonticonpicker是博主在寻找Jquery插件时发现的。找不到也没关系。仔细研究后发现这个组件确实不错，尤其是界面效果非常好。并且开源，文档齐全，功能丰富。源代码下载地址

1.组件效果预览。

在初始化期间，定义了四个主题(博主更喜欢第一种引导风格)。

分页支持

对老鼠的影响。

支持模糊搜索。

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

选择某个图标后的效果

2、组件代码示例

(1)普通用法

这个组件不需要引导程序的支持，但是需要jquery的支持，不过我们测试的需要还是将bootstrap.css给引用进来。

脚本src=' http : ~/Scripts/jquery-1。9 .1 .js /脚本脚本src=' http : ~/Content/font icon picker-2。0 .0/jquery。字体图标选择器。js /脚本链接href=' ~/Content/bootstrap/CSS/bootstrap。CSS ' rel='样式表'/链接href=' ~/Content/font icon picker-2。0 .0/CSS/jquery。字体图标选择器。CSS ' rel='效果炫，必然引用的文件就多了。

再来看看超文本标记语言准备

1)静态超文本标记语言

选择名称=“我自己选择”选项值='无图标/选项选项图标-用户/选项选项图标-搜索/选项选项图标-右-目录/选项选项图标-星/选项选项图标-取消/选项选项图标-帮助-循环/选项选项图标-眼睛/选项选项图标-标签/选项选项图标-书签/选项图标-心/选项选项图标-拇指向下-alt/选项图标-上传-云/选项图标-电话-方形/选项图标-齿轮/选项图标-选项如果是动态设置图标，这里只需要放一个空的挑选即可

选择名称='myselect'/selectJS初始化

1)静态初始化（针对挑选里面已经写好了选择权的情况)

$(function () { //jquery图标初始化$('#myselect ').font icon picker()；//用默认选项加载});2)动态初始化（针对空的挑选标签)

$(function () {//jquery icon初始化$ ('# myselect ')。fonticon picker({ theme : ' FIP-bootstrap '，//四种主题样式：FIP-灰色，FIP-深灰色，FIP-bootstrap，FIP-倒排源： ['icon-music '，' icon-search '，' icon-mail '，' icon-mail-alt '，' icon-heart '，' icon-heart-empty '，' icon-star-empty '，' icon-star-halt '，' icon-user '，' icon-users '，' icon-男性'，' icon-女性'，' icon-video '，' icon-videocam ' icon-reply-all '，' icon-forward '，' icon-quote-left '，' icon-quote-right '，' icon-export-alt '，' icon-pencil-squared '，' icon-edit '，' icon-print '，' icon-retweet '，' icon-键盘'，' icon-gamepad '，' icon-注释'，' icon-聊天'，' icon-聊天-空'，' icon-铃声'，' icon-铃声-alt '，' Ion-Android-alert '，' ion-Android-apps '，//是否显示为空emptyiconvalue3360 });其实也很简单。能设置的参数只有几个，代码中也写了相应的注释，这里就不多解释了。

同样，要获取选定的值，可以直接使用jquery的val()。

(2)自定义图标。

看完上面bootstrap图标的自定义图标，你在想这个组件是不是也可以支持自定义？呵呵，博主也这么认为。可以吗？让我们先试一试。

1)尝试使用背景图片的图标失败。

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

样式类型='text/css '。glyphicon-test 13 { background : URL('/Content/images/icons/p13 . png ')无重复中心中心！重要；高： 15px！重要；宽度： 14px！重要；}/style然后将' glyphicon-test13 '放在对应于初始化源的数组末尾，这似乎已经完成。让我们刷新界面。

与预期相反，图标背景图像无法正常显示。这是为什么？博主好奇心又来了，查看元素看看：

最初，这个组件生成一个I标记，它不同于上面的跨度。span可以用作容器，但只能用作斜体标记。所以这次尝试失败了。但博主不服气。你说I标签不是容器，没有实际的占位符。我们能在I中写多个空格吗？

可以看到，在I标签上加了空格后，图片就可以显示了，看来问题解决的很完美！但是，但是，不要太高兴，你选择它的时候不会起作用，因为里面还有一个空的我标签。所以，总的来说，这个方法可以作为一个参考思路，会有时间看看源代码是否可以适当修改来实现这个功能。目前不支持现阶段自定义背景图片！

2)尝试用css写图标，结果成功。

既然无法自定义背景图片，那么如果我们自定义图标，也就是说，我们都用{content:''}之前的：的方式写图标呢？答案是肯定的。我们找到了一个专门下载图标的网站，下载了图标包，并引用到我们项目的页面上。

我们随机选择两个‘ion-Android-archive’和‘ion-Android-arrow-back’放在初始化源对应的数组末尾。刷新界面

经过选择。

三.比较。

这些是使用上述两个图标选择组件的示例。相比之下，每个组件都有自己的优缺点。

1.从界面效果来看，第二款(jqueryfontIconPicker)比第一款(Bootstrap图标Picker)更好，界面更亮，用户体验更好。这是没有争议的。

2.从组件的重量轻来看，第一个比第二个好。很明显，第二个是指这么多css，肯定会导致组件臃肿。

3.从使用是否方便来看，第一种更简单，更容易扩展；第二个api比较全面，可定制项多，使用灵活，但目前定制背景图片存在问题。