jQuery Mobile-パネル

説明

*_data-role = "panel" _* 属性を使用して、画面の左側または右側から移動してコンテンツを表示する基本パネル。

例

次の例では、jQuery Mobileフレームワークでの_panel_の使用について説明します。

<!DOCTYPE html>
<html>
   <head>
      <title>Panel</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "panel" id = "panel1">
            <h2>This is Panel Header</h2>
            <p>You can close this panel by pressing the Esc key or by swiping.</p>
         </div>

         <div data-role  =  "header">
            <h2>Header</h2>
         </div>

         <div data-role  =  "main" class  =  "ui-content">
            <p>Click on the button to open Panel.</p>
            <a href = "#panel1" class = "ui-btn ui-btn-inline">Open Panel</a>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のHTMLコードを jqm_panelsl ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/jqm_panelslとして開くと、次の出力が表示されます。

パネルマークアップ

ページ内にパネルコンテンツを書き込むことができます。パネルコンテンツは、ヘッダー、コンテンツ、およびフッター要素と兄弟です。ページ外にパネルマークアップを書くことはできません。次の形式になります。

<div data-role = "page">
   <div data-role = "panel" id = "panel1">
      <!-- panel content -->
   </div><!-- end of panel -->

   <!-- header -->
   <!-- content -->
   <!-- footer -->
</div><!-- end of page -->

動的コンテンツ

次の形式で示すように、パネルの updatelayout イベントを使用して、パネルにコンテンツを動的に追加したり、パネルが開いているときにコンテンツを非表示にしたりできます。

$( "#panel1" ).trigger( "updatelayout" );

パネルのコンテンツの高さを確認し、パネルの高さが超えている場合、 _ min-height_ 属性を使用してコンテンツの高さを設定し、 _ data-position-fixed =を使用してパネルの位置を設定します「true」_ 属性。

パネルを開く

パネルを開くには、 _ href_ 属性をパネルのIDに設定します。これにより、リンクがパネルに結び付けられます。リンクをクリックするとパネルが開き、もう一度クリックしてパネルを閉じます。

パネルを閉じる

パネルの外側をクリックするか、左または右にスワイプするか、Escキーを押すと、パネルを閉じることができます。スワイプ効果は、 _ data-swipe-close = "false" _ 属性を使用してオフにできます。場合によっては、パネルの外側をクリックしてパネルを閉じることができます。 _data-dismissible = "false" _ をパネルに追加して、このアクションを回避できます。 _data-rel = "close" _ 属性をパネルに追加して、パネルを閉じることもできます。

パネルアニメーション

ブラウザが3D変換のサポートを提供している場合、パネルでアニメーションを使用できます。 * translate3d（x、y、z）* CSS変換を使用して、パネルをアニメーション化します。アニメーションを使用したくない場合は、パネルコンテナに _data-animate = "false" _ 属性を使用します。

パネルの配置

ページ内のパネルの位置を指定し、 _ position：absolute_ CSSプロパティでパネルを表示します。パネルの position：fixed 属性を使用してコンテンツを表示します。パネルの _dataposition-fixed = "true" _ 属性を使用してページをどれだけスクロールしてもかまいません。コンテンツがページ領域に収まらないほど多い場合、フレームワークは位置を固定せずにコンテンツを表示します。

スタイリングパネル

jQuery Mobileフレームワークは、パネルのスタイルを提供します。デフォルトでは、パネルはシンプルなスタイルになりますが、ユーザーの基準に従ってカスタマイズできます。 15ピクセルのパディングを含む ui-panel-inner クラスを使用して、コンテンツをdivで囲むことができます。さまざまな種類のテーマを使用して、パネルのテーマの背景を設定できます。パネルのデフォルトテーマは「 c 」で、* _ data-theme ' 属性を使用してパネルのテーマを設定します。テーマを設定したくない場合は、 * data-theme = "none" _ 属性を使用して独自のクラスを使用してパネルのスタイルを設定します。

パネルをレスポンシブにする

jQuery Mobileフレームワークにより、パネルが応答しやすくなり、パネルメニューとページを一緒に使用できます。ページに特定のブレークポイントを使用するか、ページコンテナに事前設定されたクラス= * _ "ui-responsive-panel" _ *ブレークポイントを使用できます。

Jquery-mobile-jqm-panels