AdobeEdgeAnimate--异步条件加载框架（yepnop）：加载bootstrap之按钮、进度条、菜单效果

版权声明:

原文地址：

/adobeedge/archive//11/30/Adobe_Edge_Animate_Bootstrap.html

作者：北京联友天下科技发展有限公司肖伟民

下面在前两个案例的基础上继续讲解第三个应用：

一、同样，设计好按钮和界面，如下图：

元件命名和排序如下：

按钮btn_bootstrap内部元素：

右侧元件frame_bootstrap内部元素：将bootstrap的visible属性改为auto，这样当内容多于边框大小的时候会自动添加滚动条

二、从网上下载bootstrap文件：bootstrap.min.css和bootstrap.min.js，放置在工程目录中的libs文件夹下，如图：

三、为frame_bootstrap添加creationComplete函数：

代码如下：

varbootstrap=sym.$("bootstrap");

yepnope({

both:[

"libs/bootstrap.min.css",

"libs/bootstrap.min.js"

],

callback:function(){

bootstrap.html("");

varbuttongroup='<divclass="btn-group"style="margin:9px0;">'

+'<buttonclass="btnbtnbtn-primary">Left</button>'

+'<buttonclass="btnbtnbtn-primary">Middle</button>'

+'<buttonclass="btnbtnbtn-primary">Right</button>'

+'</div>';

bootstrap.append(buttongroup);

varprogressBars='<divclass="progressprogress-infoprogress-stripedactive"><divclass="bar"style="width:20%"></div></div>'

+'<divclass="progressprogress-successprogress-stripedactive"><divclass="bar"style="width:40%"></div></div>'

+'<divclass="progressprogress-warningprogress-striped"><divclass="bar"style="width:60%"></div></div>'

+'<divclass="progressprogress-dangerprogress-striped"><divclass="bar"style="width:80%"></div></div>';

bootstrap.append(progressBars);

varmenu='<divclass="btn-group">'

+'<aclass="btnbtn-primarydropdown-toggle"data-toggle="dropdown"href="#">Action<spanclass="caret"></span></a>'

+'<ulclass="dropdown-menu">'

+'<li><ahref="#">Action01</a></li>'

+'<li><ahref="#">Action02</a></li>'

+'<liclass="divider"></li>'

+'<li><ahref="#">Separatedlink</a></li>'

+'<liclass="divider"></li>'

+'<liclass="dropdown-submenu">'

+'<atabindex="-1"href="#">Moreoptions</a>'

+'<ulclass="dropdown-menu">'

+'<li><ahref="#">Action01</a></li>'

+'<li><ahref="#">Action02</a></li>'

+'</ul></li>'

+'</ul>'

+'</div><br/><br/>'

bootstrap.append(menu);

}

});

四、在时间线上更改触发器：

0秒处：

1秒处：

2秒处：

在3秒处添加触发器，标签名为bootstrap：

五、为按钮btn_bootstrap添加click函数：

在浏览器中预览，可以看到效果如下：