jQuery Mobile是一個基于jQuery的移動網頁開發框架，它提供了豐富的UI組件讓開發者可以快速地創建出漂亮的移動網頁。

UI Bar組件是jQuery Mobile中的一種標簽欄組件，可以用于在移動網頁上展示一些導航或者狀態信息。UI Bar可以分為三部分：左邊按鈕、中間標題和右邊按鈕，在不同的使用場景下，這三部分的展示方式可以有不同的變化。

<div data-role="header" data-position="fixed">
<a href="#" data-icon="bars">菜單</a>
<h1>網頁標題</h1>
<a href="#" data-icon="user">個人中心</a>
</div>

上面的例子展示了一個UI Bar組件的使用，data-role="header"表示這是一個頭部標簽欄組件，data-position="fixed"表示頭部會固定在頁面頂部。在這個例子中，左邊按鈕的圖標是bars，右邊按鈕的圖標是user，中間顯示的標題是網頁標題。

除了上面說到的三部分，UI Bar還可以添加自定義的內容，通過在UI Bar的內部添加元素來實現。比如下面的例子，我們向UI Bar內添加了一個搜索框：

<div data-role="header" data-position="fixed">
<a href="#" data-icon="bars">菜單</a>
<h1>網頁標題</h1>
<form class="ui-filterable">
<input id="searchInput" data-type="search" placeholder="搜索...">
</form>
<a href="#" data-icon="user">個人中心</a>
</div>

在這個例子中，我們在UI Bar內添加了一個表單元素<form>，并且為它添加了ui-filterable類名，這樣它就能夠自動支持本地搜索功能。通過添加這個搜索框，我們可以使得用戶更方便地找到需要的內容。

UI Bar是一個非常實用的組件，它可以用來展示導航菜單、狀態信息、搜索框等，通過添加不同的內容，可以讓UI Bar在不同的場景下展現出不同的特點，幫助我們更好地構建出優秀的移動網頁。