jQuery Mobile是一個基于HTML5的移動設備UI框架,提供各種易于使用且具有吸引力的組件和主題來開發移動Web應用程序。
以下是一些精美的jQuery Mobile例子:
// 1. 導航菜單
<div data-role="header"><h1>我的應用程序</h1><a href="#" data-icon="bars" data-iconpos="notext" class="ui-btn-right">菜單</a></div>// 2. 圖片格子
<div data-role="collapsible-set"><div data-role="collapsible"><h3>標題1</h3><img src="example.jpg" alt="示例圖片"><p>描述1…</p></div><div data-role="collapsible"><h3>標題2</h3><img src="example.jpg" alt="示例圖片"><p>描述2…</p></div><div data-role="collapsible"><h3>標題3</h3><img src="example.jpg" alt="示例圖片"><p>描述3…</p></div></div>// 3. 選項卡
<div data-role="tabs"><div data-role="navbar"><ul><li>選項卡1</a></li><li>選項卡2</a></li><li>選項卡3</a></li></ul></div><div id="內容1"><p>這是選項卡1的內容。</p></div><div id="內容2"><p>這是選項卡2的內容。</p></div><div id="內容3"><p>這是選項卡3的內容。</p></div></div>
以上示例均基于jQuery Mobile框架,體現了其豐富的UI組件和風格主題。您可以根據自己的需要進行修改和擴展,以實現更個性化、更適合您的移動Web應用程序。