mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 22:43:25 +08:00
新增新版layui图标Icon下拉选择器【iconSelected】替换【iconPicker】旧版选择器
This commit is contained in:
大灰灰
@@ -0,0 +1,863 @@
|
||||
/**
|
||||
* @name iconSelected
|
||||
* @author HuangJunjie
|
||||
* @description layui 图标选择器
|
||||
* @version 2.0.0.20210819
|
||||
*/
|
||||
|
||||
layui.define(["layer", "jquery"], function (exports) {
|
||||
var $ = layui.jquery;
|
||||
var prefix = "layui-ext-icon-selected";
|
||||
|
||||
// Nice啊! 还有这种写法吗? 不错哟, 还真能用
|
||||
//layui.link(layui.cache.base + "iconSelected/css/theme.css");
|
||||
|
||||
// 合并成类
|
||||
function IconSelected() {
|
||||
// Layui默认图标字典
|
||||
var layuiIcons = [
|
||||
{
|
||||
classList: "layui-icon layui-icon-heart-fill",
|
||||
name: "实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-heart",
|
||||
name: "空心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-light",
|
||||
name: "亮度/晴",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-time",
|
||||
name: "时间/历史",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-bluetooth",
|
||||
name: "蓝牙",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-at",
|
||||
name: "@艾特",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-mute",
|
||||
name: "静音",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-mike",
|
||||
name: "录音/麦克风",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-key",
|
||||
name: "密钥/钥匙",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-gift",
|
||||
name: "礼物/活动",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-email",
|
||||
name: "邮箱",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-rss",
|
||||
name: "RSS",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-wifi",
|
||||
name: "WiFi",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-logout",
|
||||
name: "退出/注销",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-android",
|
||||
name: "Android 安卓",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-ios",
|
||||
name: "Apple IOS 苹果",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-windows",
|
||||
name: "Windows",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-transfer",
|
||||
name: "穿梭框",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-service",
|
||||
name: "客服",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-subtraction",
|
||||
name: "减",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-addition",
|
||||
name: "加",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-slider",
|
||||
name: "滑块",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-print",
|
||||
name: "打印",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-export",
|
||||
name: "导出",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-cols",
|
||||
name: "列",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-screen-restore",
|
||||
name: "退出全屏",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-screen-full",
|
||||
name: "全屏",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-rate-half",
|
||||
name: "半星",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-rate",
|
||||
name: "星星-空心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-rate-solid",
|
||||
name: "星星-实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-cellphone",
|
||||
name: "手机",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-vercode",
|
||||
name: "验证码",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-login-wechat",
|
||||
name: "微信",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-login-qq",
|
||||
name: "QQ",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-login-weibo",
|
||||
name: "微博",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-password",
|
||||
name: "密码",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-username",
|
||||
name: "用户名",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-refresh-3",
|
||||
name: "刷新-粗",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-auz",
|
||||
name: "授权",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-spread-left",
|
||||
name: "左向右伸缩菜单",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-shrink-right",
|
||||
name: "右向左伸缩菜单",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-snowflake",
|
||||
name: "雪花",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-tips",
|
||||
name: "提示说明",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-note",
|
||||
name: "便签",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-home",
|
||||
name: "主页",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-senior",
|
||||
name: "高级",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-refresh",
|
||||
name: "刷新",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-refresh-1",
|
||||
name: "刷新",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-flag",
|
||||
name: "旗帜",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-theme",
|
||||
name: "主题",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-notice",
|
||||
name: "消息-通知",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-website",
|
||||
name: "网站",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-console",
|
||||
name: "控制台",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-face-surprised",
|
||||
name: "表情-惊讶",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-set",
|
||||
name: "设置-空心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-template-1",
|
||||
name: "模板",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-app",
|
||||
name: "应用",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-template",
|
||||
name: "模板",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-praise",
|
||||
name: "赞",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-tread",
|
||||
name: "踩",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-male",
|
||||
name: "男",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-female",
|
||||
name: "女",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-camera",
|
||||
name: "相机-空心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-camera-fill",
|
||||
name: "相机-实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-more",
|
||||
name: "菜单-水平",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-more-vertical",
|
||||
name: "菜单-垂直",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-rmb",
|
||||
name: "金额-人民币",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-dollar",
|
||||
name: "金额-美元",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-diamond",
|
||||
name: "钻石-等级",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-fire",
|
||||
name: "火",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-return",
|
||||
name: "返回",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-location",
|
||||
name: "位置-地图",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-read",
|
||||
name: "办公-阅读",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-survey",
|
||||
name: "调查",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-face-smile",
|
||||
name: "表情-微笑",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-face-cry",
|
||||
name: "表情-哭泣",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-cart-simple",
|
||||
name: "购物车",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-cart",
|
||||
name: "购物车",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-next",
|
||||
name: "下一页",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-prev",
|
||||
name: "上一页",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-upload-drag",
|
||||
name: "上传-空心-拖拽",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-upload",
|
||||
name: "上传-实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-download-circle",
|
||||
name: "下载-圆圈",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-component",
|
||||
name: "组件",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-file-b",
|
||||
name: "文件-粗",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-user",
|
||||
name: "用户",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-find-fill",
|
||||
name: "发现-实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop",
|
||||
name: "loading",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-loading-1 layui-anim layui-anim-rotate layui-anim-loop",
|
||||
name: "loading",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-add-1",
|
||||
name: "添加",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-play",
|
||||
name: "播放",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-pause",
|
||||
name: "暂停",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-headset",
|
||||
name: "音频-耳机",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-video",
|
||||
name: "视频",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-voice",
|
||||
name: "语音-声音",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-speaker",
|
||||
name: "消息-通知-喇叭",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-fonts-del",
|
||||
name: "删除线",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-fonts-code",
|
||||
name: "代码",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-fonts-html",
|
||||
name: "HTML",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-fonts-strong",
|
||||
name: "字体加粗",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-unlink",
|
||||
name: "删除链接",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-picture",
|
||||
name: "图片",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-link",
|
||||
name: "链接",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-face-smile-b",
|
||||
name: "表情-笑-粗",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-align-left",
|
||||
name: "左对齐",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-align-right",
|
||||
name: "右对齐",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-align-center",
|
||||
name: "居中对齐",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-fonts-u",
|
||||
name: "字体-下划线",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-fonts-i",
|
||||
name: "字体-斜体",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-tabs",
|
||||
name: "Tabs 选项卡",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-radio",
|
||||
name: "单选框-选中",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-circle",
|
||||
name: "单选框-候选",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-edit",
|
||||
name: "编辑",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-share",
|
||||
name: "分享",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-delete",
|
||||
name: "删除",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-form",
|
||||
name: "表单",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-cellphone-fine",
|
||||
name: "手机-细体",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-dialogue",
|
||||
name: "聊天 对话 沟通",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-fonts-clear",
|
||||
name: "文字格式化",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-layer",
|
||||
name: "窗口",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-date",
|
||||
name: "日期",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-water",
|
||||
name: "水 下雨",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-code-circle",
|
||||
name: "代码-圆圈",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-carousel",
|
||||
name: "轮播组图",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-prev-circle",
|
||||
name: "翻页",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-layouts",
|
||||
name: "布局",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-util",
|
||||
name: "工具",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-templeate-1",
|
||||
name: "选择模板",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-upload-circle",
|
||||
name: "上传-圆圈",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-tree",
|
||||
name: "树",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-table",
|
||||
name: "表格",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-chart",
|
||||
name: "图表",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-chart-screen",
|
||||
name: "图标 报表 屏幕",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-engine",
|
||||
name: "引擎",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-triangle-d",
|
||||
name: "下三角",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-triangle-r",
|
||||
name: "右三角",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-file",
|
||||
name: "文件",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-set-sm",
|
||||
name: "设置-小型",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-reduce-circle",
|
||||
name: "减少-圆圈",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-add-circle",
|
||||
name: "添加-圆圈",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-404",
|
||||
name: "404",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-about",
|
||||
name: "关于",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-up",
|
||||
name: "箭头 向上",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-down",
|
||||
name: "箭头 向下",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-left",
|
||||
name: "箭头 向左",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-right",
|
||||
name: "箭头 向右",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-circle-dot",
|
||||
name: "圆点",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-search",
|
||||
name: "搜索",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-set-fill",
|
||||
name: "设置-实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-group",
|
||||
name: "群组",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-friends",
|
||||
name: "好友",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-reply-fill",
|
||||
name: "回复 评论 实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-menu-fill",
|
||||
name: "菜单 隐身 实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-log",
|
||||
name: "记录",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-picture-fine",
|
||||
name: "图片-细体",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-face-smile-fine",
|
||||
name: "表情-笑-细体",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-list",
|
||||
name: "列表",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-release",
|
||||
name: "发布 纸飞机",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-ok",
|
||||
name: "对 OK",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-help",
|
||||
name: "帮助",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-chat",
|
||||
name: "客服",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-top",
|
||||
name: "top 置顶",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-star",
|
||||
name: "收藏-空心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-star-fill",
|
||||
name: "收藏-实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-close-fill",
|
||||
name: "关闭-实心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-close",
|
||||
name: "关闭-空心",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-ok-circle",
|
||||
name: "正确",
|
||||
},
|
||||
{
|
||||
classList: "layui-icon layui-icon-add-circle-fine",
|
||||
name: "添加-圆圈-细体",
|
||||
},
|
||||
];
|
||||
|
||||
// 生成样式
|
||||
function generatorClass(className) {
|
||||
return [prefix, className].join("-");
|
||||
}
|
||||
|
||||
// 入口
|
||||
function render(elem, opts) {
|
||||
if (!opts) opts = {};
|
||||
|
||||
// 初始化必要DOM
|
||||
var $elems = $(elem);
|
||||
|
||||
$elems.each(function () {
|
||||
var $elem = $(this);
|
||||
|
||||
$elem.hide();
|
||||
var $body = $("body");
|
||||
var $parent = $elem.parent();
|
||||
|
||||
// 初始化配置
|
||||
var width = opts.width || 300;
|
||||
var offsetX = opts.offsetX || 0;
|
||||
var offsetY = opts.offsetY || 5;
|
||||
var icons = opts.icons || layuiIcons;
|
||||
var placeholder = $elem.attr("placeholder") || opts.placeholder || "请选择";
|
||||
var value = $elem.val() || opts.value;
|
||||
var zIndex = opts.zIndex || 19961005;
|
||||
|
||||
// 托管事件
|
||||
function activeEvent(name, event, data) {
|
||||
if (opts && opts.event && typeof opts.event[name] == "function") {
|
||||
opts.event[name](event, data);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新值
|
||||
function updateValueByClassList(classList) {
|
||||
for (var i = 0; i < icons.length; i++) {
|
||||
var icon = icons[i];
|
||||
|
||||
if (icon.classList === classList) {
|
||||
// 处理选中效果
|
||||
var $icons = $icon_container.find("." + generatorClass("item"));
|
||||
$icons.removeClass("selected");
|
||||
$icons.eq(i).addClass("selected");
|
||||
|
||||
// 清空输入框
|
||||
$input_dom.empty();
|
||||
|
||||
// 设置值
|
||||
var $select = $('<div class="' + generatorClass("selected-value") + '"></div>');
|
||||
var $i = $('<i class="' + icon.classList + '"></i>').addClass(generatorClass("icon"));
|
||||
var $name = $('<div class="' + generatorClass("name") + '">' + icon.name + "</div>");
|
||||
$select.append($i).append($name);
|
||||
$input_dom.append($select).append($icon_down);
|
||||
$icon_container.removeClass("show");
|
||||
$elem.val(classList);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建虚拟DOM
|
||||
var $placeholder = $('<span class="placeholder">' + placeholder + "</span>");
|
||||
var $input_dom = $('<div class="' + generatorClass("input") + '"></div>');
|
||||
var $icon_down = $('<i class="layui-icon layui-icon-triangle-d"></i>');
|
||||
var $icon_container = $('<div class="' + generatorClass("container") + '"></div>');
|
||||
$icon_container.css({
|
||||
zIndex: zIndex,
|
||||
width: width,
|
||||
marginTop: offsetY,
|
||||
marginLeft: offsetX,
|
||||
});
|
||||
$input_dom.append($placeholder).append($icon_down);
|
||||
$parent.append($input_dom).append($icon_container);
|
||||
|
||||
// 点击body移除弹层
|
||||
$body.click(function () {
|
||||
$icon_container.removeClass("show");
|
||||
});
|
||||
|
||||
$input_dom.click(function (e) {
|
||||
e.stopPropagation();
|
||||
$icon_container.hasClass("show") ? $icon_container.removeClass("show") : $icon_container.addClass("show");
|
||||
});
|
||||
|
||||
if (!opts) opts = {};
|
||||
|
||||
icons.forEach(function (icon, index) {
|
||||
var $icon = $('<div class="' + generatorClass("item") + '"></div>');
|
||||
var $i = $('<i class="' + icon.classList + '"></i>').addClass(generatorClass("icon"));
|
||||
var $name = $('<div class="' + generatorClass("name") + '">' + icon.name + "</div>");
|
||||
$icon
|
||||
.append($i)
|
||||
.append($name)
|
||||
.click(function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
var classList = icons[index].classList;
|
||||
updateValueByClassList(classList);
|
||||
activeEvent("select", e, {
|
||||
index: index,
|
||||
icons: icons,
|
||||
icon: classList,
|
||||
});
|
||||
});
|
||||
|
||||
$icon_container.append($icon);
|
||||
});
|
||||
|
||||
updateValueByClassList(value);
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
function insertIcon(slot, icons) {
|
||||
icons.forEach(function (icon) {
|
||||
switch (slot) {
|
||||
case 1:
|
||||
layuiIcons.unshift(icon);
|
||||
break;
|
||||
case -1:
|
||||
layuiIcons.push(icon);
|
||||
break;
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
function addIcon(name, classList) {
|
||||
insertIcon(-1, [
|
||||
{
|
||||
name: name,
|
||||
classList: classList,
|
||||
},
|
||||
]);
|
||||
return this;
|
||||
}
|
||||
|
||||
function addIcons(icons) {
|
||||
insertIcon(-1, icons || []);
|
||||
return this;
|
||||
}
|
||||
|
||||
function addIconBefore(name, classList) {
|
||||
insertIcon(1, [
|
||||
{
|
||||
name: name,
|
||||
classList: classList,
|
||||
},
|
||||
]);
|
||||
return this;
|
||||
}
|
||||
|
||||
function addIconsBefore(icons) {
|
||||
insertIcon(1, icons || []);
|
||||
return this;
|
||||
}
|
||||
|
||||
this.render = render;
|
||||
this.icons = layuiIcons;
|
||||
this.addIcon = addIcon;
|
||||
this.addIcons = addIcons;
|
||||
this.addIconBefore = addIconBefore;
|
||||
this.addIconsBefore = addIconsBefore;
|
||||
}
|
||||
|
||||
exports("iconSelected", new IconSelected());
|
||||
});
|
||||
@@ -1105,4 +1105,122 @@ xm-select .xm-body .xm-option.hide-icon.selected {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
}
|
||||
.layui-ext-icon-selected-input {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
padding: 0px 10px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
border-color: #eee;
|
||||
border-radius: 2px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.layui-ext-icon-selected-input > .placeholder {
|
||||
color: #757575;
|
||||
}
|
||||
.layui-ext-icon-selected-input > .layui-icon {
|
||||
margin-left: 5px;
|
||||
color: #757575;
|
||||
}
|
||||
.layui-ext-icon-selected-input:hover {
|
||||
border-color: #d2d2d2;
|
||||
}
|
||||
.layui-ext-icon-selected-container {
|
||||
padding: 5px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 100%;
|
||||
left: 0px;
|
||||
margin-top: 5px;
|
||||
height: 240px;
|
||||
width: 300px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
border-color: #eee;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.layui-ext-icon-selected-container.show {
|
||||
display: block;
|
||||
animation: layui-ext-icon-selected-icons-animate 0.2s linear;
|
||||
}
|
||||
.layui-ext-icon-selected-container::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.layui-ext-icon-selected-container::-webkit-scrollbar-thumb {
|
||||
border-radius: 2.5px;
|
||||
background-color: #009688;
|
||||
}
|
||||
.layui-ext-icon-selected-item {
|
||||
float: left;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
padding: 10px 5px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
color: #888888;
|
||||
transition: 0.2s;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.layui-ext-icon-selected-item:hover,
|
||||
.layui-ext-icon-selected-item.selected {
|
||||
background-color: #f2f2f2;
|
||||
color: #009688;
|
||||
}
|
||||
.layui-ext-icon-selected-item:hover .layui-icon,
|
||||
.layui-ext-icon-selected-item.selected .layui-icon {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.layui-ext-icon-selected-item .layui-ext-icon-selected-icon {
|
||||
transition: 0.2s;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.layui-ext-icon-selected-item .layui-ext-icon-selected-name {
|
||||
padding-top: 15px;
|
||||
font-size: 12px;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.layui-ext-icon-selected-selected-value {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layui-ext-icon-selected-selected-value .layui-ext-icon-selected-icon,
|
||||
.layui-ext-icon-selected-selected-value .layui-ext-icon-selected-name {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
.layui-ext-icon-selected-selected-value .layui-ext-icon-selected-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.layui-ext-icon-selected-selected-value .layui-ext-icon-selected-name {
|
||||
margin-left: 5px;
|
||||
}
|
||||
@keyframes layui-ext-icon-selected-icons-animate {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
@@ -378,3 +378,38 @@ xm-select .xm-label .xm-label-block, xm-select .xm-body .xm-option.hide-icon.sel
|
||||
.layui-form-item label { width: 100px; }
|
||||
.btn-delete { position: absolute; right: 30px; top: 30px; }
|
||||
}
|
||||
|
||||
//Layui 图标选择器
|
||||
.layui-ext-icon-selected-input { height: 38px; line-height: 38px; padding: 0px 10px; display: inline-block; cursor: pointer; border-width: 1px; border-style: solid; background-color: #fff; border-color: #eee; border-radius: 2px; transition: 0.2s;
|
||||
|
||||
> .placeholder { color: #757575; }
|
||||
|
||||
> .layui-icon { margin-left: 5px; color: #757575; }
|
||||
}
|
||||
.layui-ext-icon-selected-input:hover { border-color: #d2d2d2; }
|
||||
.layui-ext-icon-selected-container { padding: 5px; display: none; position: absolute; z-index: 999; top: 100%; left: 0px; margin-top: 5px; height: 240px; width: 300px; overflow-x: hidden; overflow-y: auto; border-width: 1px; border-style: solid; background-color: #fff; border-color: #eee; border-radius: 2px; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
|
||||
&.show { display: block; animation: layui-ext-icon-selected-icons-animate 0.2s linear; }
|
||||
&::-webkit-scrollbar { width: 5px; background-color: #f6f6f6; }
|
||||
&::-webkit-scrollbar-thumb { border-radius: 2.5px; background-color: #009688; }
|
||||
}
|
||||
|
||||
.layui-ext-icon-selected-item { float: left; width: 25%; text-align: center; padding: 10px 5px; box-sizing: border-box; cursor: pointer; color: #888888; transition: 0.2s; border-radius: 5px;
|
||||
&:hover,
|
||||
&.selected { background-color: #f2f2f2; color: #009688;
|
||||
.layui-icon { transform: scale(1.2); }
|
||||
}
|
||||
.layui-ext-icon-selected-icon { transition: 0.2s; display: inline-block; height: 30px; line-height: 30px; font-size: 24px; }
|
||||
.layui-ext-icon-selected-name { padding-top: 15px; font-size: 12px; height: 1em; line-height: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 100%; }
|
||||
}
|
||||
|
||||
.layui-ext-icon-selected-selected-value { float: left; display: inline-block; overflow: hidden;
|
||||
.layui-ext-icon-selected-icon,
|
||||
.layui-ext-icon-selected-name { display: inline-block; float: left; }
|
||||
.layui-ext-icon-selected-icon { font-size: 18px; }
|
||||
.layui-ext-icon-selected-name { margin-left: 5px; }
|
||||
}
|
||||
|
||||
@keyframes layui-ext-icon-selected-icons-animate {
|
||||
0% { opacity: 0; transform: translateY(15px); }
|
||||
100% { opacity: 1; transform: translateY(0px); }
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -91,36 +91,27 @@
|
||||
layui.data.done = function (d) {
|
||||
//开启调试情况下获取接口赋值数据
|
||||
if (debug) { console.log(d.params.data); }
|
||||
layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'xmSelect', 'iconPicker'],
|
||||
layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'xmSelect', 'iconSelected'],
|
||||
function () {
|
||||
var $ = layui.$
|
||||
, form = layui.form
|
||||
, admin = layui.admin
|
||||
, laydate = layui.laydate
|
||||
, upload = layui.upload
|
||||
, iconPicker = layui.iconPicker
|
||||
, iconSelected = layui.iconSelected
|
||||
, cropperImg = layui.cropperImg
|
||||
, xmSelect = layui.xmSelect;
|
||||
|
||||
|
||||
iconPicker.render({
|
||||
elem: '.menuIcon'
|
||||
, style: 'color: #5FB878;'
|
||||
, placeholder: ''
|
||||
//,isSplit: true
|
||||
, page: true
|
||||
//,search: false
|
||||
, click: function (obj) {
|
||||
console.log(obj)
|
||||
//this.elem.val(obj.className)
|
||||
}
|
||||
, ready: function () {
|
||||
console.log(1)
|
||||
}
|
||||
iconSelected.render(".menuIcon", {
|
||||
event: {
|
||||
select(event, data) {
|
||||
console.log("选中的图标数据", { event, data });
|
||||
},
|
||||
},
|
||||
width: '300',
|
||||
placeholder: '请点击选择图标'
|
||||
});
|
||||
|
||||
|
||||
|
||||
var list = [];
|
||||
let item = {
|
||||
menuName: "无上级",
|
||||
|
||||
@@ -21,10 +21,10 @@
|
||||
<div class="layui-form-item">
|
||||
<label for="menuIcon" class="layui-form-label">菜单图标</label>
|
||||
<div class="layui-input-block">
|
||||
<input name="menuIcon" id="menuIcon" value="{{d.params.data.menuIcon || '' }}" class="layui-input menuIcon" lay-reqText="请输入菜单图标" placeholder="请输入菜单图标" lay-options="{isSplit: true, replace: 'icon'}" />
|
||||
<input name="menuIcon" id="menuIcon" value="{{d.params.data.menuIcon || '' }}" class="layui-input menuIcon" lay-reqText="请输入菜单图标" placeholder="请输入菜单图标" lay-options="{isSplit: true, replace: 'icon'}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-form-item" pane>
|
||||
<label for="menuType" class="layui-form-label layui-form-required">菜单类型</label>
|
||||
<div class="layui-input-block">
|
||||
@@ -32,7 +32,7 @@
|
||||
<input name="menuType" type="radio" value="1" title="按钮" {{ d.params.data.menuType ? 'checked' : '' }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label for="path" class="layui-form-label">菜单Url</label>
|
||||
<div class="layui-input-block">
|
||||
@@ -90,35 +90,28 @@
|
||||
layui.data.sendParams = function (d) {
|
||||
//开启调试情况下获取接口赋值数据
|
||||
if (debug) { console.log(d.params.data); }
|
||||
layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'xmSelect', 'iconPicker'],
|
||||
layui.use(['admin', 'form', 'laydate', 'upload', 'coreHelper', 'xmSelect', 'iconSelected'],
|
||||
function () {
|
||||
var $ = layui.$
|
||||
, form = layui.form
|
||||
, admin = layui.admin
|
||||
, laydate = layui.laydate
|
||||
, upload = layui.upload
|
||||
, iconPicker = layui.iconPicker
|
||||
, iconSelected = layui.iconSelected
|
||||
, cropperImg = layui.cropperImg
|
||||
, xmSelect = layui.xmSelect;
|
||||
|
||||
|
||||
iconPicker.render({
|
||||
elem: '.menuIcon'
|
||||
, style: 'color: #5FB878;'
|
||||
, placeholder: d.params.data.menuIcon
|
||||
//,isSplit: true
|
||||
, page: true
|
||||
//,search: false
|
||||
, click: function (obj) {
|
||||
console.log(obj)
|
||||
//this.elem.val(obj.className)
|
||||
}
|
||||
, ready: function () {
|
||||
console.log(1)
|
||||
}
|
||||
iconSelected.render(".menuIcon", {
|
||||
event: {
|
||||
select(event, data) {
|
||||
console.log("选中的图标数据", { event, data });
|
||||
},
|
||||
},
|
||||
width: '300',
|
||||
value: d.params.data.menuIcon,
|
||||
placeholder: '请点击选择图标'
|
||||
});
|
||||
|
||||
|
||||
var list = [];
|
||||
let item = {
|
||||
menuName: "无上级",
|
||||
|
||||
Reference in New Issue
Block a user