panel()
panel()はパネルウィジェットを制御する為のメソッドです。
メソッド
引数にopenを指定することでパネルを開くことができます。
$("#mypanel").panel("open");
また、引数にcloseを指定することでパネルを閉じることができます。
$("#mypanel").panel("close");
引数に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日
同じカテゴリー(メソッド)のエントリー
- $.widget()
- enhanceWithin()
- collapsibleset()
- collapsible()
- checkboxradio()
- buttonMarkup()
- button()
- $.mobile.silentScroll()
- $.mobile.path.parseUrl()
- $.mobile.path.makeUrlAbsolute()
- $.mobile.path.isRelativeUrl()
- $.mobile.path.isAbsoluteUrl()
- $.mobile.path.get()
- $.mobile.navigate()
- jqmEnhanceable()
- panel()
- popup()
- selectmenu()
- slider()
- textinput()
- $.mobile.changePage()
- page()
- $.mobile.LoadPage()
- dialog()