[JavaScript知识库] layui下拉图标，layui排行号选择器

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> layui下拉图标，layui排行号选择器 -> 正文阅读

[JavaScript知识库]layui下拉图标，layui排行号选择器

下载的组件

layui下拉图标
layui排行号选择器

下载路径：https://gitee.com/ayscap/icon-selected
参考：https://gitee.com/layui-exts/icon-selected

或者

链接: https://pan.baidu.com/s/1NVAvyiDOyfjc8vN37Sla0Q 提取码: wiyj

使用方式

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.init("#iconCls");
    
});

如果弹出位置不如意就加这个调试调试

/* 图标选择器*/
.layui-ext-icon-selected-container{
	z-index: 999999999 !important;
	position: absolute !important;
}

或者js修改位置

    // 图标选择器弹出位置
    $('.layui-ext-icon-selected-input').on('click', function(){
    	var left = $(this).offset().left;
    	var top = $(this).offset().top;
    	$('.layui-ext-icon-selected-container').css({"left": left, "top": top+40});
  	})