折叠选项 collapsible

collapseCueText 折叠的提示信息。类型:字符串。默认值:" click to collapse contents "。

给使用屏幕阅读器软件的用户,提供文本信息的提示。

//初始化指定的折叠提示信息 
$( ".selector" ).collapsible({ collapseCueText: " collapse with a click" });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "collapseCueText" );
 
// setter 
$( ".selector" ).collapsible( "option", "collapseCueText", " collapse with a click" );

  

expandCueText 展开的提示信息。类型:字符串。默认值:" click to expand contents "。

给使用屏幕阅读器软件的用户,提供文本信息的提示。

//初始化指定的展开提示信息 
$( ".selector" ).collapsible({ expandCueText: " expand with a click" });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "expandCueText" );
 
// setter 
$( ".selector" ).collapsible( "option", "expandCueText", " expand with a click" );

  

collapsed 折叠。类型:布尔值。默认值:true

折叠的默认值是 true。当首次加载的时候,折叠区域是折叠在一起的,头部标题图标是“+”号。当设置为 false 的时候,折叠区域为展开状态,头部图片是“-”号。这个选项,也可以在HTML中使用属性:data-collapsed="false"来设置,可实现当加载页面的时候,折叠内容区域为展开样式,头部标题图标是“-”。

//初始化指定的折叠选项 
$( ".selector" ).collapsible({ collapsed:  false  });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "collapsed" );
 
// setter 
$( ".selector" ).collapsible( "option", "collapsed",  false  );

  

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

在折叠状态下,设置折叠头部标题的图标是“+”。这个也可以通过添加 data-collapsed-icon="arrow-r" 属性来设定图标为“向右的箭头”。

//初始化指定的选项 
$( ".selector" ).collapsible({ collapsedIcon:  "arrow-r"  });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "collapsedIcon" );
 
// setter 
$( ".selector" ).collapsible( "option", "collapsedIcon",  "arrow-r"  );

  

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

在展开状态下,设置折叠头部标题的图标式“-”号。这个也可以通过添加 data-expand-icon="arrow-d" 属性来设定图标为“向下的箭头”。

//初始化指定的选项 
$( ".selector" ).collapsible({ expandIcon:  "arrow-d"  });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "expandIcon" );
 
// setter 
$( ".selector" ).collapsible( "option", "expandIcon",  "arrow-d"  );

  

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

定位折叠区域的头部标题图标。取值范围:left,right,top,bottom,none,notext。这个也可以通过添加 data-iconpos="right" 属性来实现定位到右侧。

//初始化指定的选项 
$( ".selector" ).collapsible({ iconpos:  "right"  });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "iconpos" );
 
// setter 
$( ".selector" ).collapsible( "option", "iconpos",  "right"  );

  

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

折叠主题默认是true,边界半径是圆角的。若设置false取消半径圆角,成为全屏的直角。这个也可以同构HTML中添加 data-corners="false" 属性来实现。

$( ".selector" ).collapsible({ corners:  false  }); 
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "corners" );
 
// setter 
$( ".selector" ).collapsible( "option", "corners",  false  );

  

heading 头部标题。类型:字符串。默认值:"h1,h2,h3,h4,h5,h6,legend"

可折叠的容器内,第一次直接相匹配的子元素选择器将作为可折叠的头标题。

//初始化指定的选项 
$( ".selector" ).collapsible({ heading:  ".mycollapsibleheading"  });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "heading" );
 
// setter 
$( ".selector" ).collapsible( "option", "heading",  ".mycollapsibleheading"  );

  

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

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

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

inset 类型:布尔值。默认值:true

通过设置这个选项为false,元素将无角,全幅的外观。如果可折叠容器的值是false,可折叠的部分的值是从父折叠集继承。

默认情况下折叠区域有插图的外观(两头有圆角等)。若要让他们全屏宽度无角造型,这个选项可以通过HTML中的 data-inset="false" 属性来设置。

//初始化指定的选项 
$( ".selector" ).collapsible({ inset:  false  });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "inset" );
 
// setter 
$( ".selector" ).collapsible( "option", "inset",  false  );

  

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

设置可折叠容器的配色方案(样本)。它接受值从A到Z。也可在HTML中给容器添加 data-theme 属性来实现。

//初始化指定的选项 
$( ".selector" ).collapsible({ theme:  "a"  });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "theme" );
 
// setter 
$( ".selector" ).collapsible( "option", "theme",  "a"  );

  

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

集到一个更紧凑的元素的大小,迷你版。如果容器值是false,可折叠的部分的值是从父折叠集继承。也可在HTML中给容器添加 data-mini="true" 来实现。

//初始化指定的选项 
$( ".selector" ).collapsible({ mini:  true  });
 
// getter 
var collapseCueText = $( ".selector" ).collapsible( "option", "mini" );
 
// setter 
$( ".selector" ).collapsible( "option", "mini",  true  );