[Learn AF3]第四章 App framework组件之Button
Button
组件名称：Button
是否js控件：否
使用说明：如果说panel组件是af3的“核心（heart of the ui）”，那么Button就是af中的五虎上将之一，在af app中使用的频率非常之高。
1，在af中你可以让任何元素表现的像个button控件，比如下面的三种元素，将会呈现的一模一样：
1 <a class="button">Home</a> 2 <span class="button">Home</span> 3 <div class="button">Home</div>
2，专用button类，af中可以在button的后面紧跟previous或next类，你可以得到一个显示为previous箭头或next箭头的button，注意这是一定要加入文字标签，否则你会得到不知所谓的图片显示。
1 <a class="button previous">prev</a> 2 <a class="button next">next</a>
带有标签，看上去还不错。 如果没有文字标签就惨了 
af3中还有一个menuButton的class，专用于切换side menu的显示和隐藏，包含了float：right属性，因此menuButton肯定是靠右显示的。
3，给button添加矢量图标：通过添加矢量icon的类，你可以自由的为button添加图标显示。
<a class="button icon home">Home</a>
4，去掉button的背景和边框：你可以添加css属性来去掉button的边框和背景。
<a class="button icon home" style="border:none;background-color:transparent;">Home</a>
此时的显示效果：
5，button添加颜色类：af2.1起，可以通过添加下列颜色类来给button添加颜色属性（同时影响背景和前景，对比的需要）
- gray
- yellow
- red
- green
- orange
- black
- slate
下面，我给刚才的透明home按钮分别添加red和gray类，看看对比效果：
<a class="button icon home red" style="border:none;background-color:transparent;">Home</a> <a class="button icon home gray" style="border:none;background-color:transparent;">Home</a>
6，button分组：通过将一组button包裹在class=‘button-grouped’的div元素中可以将button显示为一组。
<caption>默认分组，横向，自动换行</caption> <div class="button-grouped"> <a class="button">Button1 </a> <a class="button">Button2 </a> <a class="button">Button3 </a> <a class="button">Button5 </a> <a class="button">Button6 </a> </div> <br> <caption>纵向分组</caption><hr/> <div class="button-grouped vertical"> <a class="button">Button1 </a> <a class="button">Button2 </a> <a class="button">Button3 </a> <a class="button">Button5 </a> <a class="button">Button6 </a> </div> <br> <caption>横向分组，自动缩放</caption> <div class="button-grouped flex"> <a class="button">Button1 </a> <a class="button">Button2 </a> <a class="button">Button3 </a> <a class="button">Button5 </a> <a class="button">Button6 </a> </div>
效果如图所示：
方法：无
属性：Button 可用的声明式属性。
data-transition="transitionClassName",其中transitionClassName可取值为：页面切换可用transition类和Side menu可用的transition类
#menuButton的专用属性：
data-right-menu="menuId" 设置右侧显示sidemenu
data-left-menu="menuId" 设置左侧显示sidemenu
其中side menu可用的切换效果有“cover”，“reveal”，“push”三种
页面切换效果有：
1 "slide" - 向左滑动，回退时向右滑动 2 "up" - 向上滑动，回退时向下 3 "down" - 向下滑动，回退时向上 4 "pop" - 弹出 5 "flip" - 沿Y轴翻滚 6 "fade" - 淡入淡出
事件：Button专属event
click和tap 具有同等效力
第三章 App Framework 3组件之Panel：afui的核心 [Learn AF3系列] 第五章 App Framework 3组件之Drawer——Side Menu
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
