位置: 编程技术 - 正文

很不错的两款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
  • 履约保证金打到哪个账户
  • 房屋租赁房产税税率是怎样计算的
  • 经营范围没广告怎么办
  • 网络贷款需要缴纳保证金吗
  • 发生销售折让时为什么不冲减成本
  • 租金收入个人所得税
  • 航天金税交499
  • 关于半年度净资产的公告
  • 企业长期待摊费用包括
  • 不需要缴纳企业所得税的企业类型
  • 报价表含税点是什么意思?
  • 个人住房房产税查询
  • 去税务局税种认定需要带什么资料
  • 小规模纳税人未达起征点增值税处理
  • 公休假补贴多少钱
  • 采购国产设备增值税
  • 未抵扣的进项税在资产负债表里怎么填
  • 烟酒专用发票能抵税吗
  • 审图费发票需要备注吗
  • 去年管理费用多记账结账如何调账
  • 购买所有物品都是可以退货吗
  • 一次性伤残补助金由谁支付
  • linux中php的作用
  • win10默认网关自动清空
  • 出差的误餐费会计分录
  • neoCapture.exe - neoCapture是什么进程 有什么用
  • 消防器材怎么做?
  • 车间报销办公用品费
  • 个税扣除项怎么扣除
  • 融资性租赁的优缺点
  • 领用自产库存商品
  • 在建工程减值准备科目编码
  • 公司给员工付个税怎么算
  • 待抵扣进项税额借贷方向
  • 音频的时域波形
  • 随机梯度下降算法优缺点
  • Win11系统自带输入法怎么卸载
  • 预付采购材料款60000元
  • 资产负债表中应交税费为负数是什么意思
  • phpcms专题页面模板
  • 帝国cms调用api接口
  • 帝国cms8.0
  • microsoft SQL server 2008有什么用
  • 设备维修三种形式
  • 商业汇票的承兑银行必须具备下列条件
  • 工会经费是按应付职工薪酬贷方计提吗
  • 起征点与免征额的联系
  • 交了社保里面的钱去哪里了
  • 发票跨年红冲 交税
  • 增资扩股影响原股东的利益吗
  • 什么公司转让需要交税
  • 错开发票所需要提供的资料以及时效要求是?
  • 设置资产处置损益的依据
  • 企业网银的电子对账未签约需要本人去吗
  • 购买商品发生的费用计入
  • 企业内建立小企业属于哪个阶段
  • sqlserver数据库最快存储时间
  • mac怎么隐藏桌面文件
  • mac 电脑出现问题而重新启动
  • linux 命令大全
  • shell中awk命令
  • win8.1怎么用
  • Remoterm.exe - Remoterm是什么进程 有什么用
  • 装系统无法选择
  • windows右键菜单
  • 红石id
  • win7系统出现蓝屏重启怎么办
  • three.js gui
  • android解析xml的方法中,将整个文件加载到内存
  • js自动切换图片效果
  • js的变量
  • python3解析json
  • 使用jquery实现的项目
  • 一个简单的javaweb项目
  • 工商跟税务的区别
  • 劳务报酬所得个人所得税计算方法
  • 网上缴费如何开票
  • 个人所得税没申报会退吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设