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

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

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