jQuery Mobile リファレンス

Tweet

collapsible()はコラプシブルパネルを制御する為のメソッドです。

通常はdata-role=”collapsible”を指定してコラプシブルパネルを生成しますが、JavaScriptで次のメソッドを実行することでもコラプシブルパネルを作成できます。

$( ".selector" ).collapsible();

sample

コラプシブルパネルを作成する際に以下のオプションを指定することができます。

オプション

collapseCueText

Default : “click to collapse contents”

スクリーンリーダーなど向けの補助テキストを指定できます。

$( ".selector" ).collapsible({ collapseCueText: " collapse with a click" });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "collapseCueText" );
// 変更
$( ".selector" ).collapsible( "option", "collapseCueText", " collapse with a click" );

collapsed

Default : true

falseを指定することでコラプシブルパネルの初期表示を開いた状態にすることができます。これはdata-collapsed属性に対する指定と同じです。

$( ".selector" ).collapsible({ collapsed: false });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "collapsed" );
// 変更
$( ".selector" ).collapsible( "option", "collapsed", false );

collapsedIcon

Default : “plus”

コラプシブルパネルで表示されるアイコンを変更できます。これはdata-collapsed-icon属性に対する指定と同じです。

$( ".selector" ).collapsible({ collapsedIcon: "plus" });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "collapsedIcon" );
// 変更
$( ".selector" ).collapsible( "option", "collapsedIcon" , "plus" );

corners

Default : true

falseを指定することでコラプシブルパネルを角丸ではなくすることができます。これはdata-corners属性に対する指定と同じです。

$( ".selector" ).collapsible({ corners: false });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "corners" );
// 変更
$( ".selector" ).collapsible( "option", "corners", false );

expandCueText

Default : “click to expand contents”

スクリーンリーダーなど向けの補助テキストを指定できます。

$( ".selector" ).collapsible({ expandCueText: " expand with a click" });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "expandCueText" );
// 変更
$( ".selector" ).collapsible( "option", "expandCueText", " expand with a click" );

expandedIcon

Default : “minus”

コラプシブルパネルが開いた状態のアイコンを変更できます。これはdata-expanded-icon属性に対する指定と同じです。

$( ".selector" ).collapsible({ expandedIcon: "arrow-d" });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "expandedIcon" );
// 変更
$( ".selector" ).collapsible( "option", "expandedIcon", "arrow-d" );

heading

Default : “h1,h2,h3,h4,h5,h6,legend”

コラプシブルパネルでヘッダーとして利用される要素を指定できます。

$( ".selector" ).collapsible({ heading: ".mycollapsibleheading" });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "heading" );
// 変更
$( ".selector" ).collapsible( "option", "heading", ".mycollapsibleheading" );

iconpos

Default : “left”

表示されるアイコンの位置を指定できます。これはdata-iconpos属性に対する指定と同じです。

$( ".selector" ).collapsible({ iconpos: "right" });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "iconpos" );
// 変更
$( ".selector" ).collapsible( "option", "iconpos", "right" );

initSelector

Default : “:jqmData(role=’collapsible’)”

コラプシブルパネルはdata-role=”collapsible”を指定している要素に対して自動生成が行なわれますが、これを他の要素に変更することができます。このオプションはmobileinitイベントを利用して指定する必要があります。

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

inset

Default : true

表示されるアイコンの位置を指定できます。これはdata-inset属性に対する指定と同じです。

$( ".selector" ).collapsible({ inset: false });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option","inset");
// 変更
$( ".selector" ).collapsible( "option", "inset", "false" );

mini

Default : false

trueを指定するとヘッダーのサイズが小さくなります。。これはdata-mini属性に対する指定と同じです。

$( ".selector" ).collapsible({ mini: true });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "mini" );
// 変更
$( ".selector" ).collapsible( "option", "mini", true );

theme

Default : null

コラプシブルパネルのテーマを変更できます。これはdata-theme属性に対する指定と同じです。

$( ".selector" ).collapsible({ theme: "a" });

このオプションは以下のような記述で取得・変更が可能です。

// 取得
var collapseCueText = $( ".selector" ).collapsible( "option", "theme" );
// 変更
$( ".selector" ).collapsible( "option", "theme", "a" );

イベント

コラプシブルパネルは以下のイベントで制御できます。

collapse()

コラプシブルパネルが閉じる際に発火するイベントです。

$( ".selector" ).collapsible({
  collapse: function( event, ui ) {}
});

create()

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

$( ".selector" ).collapsible({
  create: function( event, ui ) {}
});

expand()

コラプシブルパネルが開く際に発火するイベントです。

$( ".selector" ).collapsible({
  expand: function( event, ui ) {}
});

参考URL

Collapsible Widget | jQuery Mobile API Documentation

登録日 : 2013年07月07日 最終更新日 : 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()