jQuery Mobile是一項基于jQuery的開源web應用程序框架,可以用于構建跨設備的響應式網站和應用程序。
一個基本的jQuery Mobile頁面由多個層級的容器組成。以下是一個簡單的HTML代碼示例,該示例將顯示一個具有標題、列表、表單和按鈕的頁面:
<!-- 頁面開始 --> <div data-role="page"> <!-- 頭部開始 --> <div data-role="header"> <h1>jQuery Mobile 演示</h1> </div> <!-- 頭部結束 --> <!-- 主體開始 --> <div data-role="main" class="ui-content"> <h2>歡迎來到jQuery Mobile 演示!</h2> <p>請瀏覽我們的列表并嘗試提交表單。</p> <!-- 列表開始 --> <ul data-role="listview" data-inset="true"> <li><a href="#">列表項 1</a></li> <li><a href="#">列表項 2</a></li> <li><a href="#">列表項 3</a></li> </ul> <!-- 列表結束 --> <!-- 表單開始 --> <form> <div class="ui-field-contain"> <label for="name">名字:</label> <input type="text" name="name" id="name"> </div> <div class="ui-field-contain"> <label for="email">電子郵件:</label> <input type="email" name="email" id="email"> </div> <div class="ui-field-contain"> <label for="password">密碼:</label> <input type="password" name="password" id="password"> </div> <div class="ui-field-contain"> <label for="select-choice-1" class="select">選擇項:</label> <select name="select-choice-1" id="select-choice-1"> <option value="standard">標準</option> <option value="rush">加急</option> <option value="express">特快</option> </select> </div> <div class="ui-field-contain"> <label for="textarea">文本:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> </div> <div class="ui-field-contain"> <button type="submit" class="ui-btn ui-btn-inline ui-btn-b ui-corner-all">提交</button> </div> </form> <!-- 表單結束 --> </div> <!-- 主體結束 --> <!-- 腳部開始 --> <div data-role="footer"> <h4>Copyright ? <script>document.write(new Date().getFullYear())</script> 您的名字</h4> </div> <!-- 腳部結束 --> </div> <!-- 頁面結束 -->
通過使用jQuery Mobile,可以輕松地構建出美觀、易于使用的移動應用程序。
上一篇火焰字css樣式
下一篇火狐css+usage