js template-natice 模板_模板插件 template-native.js 下载地址-优快云博客

本文介绍了一个基于HTML、CSS及JavaScript实现的群组管理页面。通过使用jQuery和Template库，该页面能够动态加载用户的群组信息并展示出来。包括群组logo、名称和简介等，并提供群信息修改按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="../js/template-native.js" ></script>
		 <link rel="stylesheet" href="../css/list.css" type="text/css"/>
	</head>
	<body>
		
		<div class="content">
			<div id="left">
				<div id="my">功能</div>
				<div id="qun"><span>管理我的群</span></div>
			</div>
			<div id='right'>
				<div class='header'><span>管理我的群</span></div>
				<ul id="count">
					
				</ul>
			</div>
		</div>

		<script>
		var token = window.sessionStorage.getItem("token");
		var http = window.sessionStorage.getItem("http");
			$.ajax({
			    type: "POST",
			    url: http+"groupOperAction/myGroups",
			    data: { user_logon_token: token,page:1,pageNum:10},
			    dataType: "json",
			    success: function (data) {
			        if(data.code==200&&data.message_code==9998){
			            console.log(data);
						var group=data.result.groups;
						 var myGroup = {
							groupObj:  group
						}
						console.log(myGroup);
						var html = template("temp", myGroup);
						$("#count").html(html);
			    	}
				}
			})
		</script>
		<script id="temp" type="text/template">
			<%for(var i = 0 ;i < groupObj.length; i++){%>
				<li class="item">
					<img src="http://60.205.92.165:8080/<%=groupObj[i].group_logo%>" width="80px" height="80px"/>
					<span id="info_1"> <%=groupObj[i].group_name%></span>
					<span id="info_2"> <%=groupObj[i].group_info%></span>
					<div id="but_info">
						<button>群信息修改</button>
						<button>群信息修改</button>
						<button>群信息修改</button>
					</div>
				</li>
			<%}%>
		</script>
		
		<!--也可以用元素的方式-->
		<!--<script> 
			'<div class="item">'+
					+'<img src='+img+' width="80px" height="80px"/>'
					+'<span id="info_1"> '+name+' </span>'
					+'<span id="info_2"> '+info+'</span>'
					+'<div id="but_info">'
						+'<button>群信息修改</button>'
						+'<button>群信息修改</button>'
						+'<button>群信息修改</button>'
					+'</div>'
				+'</div>'
			+');'
		</script>-->
	</body>
</html>