位置: 编程技术 - 正文

JS组件系列之Bootstrap Icon图标选择组件(bootstrap js插件)

编辑:rootadmin

推荐整理分享JS组件系列之Bootstrap Icon图标选择组件(bootstrap js插件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js组件是什么,bootstrap js,bootstrap's javascript,js combobox,js 组件,js bom,js combobox,js combobox,内容如对您有帮助,希望把文章链接给更多的朋友!

前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的class样式。于是乎各种百度,皇天不负有心人,最后被博主找到了,感觉效果还不错,并且支持自定义的图标,今天就拿出来分享下,绝对的干货哦!

一、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风格的)

JS组件系列之Bootstrap Icon图标选择组件(bootstrap js插件)

支持分页

鼠标上上面效果

支持模糊搜索

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

选择某个图标后的效果

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下载,去里面下载icon包,引用到我们项目的页面中来。

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

选中之后

三、比较

标签: bootstrap js插件

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

上一篇:Javascript中的Prototype到底是什么(JavaScript中的方法名不区分大小写)

下一篇:JavaScript SweetAlert插件实现超酷消息警告框

  • 企业所得税汇算清缴退税怎么做账
  • 股票印花税计算公式
  • 金税盘购买的会计分录
  • 一般纳税人如何注销
  • 劳务成本算营业成本吗
  • 预算分配比例与国库不一样
  • 以前年度损益调整会计分录
  • 资产重组过程中资产转出的税收问题
  • 金税盘抵减增值税的账务处理
  • 拆迁房视同销售成本可以抵减吗?
  • 自己开发自己施工的建筑单位怎么样
  • 农业企业土地租赁费账务处理
  • 未收到增值税专用发票怎么处理
  • 企业所得税季报填报说明
  • 请问什么是全员安全生产责任制
  • 这几点政府补助会计新准则值得关注
  • 公司支付广告费怎么入账
  • 财务软件没有税务登记
  • 享受企业所得税税额抵免优惠的设备包括
  • 留存收益账务处理视频
  • 在天猫店铺后台中的提现怎么做会计分录?
  • 取得免税农产品进项税转出
  • 代订住宿费属于那个经营范围
  • Win10 LTSC 2021(长期服务频道)正式版发布: 附MSDN官方ISO纯净镜像下载
  • linux耳机插拔检测
  • 财政拨款收入是指行政单位从哪里取得的预算资金
  • 简述linux系统的启动
  • linux 的ll
  • window10切换win7
  • 办公家具折旧年限及计算方法
  • 中秋福利发放现金文案怎么写
  • elementui能做什么
  • 财务费用利息收入怎么结转
  • 纳税人转让不动产增值税征收管理暂行办
  • 纳税评估一般程序包括
  • 带息应收票据应于收到或开出或承兑时
  • 犹他州现神秘物体
  • php curl设置cookie
  • 开票收款人在哪里设置
  • 应纳税所得额的意思
  • 机关事业单位购买茶叶违反什么规定
  • 月末账务处理流程分录例题
  • 企业所得税法定税率是多少
  • 为什么运输合同比租赁合同风险小
  • nginx连接超时时间设置多少
  • java如何实现异步处理
  • ajax调用
  • 金蝶利息收入结转怎么弄
  • PyTorch深度学习实战 | 神经网络的优化难题
  • 预先支付的房租
  • 分公司可以分配利润吗
  • 计提基建借款利息会计分录
  • 增值税征收类型
  • 股东撤资如何退还资金,用途写什么
  • 实收资本不到账怎么处理
  • 期末应交税费有余额吗
  • 票据贴现的分录
  • 小规模纳税人标准500万是含税吗
  • 进项税额被转出怎么做账
  • 税控盘和金税盘一样吗
  • 无形资产摊销怎么计算月摊销额
  • 母子公司可以合并吗
  • 会务费所需要注意的细节
  • 企业进口外汇额度限制
  • reg.exe是什么程序
  • windows xp系
  • ubuntu系统中安装微信步骤
  • linux中git命令
  • docker部署zookeeper集群
  • windows下键盘不能用
  • linux如何进行命令操作
  • linux端口流量监控
  • 狗刨好学吗
  • apktool破解应用内购
  • python 聚类算法包
  • [置顶]星陨计划
  • python中迭代例子
  • python if none
  • jquery设置滚动条高度
  • 消防咨询电话24小时
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设