html通过jquery.js动态生成按钮元素组成折叠菜单

最新推荐文章于 2024-04-28 10:55:39 发布

旭寒ls

最新推荐文章于 2024-04-28 10:55:39 发布

阅读量727

点赞数 1

文章标签： javascript html jquery

本文链接：https://blog.csdn.net/qq_53485256/article/details/126524171

版权

我这里的情况是不使用其他ui组件，自制侧边折叠菜单，菜单按钮需要通过数据库的菜单数据自动生成，这里我选择配合使用jquery.js来制作。
首先是html内容，在html的head标签里引入的js和css文件地址记得修改，自己写的js和css文件要放在最下面引入

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>侧边菜单</title>
		<script src="tools/scripts/jquery.js"></script>
		<script src="tools/scripts/jquery-ui.js"></script>
		<script src="tools/scripts/echarts.min.js" type="text/javascript"></script>
		<script src="tools/scripts/test.js" type="text/javascript"></script>
		<link href="tools/scripts/test.css" rel="stylesheet">
	</head>
	<body>
		<div id="main" class="main001">
			<button id="main_1" class="main_1">展开</button>
		</div>
		<div id="rightmain" class="rightmain">
			
		</div>
	</body>
</html>

css文件，对样式稍加修饰.main_2的样式是为生成的按钮做准备

body {
	padding: 0;
	margin: 0;
	background: url('../imgs/sky1.jpg');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
.main001 {
	position: absolute;
	top: 0;
	left: 0;
	width: 15vw;
	height: 100vh;
	background: rgba(55, 55, 55, 0.3);
	font-size: 1.5vh;
	color: white;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	display: block;
	z-index: 2;
	overflow-y: auto;
	overflow-x: hidden;
}

.main_1 {
	position: relative;
	float: left;
	width: 15vw;
	height: 3vh;
	background: none;
	font-size: 1.5vh;
	color: white;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
}

.main_1:hover {
	background: #3264a4;
}

.main_2 {
	position: relative;
	float: left;
	width: 15vw;
	height: 3vh;
	background: rgba(55, 55, 55, 0.6);
	font-size: 1.5vh;
	color: white;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
}

.main_2:hover {
	background: #3264a4;
}

.rightmain {
	position: absolute;
	top: 0;
	left: 15vw;
	width: 85vw;
	height: 100vh;
	background: rgba(255,255,255,1);
	font-size: 1.5vh;
	color: white;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	display: block;
	z-index: 2;
	overflow-y: auto;
	overflow-x: hidden;
}

js文件，这里使用了jquery，主要内容是前两个函数，最后一个是echarts图表，我用来填充页面的，不想要可以删掉。

$(document).ready(function() {
	$("#main_1").click(function() {
		$(".main_2").slideToggle(500);//使用了jquery的滑动效果来展示出折叠的效果，500是指500毫秒
	});
})
$(document).ready(function() {
	for (let i = 0; i < 8; i++) {
		console.log(i + "次")
		var jqDiv = $("#main");//获取要生成在哪个父元素
		var p = $("<button class='main_2' id='newp2'>jquery 按钮直接生成</button>").click(function(){//生成的按钮这里可以直接绑定点击事件
			alert("哈哈哈，我是第" + (Number(i) + 1) + "个")
		});;
		p.appendTo($("#main"));
		$(".main_2").hide();//这里隐藏生成好的按钮
		p.appendTo(jqDiv);
		jqDiv.append(p);
	}
})
//下面的是echarts饼图示例
$(document).ready(function() {
		var chartDom = document.getElementById('rightmain');
		var myChart = echarts.init(chartDom);
		var option;

		option = {
			title: {
				text: 'Referer of a Website',
				subtext: 'Fake Data',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [{
				name: 'Access From',
				type: 'pie',
				radius: '50%',
				data: [{
						value: 1048,
						name: 'Search Engine'
					},
					{
						value: 735,
						name: 'Direct'
					},
					{
						value: 580,
						name: 'Email'
					},
					{
						value: 484,
						name: 'Union Ads'
					},
					{
						value: 300,
						name: 'Video Ads'
					}
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};

		option && myChart.setOption(option);
	})