折叠组选项 collapsibleset

corners 圆角。类型:布尔值。默认值:true。

默认为 true,折叠组的第一个和最后一个折叠是圆角。可以设为 false 取消圆角。也在HTML中可以添加 data-corners="false" 属性来取消圆角。

//初始化 
$( ".selector" ).collapsibleset({ corners: false });
 
// getter 
var corners = $( ".selector" ).collapsibleset( "option", "corners" );
 
// setter 
$( ".selector" ).collapsibleset( "option", "corners", false );

collapsedIcon 折叠状态下的图标。类型:字符串。默认值:"plus"。

在折叠状态下,头部的折叠图标默认为“+”,也可以自定义它。也可以在HTML中可以添加 data-collapsed-icon="arrow-r" 属性来设为“向右箭头”。

//初始化 
$( ".selector" ).collapsibleset({ collapsedIcon:  "arrow-r"  });
 
// getter 
var corners = $( ".selector" ).collapsibleset( "option", "collapsedIcon" );
 
// setter 
$( ".selector" ).collapsibleset( "option", "collapsedIcon", "arrow-r" );

expandIcon 展开状态下的图标。类型:字符串。默认值:"minus"。

在展开状态下,头部的折叠图标默认为“-”,也可以自定义他。也可以在HTML中可以添加 data-expanded-icon="arrow-d" 属性来设为“向下箭头”。

//初始化 
$( ".selector" ).collapsibleset({ expandedIcon:  "arrow-d"  });
 
// getter 
var corners = $( ".selector" ).collapsibleset( "option", "expandedIcon" );
 
// setter 
$( ".selector" ).collapsibleset( "option", "expandedIcon", "arrow-d" );

iconpos 图标定位。类型:字符串。默认值:"left"。

默认图标在左侧,也可以自定义它,取值left, right, top, bottom, none, notext。也可以在HTML中可以添加 data-iconpos="right" 属性来设为“在右侧”。

//初始化 
$( ".selector" ).collapsibleset({ iconpos:  "right"  });
 
// getter 
var corners = $( ".selector" ).collapsibleset( "option", "iconpos" );
 
// setter 
$( ".selector" ).collapsibleset( "option", "iconpos", "right" );

inset 全屏宽度无角造型。类型:布尔值。默认值:true。

默认情况下,折叠区域两头有圆角等。若要让他们全屏宽度无角造型,给容器添加 data-inset="false" 属性。

//初始化 
$( ".selector" ).collapsibleset({ inset: false  });
 
// getter 
var corners = $( ".selector" ).collapsibleset( "option", "inset" );
 
// setter 
$( ".selector" ).collapsibleset( "option", "inset", false );

mini 迷你型。类型:布尔值。默认值:false。

一个更紧凑的迷你版本,若给父容器设置为true,单个的子容器也会继承父容器的值。另外,也可以在HTML中给容器添加 data-mini="true" 属性来实现。

//初始化 
$( ".selector" ).collapsibleset({ mini: true  });
 
// getter 
var corners = $( ".selector" ).collapsibleset( "option", "mini" );
 
// setter 
$( ".selector" ).collapsibleset( "option", "mini", true );

theme 主体样式。类型:字符串。默认值:null,从父容器继承。

设置可折叠容器的配色方案(样本)。它接受值从A到Z。jQuery Mobile 预设置了a,b,c,d,e五款样式。另外也可在HTML中给容器添加 data-theme 属性来实现。

//初始化 
$( ".selector" ).collapsibleset({ theme: "a"  });
 
// getter 
var corners = $( ".selector" ).collapsibleset( "option", "theme" );
 
// setter 
$( ".selector" ).collapsibleset( "option", "theme", "a" );

  

initSelector 初始化选择器。类型:CSS选择器。默认值:":jqmData(role='collapsible')"。

这是用来定义选择器(元素类型,数据的角色等等),将被自动初始化为折叠。要更改哪些元素初始化,将这个选项的绑定mobileinit事件。

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

  

折叠组中展开或者关闭

在折叠组中,呼叫各个容器的子元素,使其展开或者关闭的方法。这个方法能应用到多项目组中。

$( "#myCollapsibleSet" ).children().trigger( "collapse" );