博客访问： 2835516
博文数量： 659
博客积分： 15410
博客等级： 上将
技术积分： 6913
注册时间：
认证徽章：
独学而无友，则孤陋而寡闻！
IT168企业级官微
微信号：IT168qiye
系统架构师大会
微信号：SACC2013
分类： Web开发
accordion做菜单，发现经常出现一个小的垂直滚动条，非常雅观，见下图：
经过查看源代码，发现accordion还有一个选项：
heightStyleType: String
Default: "auto"
Controls the height of the accordion and each panel. Possible values:
&&&&"auto": All panels will be set to the height of the tallest panel.
&&&&"fill": Expand to the available height based on the accordion
&&& "content": Each panel will be only as tall as its content.
把它设置为content：
再看效果：
阅读(2659) | 评论(0) | 转发(0) |
相关热门文章
给主人留下些什么吧！~~
请登录后评论。MX2004组件(二)Accordion[折叠菜单]继承：UIObject--&UIComponent--&View--&Accordion&包:&mx.containers.Accordion&
&2k4中新增的组件，可以用来做折叠菜单，也可以用来做成一个用户注册界面，就像MM站上那种，第一步，第二步。。。做成折叠菜单的形式。&Accordion组件一般有三种工作方式:&Accordion跟Screen对像的结合&Accordion跟MovieClip结合&使用AS2 &Accordion跟Screen对像的结合应用&打开flash?&New&and&select&Flash&Form&Application.&双击Form1,并输入addressForm&这里我们将把addressForm做为Accordion的子菜单内容来用。&选中addressForm,在属性面板里设置visible=false,作用是让addressForm的内容只在Accordion组件中可见&拖几个Button或Label组件到addressForm中，随便做个类似用户名，地址表单之类的东东，拿画笔画点什么也行.然后把它们排列好，并把排列好的一堆东东放到addressForm的左上角[addressForm的左上角对应着Accordion组件菜单内容的左上角,如果不放好，在myAccordion中会看不到的]& &&重复b—&d步骤，再创建一个checkoutForm&创建一个新的Form起名为accordionForm,放置Accordion组件.&拖一个Accordion组件到accordionForm上。起名为myAccordion&保持myAccordion的选中状态,在属性面板里做如下设置：&childSymbols属性中填:addressForm,addressForm,checkoutForm[就是我们刚刚创建的Form的名字]&childSymbols属性指出哪些form将做为myAccordion组件的子菜单内容。第一个和第二个用了同一个addressForm是因为在这个例子中这两个子菜单的内容是一样的。你也可以自定义成别的。&childNames属性中填:shippingAddress,billingAddress,checkout&这里填的三个字符串是提供给as脚本用的，当你需要用as来控制myAccordion的子菜单时就能用到这三个字符串&childLable属性中填:Shipping&Address,Billing&Address,Checkout&这三个字符串将作为myAccordion菜单的标题来显示. &&i)ctrl+enter测试 & &2)Accordion跟MovieClip结合&a)选择&File&&&New&and&create&a&new&Flash&Document.&b)ctrl+F8(or&insert(New&symbol)起名为AddressForm,点击Advance按钮，选中Export&for&ActionScript.并在AS2.0&class处填：mx.core.View.这样做的目的是让Accordion的子菜单继承View类，因而可以实现tab&order,当然，AS2.0处不填Accordion组件也可以正常工作只是不能自定义tab&order &&c),拖几个Button,Label组件到addressForm&这个mc中，排列好，并把排列好的所有元素的位置定到(0,0)[addressForm这个mc中的(0,0)坐标对应着Accordion的(0,0)坐标].&d)回到主场景&e)重复b,c步骤再创建一个CheckoutForm&f)拖一个Accordion组件到主场景，起名为myAccordion并编辑如下属性&childSymbols:[AddressForm,AddressForm,CheckoutForm]&childName:[shippingAddress,billingAddress,checkout]&childLable:[Shipping&Address,Billing&Address,Check&Out] &&g)测试 & &使用AS2 &选择&File&&&New&and&create&a&new&Flash&Document.&拖一个Accordion组件到主场景,并起名为myAccordion&拖一个TextInput和一个Label组件到主场景并删除它们,这样做的目的是把它们导入库中以便在as中使用&在主场景第一帧写： &//&创建三个Accordion子菜单,分别为shippingAddress,billingAddress,payment,createChild方法的用法简单说一下，下面的语句创建一个View类的实例，叫做shippingAddress,并设定它的label属性（也就是标题文字）为”Shipping&Address”,其它类似&myAccordion.createChild("View",&"shippingAddress",&{label:"Shipping&Address"});&myAccordion.createChild("View",&"billingAddress",&{label:"Billing&Address"});&myAccordion.createChild("View",&"payment",&{label:"Payment"}); &//创建第一个子菜单的内容,把TextInput,Label组件加到子菜单中&//这里的createChild方法是在shippingAddress子菜单中创建一个库中存在的一个”TextInput”组件的实例，命名为“FirstName”其它类似&var&o=myAccordion.shippingAddress.createChild("TextInput","FirstName"screen.width/2)this.width=screen.width/2" vspace=2 border=0&;&var&l=myAccordion.shippingAddress.createChild("Label","FirstName",{text:"FirstName"});&l.move(0,10)&o.move(70,10);&o.setSize(110,20); &//创建第二个子菜单的内容&o=myAccordion.billingAddress.createChild("TextInput","LastName"screen.width/2)this.width=screen.width/2" vspace=2 border=0&;&l=myAccordion.billingAddress.createChild("Label","LastName",{text:"LastName"});&l.move(0,50);&o.move(80,50);&o.setSize(150,20);&&&&& & &这就是Accordion组件的基本用法，有关一些其它的方法，属性，可以查下帮助，然后逐个试一下,很容易明白的。
本文已收录于以下专栏：
相关文章推荐
转自：/.html
CSS过滤器有两种，其中一种是静态过滤器，可以使对象产生静态的特殊效果；另一种是动态过滤器，...
Easyui-accordion的菜单项之间添加间隔
他的最新文章
讲师：王哲涵
讲师：王渊命
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)jQuery EasyUI Accordion可伸缩面板组件使用详解
作者：hai_cheng001
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了jQuery EasyUI Accordion可伸缩面板组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Accordion 可伸缩面板组件，基于panel，示例如下：
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&script type="text/javascript" src="easyui/jquery.min.js"&&/script&
&script type="text/javascript" src="easyui/jquery.easyui.min.js"&&/script&
&script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" &&/script&
&link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" rel="external nofollow" /&
&link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /&
&title&Document&/title&
$(function(){
$('#ac').accordion({
//面板属性
animate:true, //定义展开和折叠的时候是否显示动画效果
width:600,
//面板宽度
height:200,
//面板高度
fit :false,
//自适应父容器 默认false 在此例中就是浏览器，设置为true面板会铺满浏览器
border:true, //是否显示边框
multiple:false, //是否可以同时展示多个面板1.3.5可用
selected:0,
//设置默认展开的顺序号
//面板操作触发事件
//面板被选中时触发事件
onSelect:function(title,index){
//alert(title+':'+index)
//onUnselect
//onBeforeRemove
//onRemove
//组件的方法
/**下面是accordion组件提供的一系列可调用的方法*/
//alert($("ac").accordion("options").width)//获取组件对象的某个属性
var panels = $("#ac").accordion("panels");//返回的是panel数组,即每一个单独面板,可以应用panel的属性
//alert(panels[0].panel('options').width);
$("#ac").accordion("resize"); //调整面板大小
var selectedPanel=$("#ac").accordion("getSelected");//获取选中的面板
var selectedPanels=$("#ac").accordion("getSelections");//获取所有选中的面板
var panel=$("#ac").accordion("getPanel",2);//获取指定的面板，参数可以是面板编号和面板tatle
var index = $('#ac').accordion('getPanelIndex', selectedPanel);//获取指定面板在accordion中的索引 ，参数是某个panel
$("#ac").accordion("select",2);//指定被选中的面板 参数是面板编号或者title
$("#ac").accordion("unselect",1);//跟上一个方法相对应
//添加一个新的面板,为新面板指定属性
$('#ac').accordion('add', {
title: '新标题',
content: '新内容',
selected: false
$("#ac").accordion("remove",1)//移除一个面板，参数是面板编号或者title
&div id="ac" &
&div title="Title1" iconCls="icon-save" style="overflow:padding:10"&
&div title="Title2" iconCls="icon-reload" split:true " style="padding:10"&
&div title="Title3" iconCls="icon-edit"&
点此下载源代码：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Accordion 使用说明及演示 | Amaze UI
Web 组件 Accordion 折叠面板 手风琴折叠面板组件。目录组件演示default（圆角灰边）就这样恣意的活着置身人群中你只需要被淹没 享受 沉默退到人群后你只需给予双手 微笑 等候让生命去等候，去等候，去等候，去等候走在忠孝东路徘徊在茫然中在我的人生旅途选择了多少错误我在睡梦中惊醒感叹悔言无尽恨我不能说服自己接受一切教训让生命去等候等候下一个漂流让生命去等候等候下一个伤口我就这样告别山下的家我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
data-am-widget=&accordion& class=&am-accordion am-accordion-default& data-am-accordion=&{ &multiple&: true }&&
class=&am-accordion-item am-active am-disabled&&
class=&am-accordion-title&&
就这样恣意的活着
class=&am-accordion-bd am-collapse am-in&&
class=&am-accordion-content&&
置身人群中 /& 你只需要被淹没 享受 沉默 /& 退到人群后 /& 你只需给予双手 微笑 等候
class=&am-accordion-item&&
class=&am-accordion-title&&
让生命去等候，去等候，去等候，去等候
class=&am-accordion-bd am-collapse &&
class=&am-accordion-content&&
走在忠孝东路 /& 徘徊在茫然中 /& 在我的人生旅途 /& 选择了多少错误 /& 我在睡梦中惊醒 /& 感叹悔言无尽 /& 恨我不能说服自己 /& 接受一切教训 /& 让生命去等候 /& 等候下一个漂流 /& 让生命去等候 /&等候下一个伤口
class=&am-accordion-item&&
class=&am-accordion-title&&
我就这样告别山下的家
class=&am-accordion-bd am-collapse &&
class=&am-accordion-content&&
我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
basic（极简无边框）就这样恣意的活着置身人群中你只需要被淹没 享受 沉默退到人群后你只需给予双手 微笑 等候让生命去等候，去等候，去等候，去等候走在忠孝东路徘徊在茫然中在我的人生旅途选择了多少错误我在睡梦中惊醒感叹悔言无尽恨我不能说服自己接受一切教训让生命去等候等候下一个漂流让生命去等候等候下一个伤口我就这样告别山下的家我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
data-am-widget=&accordion& class=&am-accordion am-accordion-basic& data-am-accordion=&{
class=&am-accordion-item am-active&&
class=&am-accordion-title&&
就这样恣意的活着
class=&am-accordion-bd am-collapse am-in&&
class=&am-accordion-content&&
置身人群中 /& 你只需要被淹没 享受 沉默 /& 退到人群后 /& 你只需给予双手 微笑 等候
class=&am-accordion-item&&
class=&am-accordion-title&&
让生命去等候，去等候，去等候，去等候
class=&am-accordion-bd am-collapse &&
class=&am-accordion-content&&
走在忠孝东路 /& 徘徊在茫然中 /& 在我的人生旅途 /& 选择了多少错误 /& 我在睡梦中惊醒 /& 感叹悔言无尽 /& 恨我不能说服自己 /& 接受一切教训 /& 让生命去等候 /& 等候下一个漂流 /& 让生命去等候 /&等候下一个伤口
class=&am-accordion-item&&
class=&am-accordion-title&&
我就这样告别山下的家
class=&am-accordion-bd am-collapse &&
class=&am-accordion-content&&
我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
gapped（扁平分离边框）就这样恣意的活着置身人群中你只需要被淹没 享受 沉默退到人群后你只需给予双手 微笑 等候让生命去等候，去等候，去等候，去等候走在忠孝东路徘徊在茫然中在我的人生旅途选择了多少错误我在睡梦中惊醒感叹悔言无尽恨我不能说服自己接受一切教训让生命去等候等候下一个漂流让生命去等候等候下一个伤口我就这样告别山下的家我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
data-am-widget=&accordion& class=&am-accordion am-accordion-gapped& data-am-accordion=&{
class=&am-accordion-item am-active&&
class=&am-accordion-title&&
就这样恣意的活着
class=&am-accordion-bd am-collapse am-in&&
class=&am-accordion-content&&
置身人群中 /& 你只需要被淹没 享受 沉默 /& 退到人群后 /& 你只需给予双手 微笑 等候
class=&am-accordion-item&&
class=&am-accordion-title&&
让生命去等候，去等候，去等候，去等候
class=&am-accordion-bd am-collapse &&
class=&am-accordion-content&&
走在忠孝东路 /& 徘徊在茫然中 /& 在我的人生旅途 /& 选择了多少错误 /& 我在睡梦中惊醒 /& 感叹悔言无尽 /& 恨我不能说服自己 /& 接受一切教训 /& 让生命去等候 /& 等候下一个漂流 /& 让生命去等候 /&等候下一个伤口
class=&am-accordion-item&&
class=&am-accordion-title&&
我就这样告别山下的家
class=&am-accordion-bd am-collapse &&
class=&am-accordion-content&&
我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
使用方法 直接使用 拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（） &body& 区域；将示例代码中的内容替换为自己的内容。使用 Handlebars 首先，引入 Handlebars 库及 amui.widget.helper.js（可参考
里的 widget.html 文件）。接下来有两种方式来渲染数据。第一种，将组件调用代码写在模板里面： type=&text/x-handlebars-template& id=&my-tpl&&
{{&accordion accordionData}}
&然后获取模板内容，传入数据渲染并插入到页面中。$(function() {
var $tpl = $(&#my-tpl&),
tpl = $tpl.text(),
template = pile(tpl),
accordionData: {
&theme&: &basic&,
&content&: [
&title&: &标题一&,
&content&: &内容一&,
&active&: true
&title&: &标题二&,
&content&: &内容二&
&title&: &标题三&,
&content&: &内容三&
html = template(data);
$tpl.before(html);
});渲染出来的 HTML 如下： data-am-widget=&accordion& class=&am-accordion am-accordion-basic doc-accordion-class&
id=&doc-accordion-example& data-accordion-settings=&{
class=&am-accordion-item am-active&&
class=&am-accordion-title&&标题一&
class=&am-accordion-content&&内容一&
class=&am-accordion-item&&
class=&am-accordion-title&&标题二&
class=&am-accordion-content&&内容二&
class=&am-accordion-item&&
class=&am-accordion-title&&标题三&
class=&am-accordion-content&&内容三&
&如果使用的组件较多或者还有组件以外的自定义模板，建议使用上面的方法，将模板分离出来，便于维护。第二种，直接将组件调用代码传给 Handlebars：var template = pile(&{{&accordion}}&),
accordionData: {
&id&: &doc-accordion-example&,
&className&: &doc-accordion-class&,
&theme&: &basic&,
&content&: [
&title&: &标题一&,
&content&: &内容一&,
&active&: true
&title&: &标题二&,
&content&: &内容二&
&title&: &标题三&,
&content&: &内容三&
html = template(data.accordionData);
$(&body&).append(html);云适配 WebIDE 将组件拖入编辑界面；点击右侧面板里的【数据采集】按钮，按以下格式采集数据。var data = [
&title&: &&,
&content&: &&
return数据接口 {
&className&: &&,
&theme&: &&,
&options&: {
&multiple&: false
&content&: [
&title&: &&,
&content&: &&,
&active&: false
&disabled&: null
}注意事项 不要在 .am-accordion-bd 上添加上下 padding/margin/border 样式。在微信上关注我们}