JQuery 创建可折叠效果的菜单
2014-03-13 01:03
260 查看
要创建内容折叠块。首先,创建一个容器,并添加 data-role="collapsible" 属性。并且给此容器使用 data-content-theme 属性,为可折叠的内容块,进行主题样式设计。
其次,在容器中,添加任何头部区域的标题(h1-h6)或图例元素(egend element)。JQuery Mobile框架将样式化头部,使其看起来像一个可点击的按钮,并添加一个“+”图标左边表示它的膨胀。最后,在头部区域后,添加任何HTML标记作为被折叠的内容区域。JQuery Mobile框架将把这个标记为包裹起来。当点击头部标题的时候,内容将被折叠隐藏或者显示出来。
默认情况下,内容是被折叠起来的。
<div data-role="collapsible"> <h3>I'm a header</h3> <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p> </div>
折叠起来的样式
点击被打开样式
展开折叠 data-collapsed="false"
默认情况下,可折叠容器是收缩的,可以通过通过点击头部展开。给容器添加 data-collapsed="false" 属性,可实现当加载页面的时候,折叠内容区域为展开样式。<div data-role="collapsible" data-collapsed="false" >
取消圆角 data-inset="false"
默认情况下折叠区域有插图的外观(两头有圆角等)。若要让他们全屏宽度无角造型,给容器添加 data-inset="false" 属性。<div data-role="collapsible" data-inset="false" >
迷你型 data-mini="true"
一个更紧凑的版本,在工具栏和紧空间是有用的,添加 data-mini="true" 属性即可<div data-role="collapsible" data-mini="true" >
自定义图标 data-collapsed-icon
可折叠的标题的默认图标可以通过使用data-collapsed-icon和data-expanded-icon属性数据扩展。在以下情况下,data-collapsed-icon="arrow-r"和data-expanded-icon="arrow-d"。
<div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"> <h3>I have custom icons</h3> <p><code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code></p> </div>
展开前的效果
展开后的效果
图标定位 data-iconpos
默认情况下,图标位于左侧。但可是使用 data-iconpos 属性来自定义。下例子中,使用了data-iconpos="right"来自定义:<div data-role="collapsible" data-iconpos="right"> <h3>I'm a header</h3> <p><code>data-iconpos="right"</code></p> </div>
折叠内容区的主题样式 data-content-theme
在可折叠的标题和内容之间,提供一个强大的视觉美化效果,给容器添加 data-content-theme 属性的和指定的主题样本的字母(如,a、b、c、d、e)。使内容块有:边界线和平坦的背景颜色(非渐变色)和底部圆角。使他们看起来像是一组。<div data-role="collapsible" data-content-theme="c"> <h3>Header</h3> <p>I'm the collapsible content with a themed content block set to "c".</p> </div>
展开前的效果
展开后的效果
折叠标题区的主题样式 data-theme
设置在一个可折叠的主题标题按钮,添加 data-theme 属性的包装和指定一个样本的字母(如,a、b、c、d、e)。请注意,你可以分别设置标题和内容的这些主题匹配属性。<div data-role="collapsible" data-theme="a" data-content-theme="a"> <h3>Header swatch A</h3> <p>I'm the collapsible content with a themed content block set to "a".</p> </div>
<div data-role="collapsible" data-theme="b" data-content-theme="b"> <h3>Header swatch B</h3> <p>I'm the collapsible content with a themed content block set to "b".</p> </div>
展开前的效果
展开后的效果
嵌套折叠区
根据需要折叠区可以彼此嵌套。在下面例子中,我们设置的内容主题提供清晰的视觉效果。<div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c"> <h3>I'm a header</h3> <p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p> <div data-role="collapsible" data-theme="c" data-content-theme="c"> <h3>I'm a nested collapsible with a child collapsible</h3> <p>I'm a child collapsible.</p> <div data-role="collapsible" data-theme="d" data-content-theme="d"> <h3>Nested inside again.</h3> <p>Three levels deep now.</p> </div><!-- /section 1A --> </div><!-- /section 1 --> <div data-role="collapsible" data-content-theme="c"> <h3>Section 3: Form elements</h3> <form action="#" method="get"> <div data-role="fieldcontain"> <label for="textarea">Textarea:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> </div> <div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div> <fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div> <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div> </fieldset> </form> </div><!-- /section 2 --> <div data-role="collapsible" data-content-theme="c"> <h3>Section 4: Collapsed list</h3> <p>Here is an inset list:</p> <ul data-role="listview" data-inset="true" data-theme="d"> <li><a href="index.html">Acura</a></li> <li><a href="index.html">Audi</a></li> <li><a href="index.html">BMW</a></li> <li><a href="index.html">Cadillac</a></li> <li><a href="index.html">Chrysler</a></li> <li><a href="index.html">Dodge</a></li> <li><a href="index.html">Ferrari</a></li> <li><a href="index.html">Ford</a></li> </ul> </div><!-- /section 3 --> </div>
展开前的效果
展开后的效果
相关文章推荐
- Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js
- 10 个非常酷的基于jQuery的菜单效果插件 《转》
- jQuery实现的超酷苹果风格图标滑出菜单效果代码
- jQuery采用连缀写法实现的折叠菜单效果
- jquery实现个人中心导航菜单效果和美观都非常不错
- jquery实现可横向和竖向展开的动态下滑菜单效果
- jquery动画 -- 2.元素坐标动画效果(创建一个图片走廊)
- 基于jQuery实现的向下滑动二级菜单效果代码
- jQuery实现固定在网页顶部的菜单效果代码
- jquery实现折叠菜单效果【推荐】
- jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
- js实现可折叠展开的手风琴菜单效果
- JavaScript CSS创建右击菜单效果代码
- 10 个非常酷的基于jQuery的菜单效果插件 《转》
- 10 个非常酷的基于jQuery的菜单效果插件 《转》
- 使用Jquery+CSS如何创建流动导航菜单-Fluid Navigation
- 使用jQuery和CSS3创建一个全屏幕幻灯效果
- jQuery精仿手机上的翻牌效果菜单
- jquery+css实现的红色线条横向二级菜单效果
- jquery实现适用于门户站的导航下拉菜单效果代码