戻る

フッタ

このサイトの仕様上、部品は目的の動作と異なることがあるので、ソースを活用してください。

フッタをツールバーとして使う

前 次 お気に入り 削除 
<div data-role="footer" class="ui-bar">
	<span data-role="controlgroup" data-type="horizontal">
		<a href="/" data-icon="arrow-l">前</a>
		<a href="/" data-icon="arrow-r">次</a>
	</span>
	<a href="/" data-icon="check">お気に入り</a>
	<a href="/" data-icon="delete">削除</a>
</div>

フッタを画面下部に固定する

  • アイテム01
  • アイテム02
  • アイテム03
    • ・ ・ ・
  • アイテム20

位置固定フッタ

<div data-role="content">
	<ul data-role="listview">
		<li>アイテム01</li>
		<li>アイテム02</li>
		<li>アイテム03</li>
			・
			・
			・
		<li>アイテム20</li>
	</ul>
</div>
<div data-role="footer" data-position="fixed">
	<h1>位置固定フッタ</h1>
</div>

フッタをフルスクリーンモードにする

前 次 お気に入り 削除 
<div data-role="page" data-fullscreen="true">
	<div data-role="footer" class="ui-bar" data-position="fixed">
		<span data-role="controlgroup" data-type="horizontal">
			<a href="/" data-icon="arrow-l">前</a>
			<a href="/" data-icon="arrow-r">次</a>
		</span>
		<a href="/" data-icon="check">お気に入り</a>
		<a href="/" data-icon="delete">削除</a>
	</div>
</div>

パーシステントフッタを作る

<div data-role="footer" data-id="pfooter" data-position="fixed">
	<div data-role="navbar">
		<ul>
			<li><a href="a.html" class="ui-btn-active ui-state-persist">P1</a>
			<li><a href="b.html">P2</a></li>
			<li><a href="c.html">P3</a></li>
		</ul>
	</div>
</div>
<div data-role="footer" data-id="pfooter" data-position="fixed">
	<div data-role="navbar">
		<ul>
			<li><a href="a.html">P1</a>
			<li><a href="b.html" class="ui-btn-active ui-state-persist">P2</a></li>
			<li><a href="c.html">P3</a></li>
		</ul>
	</div>
</div>
inserted by FC2 system