collapsible()
collapsible()はコラプシブルパネルを制御する為のメソッドです。
通常はdata-role=”collapsible”を指定してコラプシブルパネルを生成しますが、JavaScriptで次のメソッドを実行することでもコラプシブルパネルを作成できます。
$( ".selector" ).collapsible();
コラプシブルパネルを作成する際に以下のオプションを指定することができます。
オプション
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()