jQuery Mobile是一款跨平臺的移動網頁開發框架，它能夠幫助開發者快速地創建適用于各種設備的web應用程序。現在，我們一起來看一下一個使用jQuery Mobile開發的實例。
<html> <head> <title>jQuery Mobile開發實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" > <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>歡迎來到jQuery Mobile實例</h1> <a href="#about" data-icon="gear" data-iconpos="notext">設置</a> </div> <div data-role="main" class="ui-content"> <p>這是一個使用jQuery Mobile開發的實例，歡迎您來進行體驗。</p> <a href="#page2" data-role="button">下一頁</a> </div> <div data-role="footer" data-position="fixed"> <h4>版權所有 ? 2021 jQm.com</h4> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <a href="#" data-role="button" data-icon="back">返回</a> <h1>這是第二頁</h1> <a href="#home" data-icon="home">首頁</a> </div> <div data-role="main" class="ui-content"> <p>這是第二頁的內容。</p> <a href="#" data-role="button">按鈕</a> </div> <div data-role="footer" data-position="fixed"> <h4>版權所有 ? 2021 jQm.com</h4> </div> </div> </body> </html>
上面的代碼是一個簡單的jQuery Mobile實例，其中使用了data-role屬性來定義頁面的不同部分，比如page、header、main、footer等。同時，也使用了data-icon屬性來添加圖標，data-iconpos屬性來控制圖標的位置。
總之，使用jQuery Mobile開發web應用程序可以幫助我們快速搭建出一個漂亮、功能強大的應用，給用戶帶來極好的使用體驗。
上一篇html5+個人介紹代碼
下一篇css圖片浮于屏幕中間