panel()

このエントリーをはてなブックマークに追加

panel()はパネルウィジェットを制御する為のメソッドです。

メソッド

引数にopenを指定することでパネルを開くことができます。

$("#mypanel").panel("open");

また、引数にcloseを指定することでパネルを閉じることができます。

$("#mypanel").panel("close");

sample

引数にtoggleを指定することでパネルが開いている際は閉じ、閉じている場合は開くことが可能です。

$("#mypanel").panel("toggle");

オプション

パネルウィジェットのオプションを指定することも可能です。

たとえば、アニメーションの制御をpanel()から行うには次のように指定します。

$( ".selector" ).panel({ animate: false });

現在のオプションの値を取得するには第1引数に「option」を指定し、第2引数に「option名」を指定することで可能です。

$( ".selector" ).panel( "option", "animate" );

第3引数に「option値」を指定することで特定のオプションの内容を変更することができます。

$( ".selector" ).panel( "option", "animate",false );

利用できるオプションは以下の通り。

animate

Default : true

パネルをアニメーションで開くかどうかを指定できます。

classes.animate

Default : “ui-panel-animate”

パネルとコンテンツを包む要素と、固定配置されたツールバーに付与されるclass名です。このclass名はanimateがtrueであり、3D transformが利用できる環境の場合に付与されます。

classes.contentFixedToolbar

Default : “ui-panel-fixed-toolbar-wrap”

縦スクロールを制御する為、ページ要素に付与されるclass属性です。

classes.contentFixedToolbarClosed

Default : “ui-panel-content-fixed-toolbar-closed”

閉じるアニメーションが終了した際に固定ツールバーに付与されるclass属性です。

classes.contentFixedToolbarOpen

Default : “ui-panel-content-fixed-toolbar-open”

パネルが開いている際に固定ツールバーに付与されるclass属性です。

classes.contentWrap

Default : “ui-panel-content-wrap”

ヘッダーやコンテンツ、フッターの周りを包むラッパーに付与されるclass属性です。パネルのポジションを制御するのに使われます。

classes.contentWrapClosed

Default : “ui-panel-content-wrap-closed”

閉じるアニメーションが終了した際にページのラッパーに付与されるclass属性です。

classes.contentWrapOpen

Default : “ui-panel-content-wrap-open”

パネルが開く際にヘッダーやコンテンツ、フッターの周りを包むラッパーに付与されるclass属性です。transition中にハードウェアアクセラレーションを有効にする為に利用されます。

classes.modal

Default : “ui-panel-dismiss”

パネルを非表示にする際のオーバーレイに付与されるclass属性です。

classes.modalOpen

Default : “ui-panel-dismiss-open”

パネルが表示されている際に表示される不過視のオバーレイに付与されるclass属性です。これはパネルを非表示にする際に利用されます。

classes.pagePanel

Default: “ui-page-panel”

パネル利用時にページコンテナに付与されるclass属性です。

classes.pagePanelOpen

Default: “ui-page-panel-open”

パネル表示時にページに付与されるclass属性です。

classes.panel

Default: “ui-panel”

パネルに追加されるclass属性です。

classes.panelClosed

Default: “ui-panel-closed”

パネル非表示時事に付与されるclass属性です。

classes.panelFixed

Default: “ui-panel-fixed”

パネルの固定配置を利用してい際に付与されるclass属性です。

classes.panelInner

Default: “ui-panel-inner”

パネルを包んでいるdiv要素に付与されるclass属性です。

classes.panelOpen

Default: “ui-panel-open”

パネルが開く際に付与されるclass属性です。これはハードウェアアクセラレーションをtransition中のみ有効にします。

dismissible

Default: true

パネルウィジェットをコンテンツ部分から閉じられなくする設定です。これはdata-dismissible属性でも制御可能です。

display

Default: “overlay”

パネルウィジェットの表示方法を制御する設定です。「reveal」を指定するとパネル部分の上に重なったコンテンツが移動するようにパネルが表示されます。「overlay」を指定すると、コンテンツ部分は移動せずパネルがコンテンツの上に重なる形で表示されます。「push」を指定するとパネルがコンテンツを押し出す形で表示されます。この設定はdata-display属性でも変更可能です。

initSelector

Default: jqmData(role=’panel’)

パネルとして利用される要素をjQueryのセレクタAPIで指定できます。デフォルトではdata-role属性「panel」の要素ですが、以下のように指定するとclass属性「mypanel」をもつ要素をパネルとして利用します。

$( document ).on( "mobileinit", function() {
  $.mobile.panel.prototype.options.initSelector = ".mypanel";
});

position

Default: “left”

パネル表示場所を指定できる設定です。「right」と「left」が指定可能です。この設定はdata-position属性でも指定可能です。

positionFixed

Default: false

パネルウィジェットを固定するかどうか設定できる属性です。この設定はdata-position-fixed属性でも指定可能です。

swipeClose

Default: true

パネルウィジェットの閉じる方法を制御する設定です。「false」を指定することで、パネル部分へのアクションではパネルは閉じなくなります。この設定はdata-swipe-close属性でも指定可能です。

theme

Default: “c”

テーマを変更できる設定です。テーマはデフォルトでは「a」〜「e」でのカラースキームが選択可能です。この設定はdata-theme属性でも変更可能です。

イベント

panel()ではパネルウィジェットの様々なイベントが制御可能です。イベントは次のように引数のオブジェクトにメソッドとして定義します。

$( ".selector" ).panel({
  beforeclose: function( event, ui ) {}
});

利用できるイベントは次の通り

beforeclose( event, ui )

パネルが閉じる際に発火するイベントです。

beforeopen( event, ui )

パネルが開く際に発火するイベントです。

close( event, ui )

パネルが閉じ終った際に発火するイベントです。

create( event, ui )

パネルが生成された際に発火するイベントです。

open( event, ui )

パネルが開き終わった際に発火するイベントです。

jQuery Mobile 1.3.0での追加/変更

panel()はjQuery Mobile 1.3.0で追加されたメソッドです。

参考URL

Panel Widget | jQuery Mobile API Documentation

登録日 : 2013年03月17日 最終更新日 : 2016年12月19日

同じカテゴリー(メソッド)のエントリー

検索

スポンサードリンク

バージョン

リファレンス