jQuery Mobile 折叠

来源:互联网 发布:招标软件 编辑:程序博客网 时间:2024/05/16 11:18

可折叠: 允许隐藏或显示内容  (除了标题<h>外,其他都是折叠的内容)  

                向某容器分配属性  data-role="collapsible"  表示折叠块

            加载时显示扩展内容:data-collapsed="false"   // 默认加载折叠块时是隐藏折叠内容

            e.g.

            <div  data-role="collapsible"  data-collapsed="false">

                   <h1>折叠块显示的标题</h1>  

                   <p>折叠的内容</p>  

            </div>


             折叠块可嵌套: 可嵌套任意次

             e.g.

             <div  data-role="collapsible">

                     <h1>首级折叠标题</h1>

                     <p>首级折叠内容</p>                                                                    

                     <div  data-role="collapsible">

                             <h1>二级折叠标题</h1>

                             <p>二级折叠内容</p>

                     </div>

              </div>

      

             可折叠集合:被组合在一起的可折叠块,内部的折叠块展开具有唯一性(即集合内,打开一个块时,其他块都会关闭)

                                用 data-role="collapsible-set"包装可折叠块

              e.g.

               <div   data-role="collapsible-set">

                     <div  data-role="collapsible">

                           <h1>折叠一</h1>

                           <p>内容一</p>

                      </div>

                      <div  data-role="collapsible">

                             <h1>折叠二</h1>

                             <p>内容二</p>

                      </div>

                 </div>


               其他折叠相关属性:

                      data-inset="false"  // 可消除折叠块外边的圆角

                      data-mini="true"  //变为小号的折叠块

                      data-collapsed-icon="arrow-d"  //折叠时的标题左侧图标

                      data-expanded-icon="arrow-u"  //内容展开时的标题左侧图标       

0 0