N-takデザインブログ

WEBで培った作品や技術を公開しています。

jQuery Mobile 1.3.0 新機能 Panelウィジット

お疲れ様です。

 

今日はjQuery Mobile 1.3.0にバージョンアップされた際の

新機能の1つPanelウィジットを使ってみました。

 

サイドからパネルがぐわーんと開く機能です。

 

ではさっそく搭載してみましょう。

 

 

参考にしたサイトはこちらです。

 jQuery Mobile 1.3.最新情報

 

デモはこちら

デモサンプル 

 

手順はこちらです。

<head>内のscriptのjQuery Mobile は1.3.0にバージョンアップしてください。

 

<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

 

CSSも同様です。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

 

以下をHTMLに貼り付けます。

<div data-role="page" id="hyousi" data-title="jQuery Mobile SAMPLE">

 

    <!-- 左パネルここから -->

    <div data-role="panel" id="leftpanel" data-position-fixed="true" data-display="push" data-position="left" data-theme="a">

    <h3 style=" height: 20px;"></h3><!-- とりあえずスペース --> 

        <ul id="panellist" data-role="listview" data-inset="true" data-theme="a" data-shadow="false">

            <li><a href="#" rel="external">リンク1</a></li>

            <li><a href="#" rel="external">リンク2</a></li>

            <li><a href="#" rel="external">リンク3</a></li>

            <li><a href="#" rel="external">リンク4</a></li>

            <li><a href="#">リンク5</a></li>

            <li><a href="#" rel="external">リンク6</a></li>

            <li data-theme="b"><a href="#" rel="external">リンク7</a></li>

            <li><a href="#l" rel="external">リンク8</a></li>

        </ul>

    

    <a href="#" data-role="button" data-theme="a" data-corners="false" data-mini="true" data-shadow="false" data-rel="close">閉じる</a>

    </div>

    <!-- /左パネルここまで -->

    

  <!-- パネル付ヘッダここから -->

    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="a">

        <h3> サンプルページ </h3>

        <a href="#leftpanel" data-inline="true" data-icon="bars" class="ui-btn-left" data-iconpos="notext" target="_blank">サイドメニューボタン</a>

    </div>

    <!-- /パネル付ヘッダここまで -->

 はい、簡単に実装することができました。

これまでコンテンツが複数あるときはナビやボタンなどに頼っていましたが

これさえあれば、どこのページからも他のページに絡ませることができるので

非常に幅が広がりました。

 

詳しい解説はこちら

 jQuery Mobile 1.3.最新情報

 

今後も四半期ごとにロードマップがユーザー会から発表されていますので

動向に注目です。

 

以上です。