---
# System prepended metadata

title: Panel
tags: [jQuery Mobile]

---

# Panel

###### tags: `jQuery Mobile` 

---
## Panel
* 分成左右兩邊的側面隱藏選單
    * 右邊選單要多寫
    <span class="code1">data-position="right"</span>
* 通常寫在page與haeder之間
* Overlay / reveal / push
    範例:<span class="code1">data-display="reveal"</span>
* **要注意的是不同頁面的panel不能互相呼叫，所以id要取不一樣**



## Panel open on swipe 
* 手指左右滑出選單的效果
* 可參考官方文件Panel open on swipe，有範例程式碼

jQuery JS程式，#id的地方修改即可
```
$( document ).on( "pagecreate", "#demo-page", function() {
    $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft" ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});
```
:::info
Panel裡面可以放Listview當作選單
:::

實作:
```htmlmixed=
<!-- 左邊選單 -->
<div data-role="panel" id="home-left-panel" data-theme="b" data-display="reveal">
    <!-- LISTVIEW -->
    <ul data-role="listview" data-inset="ture" data-filter="true" data-filter-placeholder="請輸入關鍵字">
        <li data-icon="home">
            <a href="#HOME">
                <h3>HOME</h3>
            </a>
        </li>
        <li data-role="list-diviver" data-theme="b">追蹤</li>
        <li data-icon="star">
            <a href="https://www.youtube.com/user/ONEOKROCKchannel" target="_block">
                <h3>YouTube</h3>
            </a>
        </li>
        <li data-icon="star">
            <a href="https://www.instagram.com/oneokrockofficial/" target="_block">
                <h3>Instagram</h3>
            </a>
        </li>
        <li data-role="list-diviver" data-theme="b">相關資訊</li>
        <li data-icon="star">
            <a href="http://www.oneokrock.com/en/" target="_block">
                <h3>英文官網</h3>
            </a>
        </li>
        <li data-icon="star">
            <a href="http://www.oneokrock.com/en/tour/" target="_block">
                <h3>演唱會資訊</h3>
            </a>
        </li>
    </ul><!-- LISTVIEW end-->
</div>
<!-- 右邊選單 -->
<div data-role="panel" id="home-right-panel" data-position="right" data-display="overlay">
    <p>it's right Panel</p>
</div>
```






---
<style>
h2 {
    color: #2383B8;
}
h3 {
    color: #1AA340;
}
h4 {
    color: white;
    background-color: #2383B8;
    padding:8px;
}

.code1 {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    font-family:'Fira Code';
}
.code {
    padding: 2px 4px;
    font-size: 90%;
    font-family:'Fira Code';
}
</style>