menu-add2.html

最新推荐文章于 2024-03-08 17:40:00 发布
原创 最新推荐文章于 2024-03-08 17:40:00 发布 · 296 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个网站后台管理模版的设计与实现，包括HTML结构、样式引用、表单元素及交互逻辑，展示了如何使用layui框架进行表单验证和提交处理。 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<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" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />
	</head>
	<body>
		<div class="wrap-container">
				<form class="layui-form" style="width: 90%;padding-top: 20px;">
					<div class="layui-form-item">
						<label class="layui-form-label">菜单分类：</label>
						<div class="layui-input-block">
							<select name="category" lay-verify="required">
								<option value="0">作为顶级菜单</option>
								<option value="010">关于我们</option>
								<option value="021">产品中心</option>
								<option value="021">新闻中心</option>
								<option value="021">业务范围</option>
								<option value="021">联系我们</option>
								<option value="021">在线留言</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">父级：</label>
						<div class="layui-input-block">
							<select name="category2" lay-verify="required">
								<option value="0">/</option>
								<option value="010">首页</option>
								<option value="010">关于我们</option>
								<option value="021">产品中心</option>
								<option value="021">新闻中心</option>
								<option value="021">业务范围</option>
								<option value="021">联系我们</option>
								<option value="021">在线留言</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">标签：</label>
						<div class="layui-input-block">
							<input type="text" name="label" required lay-verify="required" placeholder="请输入标签" autocomplete="off" class="layui-input" value="关于我们">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">内部跳转：</label>
						<div class="layui-input-block">
							<select name="link1">
								<option value="">请选择跳转项</option>
							  <optgroup label="栏目">
							    <option value="010">首页</option>
								<option value="010">关于我们</option>
								<option value="021">产品中心</option>
								<option value="021">新闻中心</option>
							  </optgroup>
							  <optgroup label="单页">
							    <option value="021">业务范围</option>
								<option value="021">联系我们</option>
								<option value="021">在线留言</option>
							  </optgroup>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">外部链接：</label>
						<div class="layui-input-block">
							<input type="text" name="link2" required lay-verify="required" placeholder="请输入外部链接" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">打开方式：</label>
						<div class="layui-input-block">
							<select name="category" lay-verify="required">
								<option value="0">默认</option>
								<option value="010">新窗口打开</option>
								
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">图标：</label>
						<div class="layui-input-block">
							<input type="text" name="title" required lay-verify="required" placeholder="请输入图标" autocomplete="off" class="layui-input">
						</div>

					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">状态：</label>
						<div class="layui-input-block">
							<input type="radio" name="status" value="1" title="显示" checked>
							<input type="radio" name="status" value="0" title="隐藏">
						</div>

					</div>

					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
		</div>

		<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//Demo
			layui.use(['form'], function() {
				var form = layui.form();
				form.render();
				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
		</script>
	</body>

</html>
精选资源
vue-context-menu-vue js的上下文菜单组件。-Vue.js开发
05-27
yarn add vue-context-menu ``` 然后，在你的Vue组件中引入并注册这个插件： ```javascript import Vue from 'vue'; import VueContextMenu from 'vue-context-menu'; Vue.use(VueContextMenu); ``` 在模板中，...
jquery-ui.min.js 插件
lllllllllaaa的博客
09-02 1万+
1、导入js库： script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js">script>       2、用法： 附赠案例一份： html> html> head lang="en">     meta charset="UTF-8">     title>折叠title>     script
《前端》引用包sidebar-menu.js源码及使用
BelleDiao的博客
06-29 1760
sidebar-menu.js源码： (function ($) { $.fn.sidebarMenu = function (options) { options = $.extend({}, $.fn.sidebarMenu.defaults, options || {}); var target = $(this); target.addClass('nav'); target.addClass('nav-list'); if (options.data) { init
Java -Dfile.encoding=UTF-8的使用
haixia_12的专栏
01-05 2万+
原文地址：http://blog.sina.com.cn/s/blog_4ce8808d0101d0i1.html Java -Dfile.encoding=UTF-8  遭遇乱码问题的来龙去脉 如下使用：java -XX:MaxPermSize=256M -Dfile.encoding=UTF-8 -Xbootclasspath/a:./acc/library/fc
bootstrap 流式布局 引入文件 bootstrap-combined.min.css
旋转的紫色星系
08-13 1万+
流式布局 创建一个流式、两栏的布局, 只需要—这非常适合应用于程序和文档类的网站。
ROS之choro功能包
热门推荐
zhangrelay的专栏
07-27 3万+
使用choro可以快速查找管理功能包，类似ubuntu的apt。 非常方便快捷。 如下： C:\ros_ws>choco search ros-foxy-desktop Chocolatey v0.10.15 ros-foxy-desktop 20201211.0.0.2104300001 1 packages found. 简洁版： ros-catkin-tools 0.0.1.1903221831 ros-cmake 3.11.4.1809242322 ros-colcon-too
vim常用设置---(.vimrc详细配置)
lovewebeye的专栏
04-16 3万+
.vimrc配置文件内容如下:""""""""""""""""""""""""""""""""""""""""&
关于element-plus中el-menu或者el-menu-item导致无法跳转问题或者无法路由或闪动问题解决方法
weixin_45917610的博客
10-20 1万+
原本界面:我出现的点击首页没有跳转，而点击其他的就跳转 原本的代码： 下面展示一些 内联代码片。 <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <el-menu-item index="/
一、我来说LuCI: LuCI官方----3. Theme and Modules
不以己悲的博客
11-04 8406
中文总结： 1. 安装包对应目录：     ipkg   -- ipkg安装包配置     htdocs -- /www     luasrc -- /usr/lib/lua/luci     root -- linux根目录     src -- C code     lua -- /usr/lib/lua     dist -- 2. Makefile:     $(eva
Android 4.03 编译系统------envsetup.sh
wowo的专栏
08-21 3502
接触Android的也快半年了，一直都忙着学习android 的framework、HAL，对Android的编译系统一点都不了解，在编译系统时带来了很多的不便，所以花时间详细的了解了一下，下面记录一下学习心得(由于时间仓促，有的地方理解有误，请不吝赐教)。         Android编译环境的建立以及源码的下载，Android官网给了详细的说明：http://source.android.
vue结合vue-electron创建应用程序
Sandersonia的博客
03-08 4318
在现有的项目中使用electron，将网页转换成应用程序
Laravel开发-laravel-menu .zip
10-05
$menu->add(Link::to('/contact', 'Contact'))->addClass('highlight'); }); ``` 这段代码会创建一个名为`myMenu`的菜单，并添加三个链接：主页、关于我们和联系我们。`addClass`方法用于为特定菜单项添加CSS类。 ...
Laravel开发-laravel-menu (2).zip
10-05
在本压缩包“Laravel开发-laravel-menu (2).zip”中，主要涉及的是使用Laravel框架进行Web应用开发时，如何集成并使用laravel-menu库来构建网站的菜单系统。Laravel是一款流行的PHP框架，它以其优雅的语法和丰富的...
Laravel开发-laravel-active .zip.zip
10-05
$menu->add('关于我们', ['route' => 'about'])->activeIfRequestMatches('/^about/'); }); ``` 在视图中，你只需要渲染这个菜单即可： ```blade {{ Menu::get('MyMenu')->render() }} ``` 总结起来，Laravel的...
数据结构与算法Python实现完整代码库与习题解答项目_包含Python语言入门面向对象编程算法分析递归基于数组的序列栈队列双端队列链表树优先级队列映射哈希表跳跃表搜索树排序选择文.zip
12-20
数据结构与算法Python实现完整代码库与习题解答项目_包含Python语言入门面向对象编程算法分析递归基于数组的序列栈队列双端队列链表树优先级队列映射哈希表跳跃表搜索树排序选择文.zip
练习材料-用word邮件合并功能批量生成缴费单
最新发布
12-20
练习材料-用word邮件合并功能批量生成缴费单
csdn上传文件抓包啊
12-20
csdn上传文件抓包啊
2025年智能物流智能物流系统建设实施方案PDF
12-20
当前，全球经济格局深刻调整，数字化浪潮席卷各行各业，智能物流作为现代物流发展的必然趋势和关键支撑，正迎来前所未有的发展机遇。以人工智能、物联网、大数据、云计算、区块链等前沿信息技术的快速迭代与深度融合为驱动，智能物流不再是传统物流的简单技术叠加，而是正在经历一场从自动化向智能化、从被动响应向主动预测、从信息孤岛向全面互联的深刻变革。展望2025年，智能物流系统将不再局限于提升效率、降低成本的基本目标，而是要构建一个感知更全面、决策更精准、执行更高效、协同更顺畅的智慧运行体系。这要求我们必须超越传统思维定式，以系统化、前瞻性的视角，全面规划和实施智能物流系统的建设。本实施方案正是基于对行业发展趋势的深刻洞察和对未来需求的精准把握而制定。我们的核心目标在于:通过构建一个集成了先进感知技术、大数据分析引擎、智能决策算法和高效协同平台的综合智能物流系统，实现物流全链路的可视化、透明化和智能化管理。这不仅是技术层面的革新，更是管理模式和服务能力的全面提升。本方案旨在明确系统建设的战略方向、关键任务、技术路径和实施步骤，确保通过系统化部署，有效应对日益复杂的供应链环境，提升整体物流韧性，优化资源配置效率，降低运营成本，并最终为客户创造更卓越的价值体验。我们致力于通过本方案的实施，引领智能物流迈向更高水平，为构建现代化经济体系、推动高质量发展提供强有力的物流保障。
hls高层次综合设计宝藏
12-20
hls设计你不会，那是你对底层设计不懂，来不，看下hls蓝宝书，你就会了。
.el-menu-item.is-active如何只给没有子元素的菜单
11-22
在HTML和CSS中，`.el-menu-item.is-active` 是Eleme UI（Element UI）中的一个类名，用于标识当前选中的导航菜单项。如果你想仅给那些没有子元素的菜单项添加这个样式，你可以这样做： 1. 首先，在CSS中，你可以为`.el-menu-item`设置默认样式，并在`.el-menu-item.is-active`中添加激活状态下的样式。例如： ```css .el-menu-item { /* 默认样式 */ } .el-menu-item.is-active { /* 激活状态样式，如背景颜色、边框等 */ } ``` 2. 然后，在JavaScript或Vue.js中，检查每个`.el-menu-item`是否有子元素，如果没有则应用`.is-active`类。假设你正在使用Vue.js： ```javascript <template> <div ref="menuItems"></div> </template> <script> export default { mounted() { this.$refs.menuItems.forEach(item => { if (!item.children) { // 如果没有子元素 item.classList.add('is-active'); } }); }, }; </script> ``` 这里使用了 Vue 的 `ref` 和 `forEach` 来遍历菜单项并判断是否需要添加 `.is-active` 类。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值