摘要:JQueryMobile 側邊滑動選單 ( Slider Panel )
這篇要介紹的是 JQueryMobile 一個很實用的功能：Slider Panel，什麼是 Slider Panel 呢？Silder Panel 也就是我們常說的 Slider Menu，顧名思義就是滑動選單，通常我們在操作 App 的時候，常常會發現點選最上方某顆按鈕，左側或右側就會滑出一些功能選單，接著我們可以用手指再把選單收進去，這就是 Slider Panel，而 JQueryMobile 同樣有提供這個功能，就讓我們來實做看看。
範例連結：Slide Panel 實做 ( 以下均使用 EZoApp 工具來 demo，按下 preview 就可以預覽 )
首先我們要先了解 Slider Panel 的原理，Slider Panel 就是在畫面上加入一個具有 data-role="panel" 標籤屬性的 div，這個 div 就會成為從左邊滑出或右邊滑出的區塊，若是要控制從左邊滑出或右邊滑出，就額外增加 data-position="left" 或 data-position="right" ，就可以輕鬆的控制從左邊滑出或右邊滑出。
<div id="left-menu" data-role="panel" data-position="left">
從左側展開的內容
</div>
<div id="right-menu" data-role="panel" data-position="right">
這是從右側展開的內容
</div>
再來我們只需要在呼叫選單的按鈕上，利用超連結的方式，連結到這些 div 的 id，點選按鈕之後，選單就會從左或從右滑出來，非常的簡單。
<a class="ui-btn" href="#left-menu"></a>
<a class="ui-btn" href="#right-menu"></a>
不過 Slider Panel 不單純只有這樣，我們也可以在滑動的 div 內加入 data-display="overlay" ，就可以讓滑出來的選單覆蓋在內容上方，如果沒有加，原本的內容也會水平移動，不會是被覆蓋的效果，可以點選以下的範例，左滑和右滑一個有加 data-display="overlay"，一個沒有加。
範例連結：data-display="overlay" 測試 ( 按下 preview 就可以預覽 )
此外，如果我們在滑動的 div 加入 data-position-fixed="true" 的布林值屬性，若為 true，滑動出來的 div 不會隨著原本畫面的高度影響，可以看以下的範例
範例連結：data-position-fixed 測試 ( 按下 preview 就可以預覽 )
這就是 JQueryMobile Slider Panel 的使用方式，是不是非常簡單呀！