Adobe Edge Animate --异步条件加载框架（yepnop）之三：加载bootstrap之按钮、进度条、菜单效果
版权声明:
本文版权属于 北京联友天下科技发展有限公司。
转载的时候请注明版权和原文地址。
下面在前两个案例的基础上继续讲解第三个应用：
一、同样，设计好按钮和界面，如下图：
元件命名和排序如下：
按钮btn_bootstrap内部元素：
右侧元件frame_bootstrap内部元素：将bootstrap的visible属性改为auto，这样当内容多于边框大小的时候会自动添加滚动条
二、从网上下载bootstrap文件：bootstrap.min.css和bootstrap.min.js，放置在工程目录中的libs文件夹下，如图：
三、为frame_bootstrap添加creationComplete函数：
代码如下：
var bootstrap = sym.$("bootstrap");
yepnope({
both: [
"libs/bootstrap.min.css",
"libs/bootstrap.min.js"
],
callback: function() {
bootstrap.html("");
var buttongroup = '<div class="btn-group" style="margin: 9px 0;">'
+'<button class="btn btn btn-primary">Left</button>'
+'<button class="btn btn btn-primary">Middle</button>'
+'<button class="btn btn btn-primary">Right</button>'
+'</div>';
bootstrap.append(buttongroup);
var progressBars = '<div class="progress progress-info progress-striped active"><div class="bar" style="width: 20%"></div></div>'
+'<div class="progress progress-success progress-striped active"><div class="bar" style="width: 40%"></div></div>'
+'<div class="progress progress-warning progress-striped"><div class="bar" style="width: 60%"></div></div>'
+'<div class="progress progress-danger progress-striped"><div class="bar" style="width: 80%"></div></div>';
bootstrap.append(progressBars);
var menu = '<div class = "btn-group">'
+'<a class = "btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Action<span class="caret"></span></a>'
+'<ul class = "dropdown-menu">'
+'<li><a href = "#">Action01</a></li>'
+'<li><a href = "#">Action02</a></li>'
+'<li class="divider"></li>'
+'<li><a href = "#">Separated link</a></li>'
+'<li class="divider"></li>'
+'<li class="dropdown-submenu">'
+'<a tabindex="-1" href="#">More options</a>'
+'<ul class="dropdown-menu">'
+'<li><a href = "#">Action01</a></li>'
+'<li><a href = "#">Action02</a></li>'
+'</ul></li>'
+'</ul>'
+'</div><br/><br/>'
bootstrap.append(menu);
}
});
四、在时间线上更改触发器：
0秒处：
1秒处：
2秒处：
在3秒处添加触发器，标签名为bootstrap：
五、为按钮btn_bootstrap添加click函数：
在浏览器中预览，可以看到效果如下：
本文地址：
http://www.cnblogs.com/adobeedge/archive/2012/11/30/Adobe_Edge_Animate_Bootstrap.html
作者：北京联友天下科技发展有限公司 肖伟民
转载于:https://www.cnblogs.com/adobeedge/archive/2012/12/02/Adobe_Edge_Animate_Bootstrap.html