[风一样的创作]Layui图标列表，二次封装

首先要下载Layui的资源包和Jquery的资源包，引入html

Layui资源包下载点这里
Jquery资源包下载点这里提取码【bc49】

然后引入html

具体的代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>系统菜单</title><link rel="stylesheet" href="/layui/css/layui.css" media="all"><script type="text/javascript" src="/layui/layui.js"></script><script type="text/javascript" src="/jquery/jquery.min.js"></script>
</head><body class="layui-layout-body" style="cursor:pointer;"><form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">菜单图标</label><div class="layui-input-inline"><input id="icon" type="text" name="icon" required lay-verify="required" placeholder="请选择图标"autocomplete="off"class="layui-input"></div><div class="layui-input-inline" style="width: 6%; height: 34px; border: #c6c8ca 1px solid;"><i id="icon_img" style="font-size:31px; float: left;"></i><div id="iocn_div_choose" onclick="iocnShowAndHidden(true)">选择图标</div></div><div class="layui-form-mid layui-word-aux">可直接填写图标URL</div></div><!--固定图标选择列表--><div id="iocn_list" style="width: 45%; height: 58%; position: absolute; left: 27.5%; top: 0; border: #868e96 1px solid; display: none;"><!--固定标题--><div style="width: 100%; height: 8%; background-color: #eeeeee; line-height: 250%; text-align: center;"><span>选择图标</span><div id="iocn_i_hver" style="width: 2%; height: 40%; float: right; margin-right: 2%;"><i class="layui-icon layui-icon-close" onclick="iocnShowAndHidden(false)"></i></div></div><!--图标列表--><div style="width: 100%; height: 92%; background-color: white;"><div id="iocn_list_div" style="width: 100%; height: 100%; overflow: auto;"></div></div></div></form><!--表格渲染和各种操作-->
<script type="text/javascript">//点击选择图标$(document).on('click', '.iocn_div i', function () {var className = $(this).attr("class");$("#icon").val(className);$("#icon_img").attr('class', className);iocnShowAndHidden(false);});/*** 点击显示或隐藏图标列表** @param type 显示隐藏，ture显示，false隐藏*/var iocnShowAndHidden = function (type) {if (type) {$("#iocn_list_div").empty();//初始化Layui的所有图标，循环动态生成列表var iconList = new Array();iconList.push('layui-icon-heart-fill', 'layui-icon-heart', 'layui-icon-light', 'layui-icon-time', 'layui-icon-bluetooth', 'layui-icon-at', 'layui-icon-mute', 'layui-icon-mike', 'layui-icon-key', 'layui-icon-gift', 'layui-icon-email', 'layui-icon-rss', 'layui-icon-wifi', 'layui-icon-logout', 'layui-icon-android', 'layui-icon-ios', 'layui-icon-windows', 'layui-icon-transfer', 'layui-icon-service', 'layui-icon-subtraction', 'layui-icon-addition', 'layui-icon-slider', 'layui-icon-print', 'layui-icon-export', 'layui-icon-cols', 'layui-icon-screen-restore', 'layui-icon-screen-full', 'layui-icon-rate-half', 'layui-icon-rate', 'layui-icon-rate-solid', 'layui-icon-cellphone', 'layui-icon-vercode', 'layui-icon-login-wechat', 'layui-icon-login-qq', 'layui-icon-login-weibo', 'layui-icon-password', 'layui-icon-username', 'layui-icon-refresh-3', 'layui-icon-auz', 'layui-icon-spread-left', 'layui-icon-shrink-right', 'layui-icon-snowflake', 'layui-icon-tips', 'layui-icon-note', 'layui-icon-home', 'layui-icon-senior', 'layui-icon-refresh', 'layui-icon-refresh-1', 'layui-icon-flag', 'layui-icon-theme', 'layui-icon-notice', 'layui-icon-website', 'layui-icon-console', 'layui-icon-face-surprised', 'layui-icon-set', 'layui-icon-template-1', 'layui-icon-app', 'layui-icon-template', 'layui-icon-praise', 'layui-icon-tread', 'layui-icon-male', 'layui-icon-female', 'layui-icon-camera', 'layui-icon-camera-fill', 'layui-icon-more', 'layui-icon-more-vertical', 'layui-icon-rmb', 'layui-icon-dollar', 'layui-icon-diamond', 'layui-icon-fire', 'layui-icon-return', 'layui-icon-location', 'layui-icon-read', 'layui-icon-survey', 'layui-icon-face-smile', 'layui-icon-face-cry', 'layui-icon-cart-simple', 'layui-icon-cart', 'layui-icon-next', 'layui-icon-prev', 'layui-icon-upload-drag', 'layui-icon-upload', 'layui-icon-download-circle', 'layui-icon-component', 'layui-icon-file-b', 'layui-icon-user', 'layui-icon-find-fill', 'layui-icon-loading', 'layui-icon-loading-1', 'layui-icon-add-1', 'layui-icon-play', 'layui-icon-pause', 'layui-icon-headset', 'layui-icon-video', 'layui-icon-voice', 'layui-icon-speaker', 'layui-icon-fonts-del', 'layui-icon-fonts-code', 'layui-icon-fonts-html', 'layui-icon-fonts-strong', 'layui-icon-unlink', 'layui-icon-picture', 'layui-icon-link', 'layui-icon-face-smile-b', 'layui-icon-align-left', 'layui-icon-align-right', 'layui-icon-align-center', 'layui-icon-fonts-u', 'layui-icon-fonts-i', 'layui-icon-tabs', 'layui-icon-radio', 'layui-icon-circle', 'layui-icon-edit', 'layui-icon-share', 'layui-icon-delete', 'layui-icon-form', 'layui-icon-cellphone-fine', 'layui-icon-dialogue', 'layui-icon-fonts-clear', 'layui-icon-layer', 'layui-icon-date', 'layui-icon-water', 'layui-icon-code-circle', 'layui-icon-carousel', 'layui-icon-prev-circle', 'layui-icon-layouts', 'layui-icon-util', 'layui-icon-templeate-1', 'layui-icon-upload-circle', 'layui-icon-tree', 'layui-icon-table', 'layui-icon-chart', 'layui-icon-chart-screen', 'layui-icon-engine', 'layui-icon-triangle-d', 'layui-icon-triangle-r', 'layui-icon-file', 'layui-icon-set-sm', 'layui-icon-reduce-circle', 'layui-icon-add-circle', 'layui-icon-404', 'layui-icon-about', 'layui-icon-up', 'layui-icon-down', 'layui-icon-left', 'layui-icon-right', 'layui-icon-circle-dot', 'layui-icon-search', 'layui-icon-set-fill', 'layui-icon-group', 'layui-icon-friends', 'layui-icon-reply-fill', 'layui-icon-menu-fill', 'layui-icon-log', 'layui-icon-picture-fine', 'layui-icon-face-smile-fine', 'layui-icon-list', 'layui-icon-release', 'layui-icon-ok', 'layui-icon-help', 'layui-icon-chat', 'layui-icon-top', 'layui-icon-star', 'layui-icon-star-fill', 'layui-icon-close-fill', 'layui-icon-close', 'layui-icon-ok-circle', 'layui-icon-add-circle-fine');$(iconList).each(function (i, e) {var i = $("<div class='iocn_div'><i class='layui-icon " + e + "' style='font-size: 30px;'></i></div>");$("#iocn_list_div").append(i);});$("#iocn_list").show();} else {$("#iocn_list").hide();}}
</script>
</body>
</html>

效果图

[风一样的创作]Layui图标列表，二次封装相关推荐

2018最新精选的Go框架，库和软件的精选列表二
2018最新精选的Go框架,库和软件的精选列表二地理地理工具和服务器 geocache - 适用于基于地理定位的应用程序的内存缓存. pbf - OpenStreetMap PBF golang ...
2018最新精选的Go框架，库和软件的精选列表二 https://awesome-go.com/
地理地理工具和服务器 geocache - 适用于基于地理定位的应用程序的内存缓存. pbf - OpenStreetMap PBF golang编码器/解码器. S2几何 - Go中的S2几何库. ...
layui添加复选框_对layui初始化列表的CheckBox属性详解，初始化属性
对layui初始化列表的CheckBox属性详解,初始化属性通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式 ...
DotNetBar.Bar图标列表的使用
DotNetBar.Bar图标列表的使用老帅控件DevComponents.DotNetBar.Bar怎样使用图像列表呢?比方给工具条或者菜单加上图标.例如以下几步就可以! 方法1: 1.放一个S ...
Ant Design of Vue Icon 图标列表
拷贝插件 yarn add vue-clipboard2// main.js //复制到粘贴板插件 import VueClipboard from 'vue-clipboard2' VueClipb ...
歌单详情内容-图标列表（音乐app项目-第7步）
在上一节歌单详情内容-顶部 (音乐app项目-第6步)_Zhichao_97的博客-CSDN博客的基础上,继续实现详情页的图标列表,效果如下图标注区域所示: 流程: 1.在iconfont官网添加所需 ...
阿里图标icon二次引入+ 图标引入后是黑色解决办法。
阿里图标icon二次引入第一到第三步. 第四步找到文件夹复制代码阿里图标icon二次引入 , 引入后你就会发现是黑色没有原来图标的颜色就像这种如何让本来的颜色出来呢 ? 1.找到项目设置 ...
数据列表组件 jqGrid 二次封装
2019独角兽企业重金招聘Python工程师标准>>> 前段时间在jqgrid基础上,进行了二次封装. 应用在公司新的开发平台上,相比以前效果更佳,开发更方便,减少代码50%.共享下 ...
layui图标大全,精心整理
layui图标大全,一键复制粘贴,非常方便点击这前往,复制代码转载自:http://www.shagua.wiki/project/3?p=85

[风一样的创作]Layui图标列表，二次封装

首先要下载Layui的资源包和Jquery的资源包，引入html

然后引入html

具体的代码

效果图

[风一样的创作]Layui图标列表，二次封装相关推荐

最新文章

热门文章