demo.html
4.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta content="telephone=no" name="format-detection" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地利批发-搜索</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../public/css/style/searchIndex.css">
<!-- base seajs -->
<script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/sea.js"></script>
<!-- base jquery -->
<script type="text/javascript" src="http://static.nong12.com/static/newStatic/common/js/base/jquery-2.1.3.min.js"></script>
</head>
<body>
<header class="header">
<div class="search">
<!-- 搜索输入开始 -->
<div class="search-type">
<span class="s-type">商品</span>
<span class="down-arrow"></span>
<span class="black-arrow"></span>
<ul class="more-type">
<li>商品</li>
<li>店铺</li>
</ul>
</div>
<form id="searchIndex" action="searchIndex_submit" method="get" accept-charset="utf-8">
<div class="search-area clearfix">
<input type="text" placeholder="请输入关键字" name="p"
class="search-inp" />
</div>
<input type="submit" value="搜索" class="submit-button" />
</form>
<!-- 搜索输入结束 -->
</div>
</header>
<div class="content" id="cotent">
<!-- 搜索历史开始 -->
<ul class="list-result">
<li>
<a href="#" class="a-block"><i class="search-history"></i>胡萝卜</a>
</li>
<li>
<a href="#" class="a-block"><i class="search-history"></i>胡萝卜</a>
</li>
<li>
<a href="#" class="a-block"><i class="search-history"></i>胡萝卜</a>
</li>
</ul>
<!-- 搜索历史结束 -->
<div class="click-clear">
<span class="btn-white">清空历史记录</span>
<span class="btn-white-f">清空历史记录</span>
<button class="btn-white-fb">清空历史记录</button>
<button class="btn-white-fb18">清空历史记录</button>
<input type="submit" class="btn-green-f" value="清空历史记录" />
<a href="#" class="btn-orange-f">清空历史记录</a>
<a href="#" class="btn-red">清空历史记录</a>
<button class="btn-white-fb mini-clock">获取验证码</button>
</div>
</div>
<!-- 用于显示渲染后的标签 -->
<ul id="element"></ul>
<!-- config -->
<script type="text/javascript" src="../js/javascript/common/config.js"></script>
<!-- 定义模板，将模板内容放到一个script标签中 -->
<script type="text/template" id="tpl">
<%_.each(list, function(item){%>
<li>
<span><%=item.city%></span>
</li>
<%})%>
</script>
<script type="text/javascript">
seajs.use( ['../js/javascript/common/common.js'] , function(){
// 获取渲染元素和模板内容
var element = $('#element'),
tpl = $('#tpl').html();
// 创建数据, 这些数据可能是你从服务器获取的
var data = {
list: [
{firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai'},
{firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'},
{firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},
{firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}
]
}
// 解析模板, 返回解析后的内容
var html = _.template(tpl)(data);
// 将解析后的内容填充到渲染元素
element.html(html);
});
seajs.use([
"../js/javascript/search/demo.js"
]);
</script>
</body>
</html>