bootstrap图标选择器:Bootstrap-icon-picker优化

bootstrap自带的图标选择器Bootstrap-icon-picker 源码地址 很好用,但是用一个缺点,就是没有预览效果,只显示图标代码。如下图

其实input右边的按钮可以完全利用起来,如图:

我们可以修改一下js文件,让这个按钮实时显示所选的图标效果。

在js文件目录中找到iconPicker.js,打开后找到

$button=$(“<span class=\”input-group-addon pointer\”><i class=\”glyphicon glyphicon-picture\”></i></span>”);

我们给i标签加一个id值,如下:

$button=$(“<span class=\”input-group-addon pointer\”><i id=\”btnicon\” class=\”glyphicon glyphicon-picture\”></i></span>”);

然后继续找到function showList($element,arrLis)函数,在里面增加一段代码:

$(“.icon-list li a”,$popup).click(function(e){
e.preventDefault();
var title=$(this).attr(“title”);
$element.val(“glyphicon glyphicon-“+title);

$(“#btnicon”).removeClass();
$(“#btnicon”).addClass(“glyphicon glyphicon-“+title);

removeInstance();
});

斜体加粗为增加部分,这样每次选中图标,按钮是实时显示我们所选的图标效果了。

发表评论

电子邮件地址不会被公开。