Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮、进度条、菜单效果
来源:互联网 发布:青岛seo服务外包 编辑:程序博客网 时间:2024/06/17 17:09
Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮、进度条、菜单效果
版权声明:
原文地址:
http://www.cnblogs.com/adobeedge/archive/2012/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函数:
代码如下:
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函数:
在浏览器中预览,可以看到效果如下:
- Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮、进度条、菜单效果
- Adobe Edge Animate
- (转) bootstrap 加载进度条
- bootStrap异步加载数据(动态加载数据)一二级菜单点击失效的解决办法
- Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)
- Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)
- Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)
- Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)
- Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)
- Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)
- Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)
- Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条(三十一)
- Unity3d异步加载进度条
- 异步加载框架之Volley
- Android 自定义View之加载进度条效果
- Android学习---使用异步内部类实现进度条加载效果
- adobe edge animate 和 adobe animate cc 有啥区别?
- Adobe Edge Animate应用(2)-绘制图形并应用动态效果
- 《人人都是创业者》前言:Solo Business Model
- Android的消息机制
- OpenGL之自动纹理坐标生成
- 关于duilib的理解
- Light Mapping
- Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮、进度条、菜单效果
- Cube Mapping
- 《人人都是创业者》第1篇:小区门口的商业棋局
- 凹凸映射Bump Mapping
- MyEclipse 10优化技巧
- Android Toast简易消息提示框的使用
- 如何编写AS程序——初学者第一课
- BumpMap、NormalMap的区别
- openGL CG2 vertex lighting