1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Page Title</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
6 <link rel="stylesheet" href="./css/jquery.mobile-1.4.2.min.css" />
7 <link rel="stylesheet" type="text/css" href="./css/jquery.swipegallery.css">
8 <script type="text/javascript" src="./js/jquery.js"></script>
9 <script type="text/javascript" src="./js/jquery.mobile-1.4.2.min.js"></script>
10 <script type="text/javascript" src="./js/jquery.swipegallery.js"></script>
11 <style type="text/css">
12 p span {
13 vertical-align:50%;
14 }
15 .floder_icon{
16 vertical-align: 50%;
17 min-height: 80px;
18 min-width: 80px;
19 margin:5px 0px 0px 5px;
20
21 }
22 </style>
23 <script type="text/javascript">
24 $(document).on("pageinit","#page3",function(){
25 $('#swipeallery').swipeGallery({autoHeight: false,
26 'height': '100px',
27 'width': '100%'
28 });
29 });
30
31 </script>
32 </head>
33 <body>
34 <!-- Home -->
35 <div data-role="page" id="page1">
36 <div data-theme="b" data-role="header" data-position="fixed">
37 <a data-role="button" data-icon="arrow-l" data-iconpos="notext" data-rel="back"
38 class="ui-btn-left">
39 返回
40 </a>
41 <h3>
42 天气预报
43 </h3>
44 </div>
45 <div data-role="content" align="center">
46
47 <div class="ui-grid-b">
48 <div class="ui-block-a"><a class="circle_item" data-role="button" data-transition="fade" href="#page2">旅游预报</a></div>
49 <div class="ui-block-b"><a class="circle_item" data-role="button" data-transition="fade">农业气象</a></div>
50 <div class="ui-block-c"><a class="circle_item" data-role="button" data-transition="fade">交通气象</a></div>
51 </div>
52
53 <div class="ui-grid-b">
54 <div class="ui-block-a"><a class="circle_item" data-role="button" data-transition="fade">气象实况</a></div>
55 <div class="ui-block-b"><a class="circle_item" data-role="button" data-transition="fade">气象服务</a></div>
56 <div class="ui-block-c"><a class="circle_item" data-role="button" data-transition="fade">短临预报</a></div>
57 </div>
58
59 <div class="ui-grid-b">
60 <div class="ui-block-a"><a class="circle_item" data-role="button" data-transition="fade">气象视频</a></div>
61 <div class="ui-block-b"><a class="circle_item" data-role="button" data-transition="fade">气象咨询</a></div>
62 <div class="ui-block-c"><a class="circle_item" data-role="button" data-transition="fade">火险等级预报</a></div>
63 </div>
64
65 </div>
66 </div>
67
68
69
70 <!-- 旅游预报 -->
71 <div data-role="page" id="page2">
72 <div data-theme="b" data-role="header" data-position="fixed">
73 <a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="notext" data-rel="back" class="ui-btn-left">
74 返回
75 </a>
76 <h3>
77 旅游景点预报
78 </h3>
79 </div>
80
81 <div data-role="content" align="center">
82 <ul data-role="listview" data-filter="true" data-filter-placeholder="关键字：城市，景点" data-inset="true" data-corners="false">
83 <li>
84 <a href="#page3">
85 <img src="img/floder_icon.png" class="floder_icon"/>
86 <h2>大唐芙蓉园</h2>
87 <p><span>建议：</span><img src="img/star.png" /></p>
88 </a>
89 </li>
90
91 <li>
92 <a href="#page3">
93 <img src="img/floder_icon.png" class="floder_icon"/>
94 <h2>大唐芙蓉园</h2>
95 <p><span>建议：</span><img src="img/star.png" /></p>
96 </a>
97 </li>
98
99 <li>
100 <a href="#page3">
101 <img src="img/floder_icon.png" class="floder_icon"/>
102 <h2>大唐芙蓉园</h2>
103 <p><span>建议：</span><img src="img/star.png" /></p>
104 </a>
105 </li>
106 </ul>
107
108 </div>
109 </div>
110
111
112
113 <!-- 景区天气预报 -->
114 <div data-role="page" id="page3">
115 <div data-theme="b" data-role="header" data-position="fixed">
116 <a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="notext" data-rel="back"
117 class="ui-btn-left">
118 返回
119 </a>
120 <h3>
121 大唐芙蓉园
122 </h3>
123 <ul id="swipeallery">
124 <li><img id="test1" src="./img/list_icon.png" alt="" title=""/></li>
125 <li><img src="./img/album-bb.jpg" alt="" title=""/></li>
126 <li><img src="./img/list_icon.png" alt="" title=""/></li>
127 <li><img src="./img/album-bb.jpg" alt="" title=""/></li>
128 <li><img src="./img/list_icon.png" alt="" title=""/></li>
129 </ul>
130
131 <div data-role="navbar" data-iconpos="top">
132 <ul>
133 <li>
134 <a href="#page1" data-transition="fade" data-icon="" class="ui-btn-active ui-state-persist" data-theme="a">
135 天气预报
136 </a>
137 </li>
138 <li>
139 <a href="#page1" data-transition="fade" data-icon="" data-theme="a">
140 景区介绍
141 </a>
142 </li>
143 <li>
144 <a href="#page1" data-transition="fade" data-icon="" data-theme="a">
145 景区路线
146 </a>
147 </li>
148 <li>
149 <a href="#page1" data-transition="fade" data-icon="" data-theme="a">
150 特产美食
151 </a>
152 </li>
153 </ul>
154 </div>
155 </div>
156
157 <div data-role="content" align="center">
158 <div class="ui-grid-c">
159 <div class="ui-block-a">
160 </div>
161 <div class="ui-block-b">
162 </div>
163 <div class="ui-block-c">
164 </div>
165 <div class="ui-block-d">
166 </div>
167 <div class="ui-block-a">
168 </div>
169 <div class="ui-block-b">
170 </div>
171 <div class="ui-block-c">
172 </div>
173 <div class="ui-block-d">
174 </div>
175 <div class="ui-block-a">
176 </div>
177 <div class="ui-block-b">
178 </div>
179 <div class="ui-block-c">
180 </div>
181 <div class="ui-block-d">
182 </div>
183 <div class="ui-block-a">
184 </div>
185 <div class="ui-block-b">
186 </div>
187 <div class="ui-block-c">
188 </div>
189 <div class="ui-block-d">
190 </div>
191 </div>
192 </div>
193
194 </body>
195 </html>
