<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>JQM TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css" />
<script src="jqm/jquery-1.11.2.js"></script>
<script src="jqm/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>頁面標題區域</h1>
</div>
<div data-role="content">
<p>頁面內容區域</p>
<br/>
<!-- data-inset="true" 添加這個屬性可以是listview和窗口流出邊距，更美觀 -->
<ul data-role="listview" data-inset="true">
<li>jack</li>
<li>rose</li>
<li>maly</li>
<li>lily</li>
</ul>
<br>
<!-- 添加超級鏈接之後，就可以有鼠標浮動效果和可以點擊響應了 -->
<ul data-role="listview" data-inset="true">
<li><a>
<h3>喜洋洋和灰太狼的故事</h3>
<p>簡單描述：內容是他倆原來是好朋友</p>
<!-- class="ui-li-aside" 添加這個類樣式 可以使該標籤置於右上角顯示 -->
<p style="color:red;" class="ui-li-aside">RMB:88.00</p>
</a></li>
<li><a>rose</a></li>
<li><a>maly</a></li>
<li><a>lily</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h2>頁面底部區域</h2>
</div>
</div>
</body>
</html>
jQuery mobile 學習08 內容區域的列表顯示 data-role="listview"
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
jquerymobile圖表插件支持
很久沒寫博客了，終於有點時間來分享點東西。 最近在做一個移動設備上的產品，之中用到圖表，在移動設備上用的，所以要儘量小巧，還要做觸摸支持。 我們選用了jqflot然後我自己寫了觸摸支持，下面