お店一覧ページ作成
お店紹介ページは
写真スペースの設置
で大体できたので
次にお店一覧ページを作成します
なお、ページではお店一覧に検索機能をつけて楽に
検索できるようにします
まずはスイーツのお店一覧をつくることにします
ちなみに、最初に
base.html
というようにすべての元になるファイルをつくり
それをカスタマイズするというほうが
楽にできます
最初は
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"> </script> </head> <body> <div data-role="page" data-title="jQuery Mobile"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div role="main" class="ui-content"> </div> <div data-role="footer"> フッター </div> </div> </body> </html>
というソースにしておき、これをカスタマイズします
まず、最初に戻るボタンを header につけます
data-add-back-btn="thue" data-back-btn-text="戻る"
これを
<div data-role="header" >
へ追記し
<div data-role="header" data-add-back-btn="thue" data-back-btn-text="戻る">
というようにします
これで戻るボタンが設置されます
ただし、直接アクセスした場合には動作しません
index.html などからアクセスした場合のみ
戻るボタンが表示されます
ということで index.html に
<a href="sweet.html" class="ui-btn">お店一覧</a>
を設置し、
お店一覧ボタンをクリックすると
戻るボタンがでているのが確認できます
今回のソースは
index.html が以下のようになります
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"> </script> </head> <body> <div data-role="page" data-title="jQuery Mobile"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div role="main" class="ui-content"> 本文だよ <a class="ui-btn" href="shop.html">お店情報</a> <a href="sweet.html" class="ui-btn">お店一覧</a> </div> <div data-role="footer"> Copyright 1998-2015 </div> </div> </body> </html>
そして sweet.html
こちらはお店一覧になります
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"> </script> </head> <body> <div data-role="page" data-title="jQuery Mobile"> <div data-role="header" data-add-back-btn="thue" data-back-btn-text="戻る"> <h1>jQuery Mobile</h1> </div> <div role="main" class="ui-content"> </div> <div data-role="footer"> フッター </div> </div> </body> </html>
次回から、一覧のベースになるページの作成を行っていきます