前端基础：Day05

最新推荐文章于 2024-07-06 14:47:20 发布

华山栈道

最新推荐文章于 2024-07-06 14:47:20 发布

阅读量1.4k

点赞数 4

分类专栏：前端基础学习文章标签： jquery html 列表

本文链接：https://blog.csdn.net/qq_41680667/article/details/116198693

版权

前端基础学习专栏收录该内容

5 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>homework</title>
		<link rel="stylesheet" href="css/core.min.css">
		<link rel="stylesheet" href="js/swiper/swiper.min.css">
		<link rel="stylesheet" href="css/demo1.css">
		<script src="js/jquery-1.12.4.min.js"></script>
		<!-- 完成说明： 1，使用模板引擎渲染列表 -->
		<!-- 2，使用不同的mock技术模拟列表数据 -->
	</head>

	<body>
		<div class="list-content">
			<table class="list-std">
				<thead>
					<tr>
						<th width="50">序</th>
						<th width="370">资源名称</th>
						<th width="160">提供机构</th>
						<th width="110">浏览次数</th>
						<th width="120">更新时间</th>
						<th>评分</th>
					</tr>
				</thead>
				<tbody id="resource-list">
				</tbody>
			</table>
		</div>

		<!-- 模板 -->
		<script type="text/x-template" id="list-tmpl">
			{{#list}}
			<tr {{#dis}}class="disable" {{/dis}}>
				<td>{{index}}</td>
				<td><span class="resource-title"><a
                                href="{{href}}">{{source}}</a></span></td>
				<td>{{city}}</td>
				<td>{{seenum}}</td>
				<td>{{date1}}</td>
				<td>
					<div class="{{star}}"></div>
				</td>
			</tr>
			{{/list}}
		</script>
		<script src="js/mustache.min.js"></script>
		<!--第一种-->
		<!--<script src="mock/jquery.mockjax.js"></script>
		<script src="js/test_demo03.js"></script>-->
		<!--第二种-->
        <script src="mock/mock-min.js" ></script>
        <script src="js/test_demo04.js"></script>
		<script src="js/index.js"></script>

	</body>

</html>

JS

1.Index.js

/**!
 * [练习题]
 * date: 2020-04-26
 * author: [李毅];
 */

(function(win, $) {
	var templ = $('#list-tmpl').html();

	var $resourceList = $('#resource-list');

	var rederData = function(data) {
		$resourceList.append(Mustache.render(templ, data));
	}

	$.ajax({
		url: 'getData',
		type: 'get',
		dataType: 'json',
		success: function(data) {
			rederData(data);
		}
	})
})(this, jQuery);

2.test_demo04.js

/**
 * 使用mock-min.js模拟列表数据
 */
Mock.mock("getData", function(option) {
	return Mock.mock({
		"list|9-20": [{
			'index|+1': 1,
			href: 'detail.html?rowguid=@guid',
			source:'@cword(1,10)',
//			'source|1': ['南南具组时五 ','北北具组时六 ','东东具组时七','西西具组时八'],
			city: '@city',
			seenum: "@integer(555,5555)",
			date1: "@date(yyyy年MM月dd日)",
			star: 'score score-@integer(1,5)'
		}]
	});
});

华山栈道

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础：Day05

目录HTMLJS1.Index.js2.test_demo04.jsHTML<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>homework</title> <link rel="style
复制链接

扫一扫