位置: 编程技术 - 正文

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

  • 汽车增值税是企业交给国家的税
  • 缴纳上一年所得税附件是哪些科目
  • 城镇土地使用税的计算公式
  • 财务人员办理会计业务
  • 有谁用过金蝶kis云专业版
  • 返岗补贴怎么办理
  • 政府补贴是否要交企业所得税
  • 公对公退款要交税吗
  • 土地增值税二次清算规定
  • 零星物流运费无法支付
  • 信用减值损失可以并入哪个科目
  • 工程检测单位
  • 新公司注册资金需要实缴吗
  • 发放给员工的通讯费要上个税吗
  • 固定资产出售损失属于广义费用吗
  • 公司收到转账支票怎么盖章
  • 刚开始建账银行有存款怎么录
  • 保安服务专票是多少税点
  • 记账汇率是什么意思
  • 过路过桥费抵扣2021新规定
  • 计提增值税电费怎么算
  • 资产负债表季度申报期末余额怎么填
  • 报关单和发票上的公司抬头不一致
  • 纳税期限变更需要什么
  • bios设置密码有什么用
  • 在境外缴纳的增值税税率
  • 网络平台的收入怎么算
  • 建筑业的账务处理办法
  • 分包工程的税金怎样处理
  • 增值税如何在报表里填写
  • 购销合同印花税计算方法
  • 汉密尔顿岛在哪里
  • 一朵牛肝菌 (© vnosokin/Getty Images)
  • 浏览器你
  • torch.nn.functional.interpolate()函数详解
  • 《设计模式》
  • web2.0核心
  • apache php mysql开发环境安装教程
  • 购入需要安装的固定资产应先通过什么账户
  • 没有抄报税就申报了怎么办
  • 免税农产品怎么抵扣进项税
  • 终止劳动合同赔偿N+1
  • 增值税抵扣明细网络超时怎么处理
  • 汇兑损益的现金流量
  • 增值税和个人所得税怎么算
  • 设备出租当月要确认收入吗
  • 一般纳税人一直零申报会怎么样
  • 一次性开票分期收入账务处理
  • 中标服务费如何赋码
  • 固定资产已提完折旧,但仍在使用,需要定期清理吗?
  • 文化事业建设费计入什么科目
  • 应交税金应交增值税
  • 租厂房需要办环评注意事项
  • 预收账款和预付账款怎么理解
  • 信用卡产生滞纳金会影响信用吗
  • 税盘不缴费会怎么样
  • 金蝶多核算项目怎么查一个项目下的其他项目
  • 购进农产品直接销售核定扣除
  • 施工企业应收账款确认依据
  • 记一次因线上mysql优化器误判引起慢查询事件
  • Fedora25踏上Wayland的路上讲解
  • Win10/Win8.1 PC版WhatsApp更新:新的emoji表情符号
  • mac安装路径选择
  • macos终端删除文件
  • win7系统设置wifi热点
  • win7无法运行
  • win10打开软件时卡住
  • ubuntu 20.04 unity
  • centos清理缓存
  • 浅谈linux的发展方向和应用范围
  • win10在哪里找
  • 微软星期二补丁
  • OpenCV-2.4.3+VS2010+Win7(32位)安装与配置
  • jquery page
  • 果断收藏9个Javascript代码高亮脚本
  • js构造器constructor
  • 国家税务局申请电子发票怎么申请
  • 地方税务局网上申报
  • 完税凭证验证码
  • 税务总局广西
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设