# 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當作選單
:::

實作:

<!-- 左邊選單 -->
<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>