collapsibleset()
collapsibleset()はアコーディオンウィジェットの制御を行うためのメソッドです。
通常はdata-role=”collapsible-set”を指定してアコーディオンパネルを生成しますが、JavaScriptで次のメソッドを実行することでもアコーディオンパネルを作成できます。
$( ".selector" ).collapsibleset();
アコーディオンパネルを作成する際に以下のオプションを指定することができます。
オプション
collapsedIcon
Default : “plus”
アコーディオンパネルで表示されるアイコンを変更できます。これはdata-collapsed-icon属性に対する指定と同じです。
$( ".selector" ).collapsibleset({ collapsedIcon: "plus" });
このオプションは以下のような記述で取得・変更が可能です。
// 取得
var collapseCueText = $( ".selector" ).collapsibleset( "option", "collapsedIcon" );
// 変更
$( ".selector" ).collapsibleset( "option", "collapsedIcon" , "plus" );
corners
Default : true
falseを指定することでアコーディオンパネルを角丸ではなくすることができます。これはdata-corners属性に対する指定と同じです。
$( ".selector" ).collapsibleset({ corners: false });
このオプションは以下のような記述で取得・変更が可能です。
// 取得
var collapseCueText = $( ".selector" ).collapsibleset( "option", "corners" );
// 変更
$( ".selector" ).collapsibleset( "option", "corners", false );
expandedIcon
Default : “minus”
アコーディオンパネルが開いた状態のアイコンを変更できます。これはdata-expanded-icon属性に対する指定と同じです。
$( ".selector" ).collapsibleset({ expandedIcon: "arrow-d" });
このオプションは以下のような記述で取得・変更が可能です。
// 取得
var collapseCueText = $( ".selector" ).collapsibleset( "option", "expandedIcon" );
// 変更
$( ".selector" ).collapsibleset( "option", "expandedIcon", "arrow-d" );
iconpos
Default : “left”
表示されるアイコンの位置を指定できます。これはdata-iconpos属性に対する指定と同じです。
$( ".selector" ).collapsibleset({ iconpos: "right" });
このオプションは以下のような記述で取得・変更が可能です。
// 取得
var collapseCueText = $( ".selector" ).collapsibleset( "option", "iconpos" );
// 変更
$( ".selector" ).collapsibleset( "option", "iconpos", "right" );
initSelector
Default : “:jqmData(role=’collapsible’)”
アコーディオンパネルはdata-role=”collapsibleset”を指定している要素に対して自動生成が行なわれますが、これを他の要素に変更することができます。このオプションはmobileinitイベントを利用して指定する必要があります。
$( document ).on( "mobileinit", function() {
$.mobile.collapsibleset.prototype.options.initSelector = ".mycollapsible";
});
inset
Default : true
表示されるアイコンの位置を指定できます。これはdata-inset属性に対する指定と同じです。
$( ".selector" ).collapsibleset({ inset: false });
このオプションは以下のような記述で取得・変更が可能です。
// 取得
var collapseCueText = $( ".selector" ).collapsibleset( "option","inset");
// 変更
$( ".selector" ).collapsibleset( "option", "inset", "false" );
mini
Default : false
trueを指定するとヘッダーのサイズが小さくなります。。これはdata-mini属性に対する指定と同じです。
$( ".selector" ).collapsibleset({ mini: true });
このオプションは以下のような記述で取得・変更が可能です。
// 取得
var collapseCueText = $( ".selector" ).collapsibleset( "option", "mini" );
// 変更
$( ".selector" ).collapsibleset( "option", "mini", true );
theme
Default : null
アコーディオンルのテーマを変更できます。これはdata-theme属性に対する指定と同じです。
$( ".selector" ).collapsibleset({ theme: "a" });
このオプションは以下のような記述で取得・変更が可能です。
// 取得
var collapseCueText = $( ".selector" ).collapsibleset( "option", "theme" );
// 変更
$( ".selector" ).collapsibleset( "option", "theme", "a" );
メソッド
refreshメソッドはアコーディオンを再描画します。JavaScriptなどでコラプシブルパネルを追加した場合など再描画が必要なさいに利用します。
$( ".selector" ).collapsibleset( "refresh" );
イベント
create()
アコーディオンパネルが生成された際に発火するイベントです。
$( ".selector" ).collapsibleset({
create: function( event, ui ) {}
});
参考URL
Collapsible set Widget | jQuery Mobile API Documentation
登録日 : 2013年07月29日 最終更新日 : 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()