首先要下载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>
效果图
1309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
