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

[b]Adobe Edge Animate --异步条件加载框架（yepnop）之三：加载bootstrap之按钮、进度条、菜单效果[/b]

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

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

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



元件命名和排序如下：



按钮btn_bootstrap内部元素：



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



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



[b]三、为frame_bootstrap添加creationComplete函数：[/b]



代码如下：

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);

}

});

[b]四、在时间线上更改触发器：[/b]

0秒处：



1秒处：



2秒处：



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



[b]五、为按钮btn_bootstrap添加click函数：[/b]



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







本文地址：

http://www.cnblogs.com/adobeedge/archive/2012/11/30/Adobe_Edge_Animate_Bootstrap.html

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