リスト
<ol>か<ul>にdata-role="listview"を指定すると、画面（フレーム）の全幅のリストで表示される。
- リストアイテムをタップした場合、Ajaxリクエストを出し、DOMに新しいページを作り、ページ遷移を開始する。
リンクリスト
リストの右側に、右矢印アイコンが設定される。ただし、リストの一部の文字にリンクが設定されている場合は、その限りにあらず（通常のリンクと同じように表示される。）
※ページ遷移をスムーズにするjQueryMobile独自の設定のせいか、リンク先を"/example.html"としても"（現在のページ)#/example.html"と勝手に書き換えられてしまう場合が発生。その場合は
<a href="example.html" data-ajax="false">...</a>
を追加する
データの区切り
リスト要素&bole(){<li>}にdata-role="list-divider"を指定する。
HideDividerオプション
<ol>か<ul>にdata-hide-dividers="true"を指定すると、区切り要素に対して、子となる要素がない場合に、表示されなくなる。
リスト要素の情報
リスト内に表題と内容を表示する
リスト内の情報としてheading要素<h*></h*>とparagraph要素<p></p>を設定する。
- <h*></h*>はh1でもh6でも、表示としては（デフォルトでは？）同じ。
- <p></p>は普通のブロック要素でいい？
リスト要素の右側に***を□で囲んだものを表示させる
<span class="ui-li-count">***</span>
未読数などの表示形式
リスト要素の右上に情報を表示させる
<span class="ui-li-aside">***</span>
リスト中の文を折り返して全文表示にする
cssで指定する
.wordbreak{
overflow: visible;
white-space: normal;
}
※.wordbreak属性ではなくなったのか、上記を使っても反映されなかった(ver 1.4.5)。.workbreakではなく、liへの指定としたら、反映された。
リスト要素を囲みで表示する
<ul data-inset="true"></ul>
要素をドラッグできるリスト
.sortable()
を設定する
リストの中に、ドラッグさせない要素をつくる
sortableの設定の際に、
.sortable({cancel : ***})
で、ドラッグさせない要素の指定をしておく（クラスとか）
リスト要素の追加後に見た目を直す
追加した要素に、jQueryMobile用の属性がついていない（ので見た目が対応していない）場合の処置
$("ul").listview('refresh')
最終更新：2015年07月12日 21:47
