位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享很不错的两款Bootstrap Icon图标选择组件,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

一、Bootstrap icon picker组件

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

1、组件效果预览

第一次初始化

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

支持自定义图标的选择

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

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

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

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

JS初始化

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

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

(2)自定义图标

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

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

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

然后在icons变量里面加test、test、test、test四个项之后

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

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

二、jQuery fontIconPicker组件

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

1、组件效果预览

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

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

支持分页

鼠标上上面效果

支持模糊搜索

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

选择某个图标后的效果

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

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

再来看看html准备

1)静态html

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

JS初始化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

选中之后

三、比较

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

本文链接地址:https://www.jiuchutong.com/biancheng/382746.html 转载请保留说明!

上一篇:理解javascript中的MVC模式(简述javascript)

下一篇:如何利用JS通过身份证号获取当事人的生日、年龄、性别(用javascript)

  • 个税里的本期收入扣不扣个人社保
  • 2023小规模纳税人所得税税收优惠政策
  • 税务登记的期限为几年
  • 城市配套费的用途
  • 小规模纳税人残保金
  • 合同资产减值准备怎么计提
  • 签证费怎么支付
  • 行政单位预算外资金收入
  • 客户回款扣除的手续费会计分录怎么做?
  • 资产拍卖税费谁承担
  • 医院其他应付款过高的原因
  • 附加税是当月计提当月缴纳吗
  • 广告制作税收编码怎么填
  • 定额发票2019
  • 一般纳税人出租不动产增值税税率
  • 进口付汇核销流程
  • 社保企业报盘是什么
  • 6%技术服务费是普票还是专票
  • 负债率是什么指标
  • 电子承兑汇票怎么用
  • 安装win7的步骤
  • win10最新版本激活
  • 开户银行对公司有影响吗
  • type3插件
  • 没有发票只有收据可以报销吗
  • 在php中,字符串有哪些表示形式
  • 销项负数发票应该给谁
  • 骑自行车的好处功效与作用
  • 彻底清理缓存
  • 日落时有什么变化
  • img标签怎么写
  • 你知道怎么训练
  • 微信小程序项目中的 ______ 文件是全局配置文件
  • php对接第三方支付
  • admit允许
  • 宝塔怎么做?
  • 安装充电桩电费怎么收
  • 企业处置固定资产发生的净损失应计入
  • 农民工专用账户回执单
  • 金税盘税控盘和税务Ukey有什么区别
  • 关于帝国战争的游戏
  • 运营级别划分
  • 货物运输代理人
  • mysql数据库注入
  • sqlserver2012开发版
  • CMS不要让MySQL为你流泪
  • 保险车辆理赔入账流程
  • 购进免税农产品进项税额计算
  • 合并财务报表内部往来如何抵消
  • 未抵扣进项税额什么意思
  • 付给其他公司的服务费怎么记账
  • 重大水利工程建设
  • 商业承兑汇票怎么做账
  • 黄金以旧换新是不是不划算
  • 长期股权投资权益法初始成本的确定
  • 一个会计每个月平均有多少钱
  • 红字发票怎样记账
  • 企业存货会计分录
  • qq远程协助点不动
  • linux系统中网络配置文件一般放在
  • 双系统电脑怎么装系统
  • centos怎么设置
  • linux统计文件中每个单词出现的次数
  • 电脑因故障出现问题而启动
  • win7注册表文件位置
  • opengl光照设置
  • node.js jquery
  • jquery删除当前元素
  • pm2启动nodejs
  • android studio乱码怎么解决
  • jquery判断对象是否存在
  • python抓取手机号软件
  • Forward Render VS Deferred Rendering
  • 朝阳税务总局
  • 小规模纳税人怎么申报纳税
  • 房产税自用改为出租,房产税如何申报
  • 电子税务局做什么的
  • 消费税申报详细流程图
  • 企业所得税预缴时间规定
  • 经营所得税怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设