• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Layui-IconPicker: 基于Layui的图标选择器,支持查询、点击回调等功能,提供手动选择 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

Layui-IconPicker

开源软件地址:

https://gitee.com/wujiawei0926/iconpicker

开源软件介绍:

LayUI拓展组件:IconPicker图标选择器

项目介绍

基于Layui的图标选择器,支持查询、分页、点击回调、渲染成功后回调等功能,提供手动选择图标事件。注:图标来自于Layui2.4.1

效果图

输入图片说明输入图片说明输入图片说明

使用示例

   默认图标:   <input type="text" id="iconPicker" lay-filter="iconPicker" style="display:none;">   自定义图标:   <input type="text" id="iconPicker2" lay-filter="iconPicker2" value="layui-icon-face-smile-fine" style="display:none;">
    layui.use(['iconPicker'], function () {        var iconPicker = layui.iconPicker;                        iconPicker.render({                // 选择器,推荐使用input                elem: '#iconPicker',                // 数据类型:fontClass/unicode,推荐使用fontClass                type: 'fontClass',                // 是否开启搜索:true/false,默认true                search: true,                // 是否开启分页:true/false,默认true                page: true,                // 每页显示数量,默认12                limit: 12,                // 每个图标格子的宽度:'43px'或'20%'                cellWidth: '43px',                // 点击回调                click: function (data) {                    console.log(data);                }                // 渲染成功后的回调                success: function(d) {                    console.log(d);                }            });            /**             * 选中图标 (常用于更新时默认选中图标)             * @param filter lay-filter             * @param iconName 图标名称,自动识别fontClass/unicode             */            iconPicker.checkIcon('iconPicker', 'layui-icon-star-fill');    });

ps. iconPicker.js文件在module/iconPicker目录中

更新日志

  • 2019.04.17:
    • 添加更多演示到demo.html
    • 修复checkIcon后input值不改变的bug
  • 2018.09.25:
    • 添加演示页面demo.html
    • 添加无数据提示
    • 修复下拉三角无法点击的bug
    • 修复点击搜索输入框后选择器关闭的bug
    • 添加渲染成功后的回调
    • 其他的优化
    • 支持修改默认图标:修改方式,给原始input添加value属性,需要与type保持统一

注意事项

  1. 推荐使用fontClass
  2. 可以再需要渲染的元素上添加 style="display:none;" ,保证原始元素不被显示

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap