jQueryMobile リストの表示０３

スマートフォン 授業



分割リスト

  • li内に2つのリンクを記述すると、1つのリスト項目に2つのリンクを設定できる分割リストも作成できる
  • 分割リストでは、2番目のリンクはリンクアイコンだけが表示される

ソースコード【 HTML 】

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8">
<title>jQuery Mobile Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head> 
<body>

<div data-role="page" id="index"> 
<div data-role="header"><h1>ヘッダー</h1></div> 
<div data-role="content">

<ul data-role="listview">
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
</ul>

</div> 
<div data-role="footer"><h4>フッター</h4></div> 
</div>

</div>
</body>
</html>

ブラウザで表示【 Safari 】








分割リストのアイコンを設定　data-split-icon属性

  • 分割リストで表示するアイコンは、data-split-icon属性で変更できる
  • たとえば、「gear」を設定すると歯車のようなアイコンになる


ソースコード【 HTML 】

<ul data-role="listview" data-split-icon="gear">

ブラウザで表示【 Safari 】









分割リストのテーマを設定　data-split-them属性

  • 分割リストではdata-split-them属性を利用してテーマを適用できる
  • 分割リストのリンクアイコンは、デフォルトではテーマ「b」が適用されていますが、data-split-themeでページのデザインに合ったテーマを適用できる


ソースコード【 HTML 】

<ul data-role="listview" data-split-theme="a">

ブラウザで表示【 Safari 】








角丸のリスト　data-inset属性「true」

  • ul/ol要素に対してdata-inset属性「true」を付けると、角丸の立体的なリストにできる


ソースコード【 HTML 】

<ul data-role="listview" data-inset="true">

ブラウザで表示【 Safari 】