75回目授業内容
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
jQuery Mobile
- 一般的なリスト data-role属性「listview」
<body> <div data-role="page"> <div data-role="header"> <div data-role="content"> <ul data-role="listview"> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul><!--listview--> </div><!--content--> </div><!--header--> <div data-role="footer"> </div><!--footer--> </div><!--page--> </body>
- 入れ子状態のリスト
<body> <div data-role="page" id="index"> <div data-role="header"> <div data-role="content"> <ul data-role="listview"> <li>list <ul> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> </ul> </li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul><!--listview--> </div><!--content--> </div><!--header--> <div data-role="footer"> </div><!--footer--> </div><!--page--> </body>
- 分割リスト
<ul> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> </ul> </li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul><!--listview-->
- 角丸のリスト data-inset属性「true」
<ul data-role="listview" data-inset="true">
- 説明付きのリスト
<li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li>
- リスト項目の右上に補足的な情報表示
<li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li><li><a href="#page2">list2</a><a href="#page2">detail</a></li>
- リストに見出しを設定 data-role属性「list-divider」
<li data-role="list-divider">見出し</li>
- お問合せフォーム
<div data-role="page" id="contact"> <div data-role="header"> <h1>TQS Contact</h1> </div> <div data-role="content"> <form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="name">お名前:</label> <input type="text" name="name" id="name" value="" placeholder="お名前を入力"> </div> <div data-role="fieldcontain"> <label for="email">メールアドレス : </label> <input type="email" id="email" name="url" placeholder="メールアドレス入力"> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>お問い合わせ種類を選んで下さい。</legend> <input type="checkbox" name="checkbox[]" id="check1" value="web" data-theme="d"> <label for="check1">Web製作</label> <input type="checkbox" name="checkbox[]" id="check2" value="music" data-theme="d"> <label for="check2">音楽製作</label> <input type="checkbox" name="checkbox[]" id="check3" value="q" data-theme="d"> <label for="check3">ご質問</label> </fieldset> </div> <div data-role="fieldcontain"> <label for="textarea-a">お問い合わせ内容:</label> <textarea name="textarea" id="textarea"></textarea> </div> <div data-role="fieldcontain"> <label for="gender">性別:</label> <select name="gender" id="gender" data-role="slider" data-theme="b"> <option value="男性">男性</option> <option value="女性">女性</option> </select> </div> <div data-role="fieldcontain"> <label for="select-choice">オプション:</label> <select name="shipper" id="shipper"> <option>選択してください</option> <option value="プロフェッショナル">プロフェッショナル</option> <option value="スタンダード">スタンダード</option> <option value="エンタープライズ">エンタープライズ</option> </select> </div> <div data-role="fieldcontain"> <label for="slider">満足度:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="5" data-theme="d" data-track-theme="d"> </div> <div class="ui-grid-a"> <div class="ui-block-a"> <input type="reset" id="reset" data-theme="c" value="リセット"> </div> <div class="ui-block-b"> <input type="submit" id="submit" data-theme="b" value="送信"> </div> </div><!-- /grid-a --> </form> </div><!--content--> <div data-role="footer" class="footer-docs ui-bar" id="footer" data-theme="c"> <div data-role="controlgroup" data-type="horizontal"> <a href="#about" data-role="button" data-icon="back" data-rel="back" data-direction="reverse">Back</a> <a href="#portfolio" data-role="button" data-icon="star">portfolio</a> <a href="#access" data-role="button" data-icon="home">access</a> <a href="#contact" data-role="button" data-icon="check">contact</a> </div><!--controlgroup--> <form method="get" action="/doc/jquery_mobile/" style="float:left;margin-left:5px;"> <input type="search" name="q" value="" data-theme="d" placeholder="ドキュメント検索..." /> </form> <div style="float:right; margin-top:10px; margin-right:10px;"> <a href="http://twitter.com/TokiyoTQS"><img src="http://dev.screw-axis.com/img/twitter.gif" /></a> <a href="http://facebook.com/ttokiyo"><img src="http://dev.screw-axis.com/img/facebook.png" /></a> <a rel="author" href="https://plus.google.com/103040855988995841420/posts"><img src="https://www.google.com/images/icons/ui/gprofile_button-16.png" width="16" height="16"></a> </div> </div><!--footer--> </div><!--page-->
-
- phpは後日!