jQuery Mobile是一種基于jQuery的框架,它主要面向移動設備和網站。jQuery Mobile使您可以快速創建具有移動設備友好界面的網站和應用程序,減少了很多手寫代碼的工作量。
jQuery Mobile包含了一些UI組件,如按鈕、列表、滑動菜單、導航欄等等,您可以直接將它們導入到您的應用程序中。jQuery Mobile還提供了一些功能,如表單驗證、Ajax頁面切換和對話框等等。這些功能可以讓您通過簡單的HTML和JavaScript代碼快速構建具有應用程序感覺的網站。
<!DOCTYPE html> <html> <head> <title>jQuery Mobile Example</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"> <div data-role="header"> <h1>jQuery Mobile Example</h1> </div> <div data-role="content"> <p>Welcome to jQuery Mobile Example</p> <a href="#" data-role="button" data-icon="home">Home</a> <a href="#" data-role="button" data-icon="star">Favorites</a> <a href="#" data-role="button" data-icon="gear">Settings</a> <a href="#" data-role="button" data-icon="info">About</a> </div> <div data-role="footer"> <h4>Copyright ? 2021 jQuery Mobile Example</h4> </div> </div> </body> </html>
在上面的代碼中,我們使用了data-role屬性將頁面分為頭部、內容和底部。我們還使用了data-icon屬性來添加圖標按鈕,這些圖標是jQuery Mobile預定義的。最后,我們還使用了jQuery Mobile的樣式表和腳本來渲染頁面。