位置: 编程技术 - 正文

很不错的两款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)

  • 建筑业固定资产折旧费用科目是什么
  • 税务清算需要什么条件
  • 暂估的应付账款无法开具发票在金蝶云星空怎么操作
  • 单位承担的社保费用计入应付职工薪酬科目吗
  • 金蝶未结账是否可以重新起账
  • 进项税抵扣
  • 住宿发票税点为什么有6%和3%的区别
  • 企业承担的员工在职培训成本包括
  • 每月末计提利息分录
  • 货币性短期薪酬影响损益的金额
  • 建筑业发票可以在备注里加备注么
  • 存货盘亏怎么做账务处理
  • 小规模季度销售超过30万怎么纳税
  • 进项发票和销项发票金额相同还需要交税金吗
  • 有产权车位转让需要什么手续和费用
  • 员工股权激励会计处理分录
  • 个人如何申报初级医师职称
  • 建筑设计公司的账务处理
  • 保安费用分录
  • 资产利润率和资本利润率监管标准
  • 固定资产折旧方法的选择
  • 冲办公费会计分录
  • 如何通过无线路由器连接打印机
  • 以前年度未入账固定资产账务处理
  • 发行债券的会计分录摊销
  • 防伪码查一次还能查第二次吗
  • 员工出差垫钱
  • 员工旅游的费用可以税前扣除吗
  • detr训练自己的数据集
  • javascript怎么用
  • php oauth2 单点登录
  • 以银行存款交纳欠缴税金
  • python27文件夹
  • Testing Applications with WebTest¶
  • <四>2:掌握Const 与一二级指针结合应用
  • 织梦模板首页logo修改
  • 资本成本在财务报表中怎么体现
  • 事务所企业所得税
  • 陈列费计入什么科目
  • 无资产可执行啥意思
  • 企业一般存款账户和基本存款账户的区别
  • 教育费附加计费单位
  • 私营企业员工享受探亲假吗
  • 内账中已交的增值税在哪
  • 财务费用手续费借贷方向
  • 企业利润分配明细表
  • 计入固定资产的条件
  • 企业清算的会计处理
  • 如何解决局域网问题
  • mysql 5.7.21安装教程
  • linux锁住用户
  • ubuntu右上角没有键盘
  • 联想电脑的样子
  • linux 应用程序
  • linux系统干嘛的
  • windows7怎么卸载
  • centos做bond4
  • win8电脑卡怎么办简单步骤
  • win7升级win10系统版本软件还有吗
  • pptd40nt.exe是什么进程 有什么用 pptd40nt进程查询
  • win8怎么启动资源管理器
  • windows10移动
  • react常用框架
  • HttpURLConnection连接 详解
  • Android游戏开发实践指南
  • css如何设置div位置
  • Strumpy Shader Editor入门教程
  • 什么是漫反射贴图
  • Node.js中的事件循环是什么
  • <2> unity3d 分包与上google play 之具体实战
  • express.js教程
  • javascript基础编程
  • nodejs dgram
  • unityui
  • unity camera fov
  • jquery的实现原理
  • javascript总结笔记
  • 江西省联考成绩查询系统入口官网
  • 江苏省国家税务局电话号码
  • 发票怎样上传?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设