jQuery Mobileリスト

3799 ワード

1.基本リスト(没有拉贝尔的情况下没有矢印表示)<div data-role="page"> <div data-role="header"><h 1>ヘッダバー</h 1></div> <ul data-role="listview"> <li>図書</li> <li><a href="#">音楽</a></li> </ul> <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> </div>  2.整体名单(start properti用html 5指定开头值,但mobile没有支持)<div data-role="page"> <div data-role="header"><h 1>ヘッダバー</h 1></div> <ol data-role="listview" start="5" type="a"> <li><a href="#">コンピュータ</a></li> <li><a href="#">文芸</a></li> <li><a href="#">社会科</a></li> </ol> <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> </div>  3.分割按钮的名单data-split-icon="gear"分割按钮的指定ody> <div data-role="page"><div data-role="header"><h 1>ヘッダバー</h 1></div> <ul data-role="listview" data-split-icon="gear" data-split-theme="d"> <li> <a href="#"> <img src="Images/2011年作品.jpg"/> <h 3>HTML 5実戦</h 3> <p>HTML 5の新たな特徴とAPIを全面的に紹介したオリジナル図書。</p> </a> <a href="#" data-rel="dialog" data-transition="slideup"> 2011年作品 </a> </li> <li> <a href="#"> <img src="Images/2010年作品.jpg"/> <h 3>jQuery権威ガイド</h 3> <p>jQueryの各側面について、精選されたインスタンスごとに詳細に説明します。</p> </a> <a href="#" data-rel="dialog" data-transition="slideup"> 2010年作品 </a> </li> </ul> <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> </div>  4.リスト項目の分割Data-role=「list-divider」はリスト分割項目を表すulにdata-divider-themeを追加して分割線スタイルを指定する<div data-role=「page」> <div data-role="header"><h 1>ヘッダバー</h 1></div> <ul data-role="listview"> <li data-role=「list-divider」>図書</li> <li><a href="#">コンピュータ</a></li> <li><a href="#">社会科</a></li> <li><a href="#">文芸</a></li> <li data-role="list-divider">音楽</li> <li><a href="#">流行</a></li> <li><a href="#">通俗</a></li> </ul> <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> </div>  5.コンテンツフォーマットとカウンタ <div data-role="page"> <div data-role="header"><h 1>ヘッダバー</h 1></div> <ul data-role="listview"> <li data-role=「list-divider」>2010年、2011年作品集 <span class="ui-li-count">2</span></li> <li> <a href="#"><h 3>2011年作品</h 3> <p><strong>HTML 5実戦</strong></p> <p>HTML 5の新たな特徴とAPIを全面的に紹介したオリジナル図書。</p> <p class="ui-li-aside"><strong>2011.01</strong>出版</p> </a></li> <li> <a href="#"><h 3>2010年作品</h 3> <p><strong>jQuery権威ガイド</strong></p> <p>jQueryの各側面について、精選されたインスタンスごとに詳細に説明します。</p> <p class="ui-li-aside"><strong>2010.01</strong>出版</p> </a> </li> </ul> <div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> </div> jsのリフレッシュ$("ul").listview("refresh");