jQuery Mobile是一個基于jQuery的移動端框架。它提供了一種簡單易用的方式來開發移動應用程序。其中一個常用的組件是列表按鈕，在這篇文章中我們將學習如何使用它。
首先我們需要在頁面引入jQuery和jQuery Mobile的庫：
<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>接下來，我們可以使用一個簡單的HTML模板展示列表按鈕：
<div data-role="content"> <ul data-role="listview"> <li><a href="#">按鈕1</a></li> <li><a href="#">按鈕2</a></li> <li><a href="#">按鈕3</a></li> </ul> </div>這里我們使用了data-role屬性，它是jQuery Mobile的一個重要標識。在這個例子中，我們使用data-role="content"來聲明頁面內容區域，使用data-role="listview"來聲明一個列表視圖。 接著，我們插入一個li元素和一個鏈接a元素，它們共同組成了一個列表項和一個按鈕。當我們點擊這個按鈕時，它將觸發一個JavaScript事件。 下面是一個完整的示例代碼：
<html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>列表按鈕示例</title> <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>列表按鈕示例</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#">按鈕1</a></li> <li><a href="#">按鈕2</a></li> <li><a href="#">按鈕3</a></li> </ul> </div> <div data-role="footer"> <h1>頁腳</h1> </div> </div> </body> </html>使用jQuery Mobile的列表按鈕確實很容易，只需按照上述步驟即可創建具有交互性的列表。
上一篇dockercache
下一篇html5 設置文字居中