位置: 编程技术 - 正文

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插件实现超酷消息警告框

  • 税务局退回个税手续费会计分录
  • 装修设计合同印花税
  • 资金账簿印花税减半政策
  • 一般纳税人开具的普票可以抵扣吗
  • 定额税率定义
  • 含税金额和开票金额
  • 养老院营利性与非营利如何认定
  • 单位劳务派遣的比例
  • 广告策划费会计分录
  • 企业所得税跨年度事项
  • 指定会计科目是
  • 增值税一般纳税人税率
  • 机械租赁费发票图片
  • 一般纳税人企业要交哪些税
  • 取得的增值税发票哪些项目必须开具事项
  • 代缴个税税务局奖励款怎么做账?
  • 卖投资性房地产交税
  • 股东转入实收资本
  • 什么经营范围可以开培训费
  • 免租金期间交增值税吗
  • 民营医院实收资本科目
  • 购买的固定资产进项税可以抵扣吗
  • windows11蓝牙不能用
  • 华为鸿蒙系统开发平台
  • 工地购买的零星材料计入什么科目
  • 事业单位的费用
  • 筹建期间的租赁费计入
  • 其他债权投资发生减值会影响所有者权益总额吗
  • 公司向股东借款合法吗
  • 汽车销售公司购买车辆会计科目
  • 除了电脑杀毒软件还有啥
  • 盘盈盘亏固定资产
  • 什么是所得税收入
  • PHP:file_put_contents()的用法_Filesystem函数
  • 领取养老金后每年会增加多少
  • PHP:imagecolorsforindex()的用法_GD库图像处理函数
  • 继续涉入资产后续计量
  • 小微企业延缓缴纳
  • php技术和mysql怎么结合
  • 机器学习分类算法之XGBoost(集成学习算法)
  • 销售提成占比
  • 投资性房地产在资产负债表中的列示
  • 三方债权债务抵销
  • 进口关税账务处理办法
  • 财产保险费用会增加吗
  • 小规模纳税人增值税专用发票税率
  • 甲供材甲方如何缴纳增值税
  • 什么叫做应税劳务
  • 转出未交增值税年末怎么转平
  • 工会经费按什么比例返还
  • 开银行承兑汇票需要多少保证金
  • 村集体经济组织架构
  • 销售返利如何做账
  • 带折扣的发票如何开具
  • 建账的注意事项
  • 房地产开发企业销售自行开发的房地产项目
  • 企业开了发票
  • 深入sql编程开发与优化
  • xp系统打印任务一闪就没有了
  • 苹果mac电脑打不开
  • 虚拟机vmx
  • 微软surface pro 3按键驱动
  • ubuntu和debian哪个稳定
  • centos6.5修改用户名
  • 意大利的福利政策
  • linux网络优化
  • linux zen3
  • linux中make
  • linux三种用户权限
  • 如何在win7上打开win10软件
  • linux c程序开发
  • AddForceAtPosition方法:增加刚体点作用力
  • jquery easy ui
  • python类的理解
  • unity中time.deltatime
  • 基于Android的人脸门禁系统
  • 税务局分类分级
  • 深圳零申报怎么报税的具体流程
  • 贵州税务大厅咨询电话
  • 某地区土拍的楼盘有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设