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日

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

検索

スポンサードリンク

バージョン

リファレンス