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
作者：北京聯友天下科技發展有限公司 肖偉民