Layui圖示選擇器，Layui下拉選擇圖示

layui下拉圖示

效果圖

元件下載下傳

gitee下載下傳：https://gitee.com/layui-exts/icon-selected

API參考：https://layui-exts.gitee.io/icon-selected/#/?id=api

或者

網盤下載下傳，連結: https://pan.baidu.com/s/1FR7WEcJkzQlEHaK8sNnDlw 提取碼: d731

使用方式

JS引入元件

layui.config({
    base: $projectPath+"/js/util/layui-module/"
}).extend({
    treeSelect: "treeSelect",
    treeTable: "treeTable",
    iconSelected: "iconSelected/js/index", // 這個是圖示選擇器元件
});

html 中

<link rel="stylesheet" href="${projectPath}/js/util/layui-module/iconSelected/css/theme.css" />
<!-- 這個是包在layui-form裡的 -->
<input type="text" name="iconCls" id="iconCls" value="layui-icon layui-icon-username" class="layui-input" placeholder="請選擇圖示" >

JS 中

layui.use(["iconSelected"], function() {

	var iconSelected = layui.iconSelected;
	
    // 圖示選擇器初始化
    iconSelected.render("#iconCls", {
        event: {
            select(event, data) {
                console.log("選中的圖示資料", { event, data });
            },
        },
    });
    // 初始化且指派
    //iconSelected.render("#iconCls", {value: res.iconCls});
    
});

/**
 * 彈框中如果出現多個圖示選擇器的話使用這種方式-彈框成功回調方法内使用
 * 初始化圖示選擇器--------------------------------------------------------------------------------
 */
function initIconSel(icon){
	$(".layui-ext-icon-selected-input").remove();
	$(".layui-ext-icon-selected-container").remove();
	iconSelected.render("#iconCls", {value: icon});
}

以上即可實作

下面兩個參考

1、非彈框模式下使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="./css/example.css" />
        <script src="./libs/layui/layui.js"></script>
        <link rel="stylesheet" href="./libs/layui/css/layui.css" />
        <title>iconSelected - 圖示選擇器</title>
    </head>
    <body>
        <div class="board">
            <h1 class="title">效果展示</h1>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-form-label">選擇圖示1</div>
                    <div class="layui-input-block">
                        <input type="text" name="icon1" value="layui-icon layui-icon-username" placeholder="請選擇" maxlength="16" autocomplete="off" class="layui-input layui-select-icon" id="icon" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">選擇圖示2</div>
                    <div class="layui-input-block">
                        <input type="text" name="icon2" value="layui-icon layui-icon-light" placeholder="請選擇" maxlength="16" autocomplete="off" class="layui-input layui-select-icon" id="icon" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">名稱</div>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="使用者管理" autofocus maxlength="16" autofocus required lay-verify="required" autocomplete="off" class="layui-input" placeholder="名稱" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">備注資訊</div>
                    <div class="layui-input-block">
                        <textarea name="remark" rows="3" placeholder="可留白" class="layui-textarea" style="resize: none"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="submit" value="儲存" class="layui-btn" lay-submit />
                        <input type="reset" value="重新填寫" class="layui-btn layui-btn-primary" />
                    </div>
                </div>
            </div>
        </div>
        <script>
            layui
                .config({
                    base: "./libs/layui_exts/",
                })
                .extend({
                    iconSelected: "iconSelected/js/index",
                });

            layui.use(["layer", "iconSelected", "form"], function () {
                var iconSelected = layui.iconSelected;
                var layer = layui.layer;
                var form = layui.form;

                /**
                 * v2 版本開始保持跟 layui 官方寫法同步
                 * 使用 render 方法渲染, 并且 v2 開始支援 class 批量綁定
                 * v1 版本僅支援 id 綁定, 且初始化是 init
                 * 請注意辨識, v2版本于2021年8月19日釋出
                 * 慶祝碼雲開放 Gitee Page 功能
                 * 本組織下所有開源擴充都會于近期同步更新到v2
                 * 都将統一初始化函數為  render
                 */
                iconSelected.render(".layui-select-icon", {
                    event: {
                        select(event, data) {
                            console.log("選中的圖示資料", { event, data });
                        },
                    },
                });

                form.on("submit", function (data) {
                    layer.open({
                        title: "送出内容",
                        content: '<pre style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; font-family: Consolas;">' + JSON.stringify(data.field, null, 4) + "</pre>",
                    });
                    return false;
                });
            });
        </script>
    </body>
</html>

2、彈框模式下使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="./css/example.css"/>
    <script src="./libs/layui/layui.js"></script>
    <link rel="stylesheet" href="./libs/layui/css/layui.css"/>
    <style>
        /*注意!*/
        /*如果是嵌套在layer内, 需要覆寫掉layer彈層預設的overflow: auto;*/
        /*否則會出現滾動條,并且顯示不全*/
        .layui-layer-page .layui-layer-content {
            overflow: visible;
        }
    </style>
    <title>iconSelected - 圖示選擇器</title>
</head>
<body>
<div class="board">
    <h1 class="title">效果展示</h1>
    <h3 style="text-align: center; margin-bottom: 30px;">示例2: 嵌套在普通彈層内使用</h3>
    <button id="show-layer" class="layui-btn layui-btn-fluid">打開彈層</button>
</div>

<script type="text/html" id="tpl">
    <div class="layui-form" style="padding: 15px;">
        <div class="layui-form-item">
            <div class="layui-form-label">選擇圖示</div>
            <div class="layui-input-block">
                <input type="text" name="icon" value="layui-icon layui-icon-username" placeholder="請選擇" maxlength="16" autocomplete="off" class="layui-input" id="icon"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label">名稱</div>
            <div class="layui-input-block">
                <input type="text" name="name" value="使用者管理" autofocus maxlength="16" autofocus required lay-verify="required" autocomplete="off" class="layui-input" placeholder="名稱"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label">排序号</div>
            <div class="layui-input-block">
                <input type="text" name="sort" value="10" placeholder="序号" class="layui-input" id="sort"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label">備注資訊</div>
            <div class="layui-input-block">
                <textarea name="remark" rows="3" placeholder="可留白" class="layui-textarea" style="resize: none;"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="submit" value="儲存" class="layui-btn" lay-submit/>
                <input type="reset" value="重新填寫" class="layui-btn layui-btn-primary"/>
            </div>
        </div>
    </div>
</script>
<script>
    layui
        .config({
            base: "./libs/layui_exts/",
        })
        .extend({
            iconSelected: "iconSelected/js/index",
        });

    layui.use(["layer", "iconSelected", "form", "jquery"], function () {
        var iconSelected = layui.iconSelected;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.$;

        $("#show-layer").click(function () {
            layer.open({
                type: 1,
                title: "送出表單",
                btn: false,
                content: $("#tpl").text(),
                success: function () {
                    iconSelected.render("#icon", {
                        event: {
                            select(event, data) {
                                console.log("選中的圖示資料", {event, data});
                            },
                        },
                    });

                    form.on("submit", function (data) {
                        layer.open({
                            title: "送出内容",
                            content: '<pre style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; font-family: Consolas;">' + JSON.stringify(data.field, null, 4) + "</pre>",
                        });
                        return false;
                    });
                }
            })
        })


    });
</script>
</body>
</html>

API

render

初始化

在 v1 版本為 init

這就沒啥好說的了

如果需要添加圖示請保證該 API 在最後面調用!
icons

取出預設的圖示資料

即 layui 官方圖示清單
addIcon(name,classList)

添加一個圖示(在尾部)

參數分别為:

顯示的名字

圖示的樣式
addIcons(icons)

批量添加圖示(在尾部)

參數為數組

你需要自行維護數組内部的鍵值對, 確定鍵值對符合規範格式

即: name=名字, classList=圖示
addIconBefore(name,classList)

添加一個圖示(在頭部)

其他的就跟 addIcon 一樣了
addIconsBefore(icons)

批量添加圖示(在頭部)

其它的就跟 addIcons 一樣了

Layui圖示選擇器，Layui下拉選擇圖示

layui下拉圖示

使用方式

繼續閱讀

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

門戶通專訪草根站長九天狼：做站貴在堅持

[轉]如何成長為一名全棧工程師全棧工程師

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

layui多任務上傳添加進度條