首页 教程 API文档

标准按钮组件

2015-10-30 14:02:41

属性


父模块 widget
Demo地址 Button

描述


Button是一个基础的按钮组件,继承与widget.

按钮组件图片

成员列表


方法名称 成员类型 描述
href public 按钮链接地址
checkable public 按钮是否可选中
target public 按钮链接的target属性
iconWidth public 按钮图标宽度
iconHeight public 按钮图标高度
link public 是否为超链接按钮
text public 按钮文字
checked public 按钮选中状态
icon public 按钮图标url地址
iconClass public 按钮图标class名称
styleType public 按钮风格类型

参数选项


名称 类型 默认值 描述
level Number 2 Button组件所在layout中的等级
text String Button Button组件默认的文字
href String Empty String 当作为一个链接按钮的时候,href为这个链接的地址
link Boolean false 按钮是否为一个超链接按钮
icon String null 按钮的图标文件地址
iconClass String null 按钮的图标class
target String _blank 当作为一个超链接按钮的时候,target的属性
defaultClass String StdUI_Button 按钮组件的默认class名称
checkable Boolean false 按钮是否可选中的
checked Boolean false 按钮是否已经被选中,当checkable属性为true时,该属性会生效
styleType String text

按钮的风格类型,默认为纯文本,风格类型可以有以下取值

名称 描述
textBesideIcon 文字紧挨着图标的右边
textUnderIcon 文字在图标的下面
text 按钮只有文字没有图标
icon 按钮只有图标没有文字
iconWidth Number 18 按钮图标的宽度
iconHeight Number 18 按钮图标的高度

事件


名称 回调参数 描述
checked 当前按钮的选中状态 当按钮被选中或者取消选中的时候,checked事件将会被触发
mousedown 鼠标事件对象 当按钮被鼠标按下时候,mousedown事件会被触发
mouseup 鼠标事件对象 当鼠标抬起的时候,mouseup事件会被触发
click 鼠标事件对象 鼠标点击时候触发的事件
press 鼠标事件对象 按钮被按下时候触发的事件
longpress 鼠标事件对象 鼠标长按时候触发的事件
focus 事件对象 按钮拥有焦点时候触发
blur 事件对象 按钮失去焦点的时候触发

相关例子


创建一个宽度200像素,文字紧挨图标的按钮


Std.ui("Button",{
    renderTo:"body",
    iconClass:"abcIcon",
    iconWidth:32,
    iconHeight:32,
    width:200,
    text:"width has 200px",
    styleType:"textBesideIcon"
});
        

创建一个原型按钮,只有图标


 Std.ui("Button",{
    renderTo:"body",
    styleType:"icon",
    iconHeight:32,
    iconWidth:32,
    icon:"images/play.png",
    css:{
        borderRadius:"100%"
    }
});
        

创建一个按钮,文字在图标下面


Std.ui("Button",{
    renderTo:"body",
    styleType:"textUnderIcon",
    icon:"images/play.png",
    text:"textUnderIcon"
});