logo

iMAG移动应用开发指南

Button

按钮控件,用来显示按钮。

标签

标签名 描述 说明
button 按钮标签 支持文字按钮,图片按钮,带图标的按钮,文字图标混合按钮等多种形式

属性

属性名 取值 描述
id String id编码
type String 按钮类型,默认为文字按钮,type="icon"则按钮中间可以放置图标
style String
button样式,包括:
href URL 点击跳转页面的URL地址
target String _self:当前窗口打开
_blank:新窗口打开,默认值
跳转页面打开方式,和href属性配合使用
icon String 按钮图标文件名,多个用逗号分隔
disabled Boolean 禁用状态
true:禁用状态
false:非禁用状态,默认值
onclick Javascript 点击时触发的脚本

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式

控件详解

● 文本按钮

<button style="width:120">按钮</button>

说明:可通过style的width和height来设置按钮的宽度和高度。

● 自绘按钮

<button style="background:#3E86D7,#2873C2;padding:10;corner-radius:8;width:120;color:white;font-size:14" onclick="hint('自绘按钮')">自绘按钮</button>

<button style="background:null,#007aff;color:#007aff,white;border:1 #007aff;corner-radius:3;width:80;height:33;font-size:12" onclick="hint('自绘按钮')">自绘按钮</button>

说明:可通过style来绘制按钮的样式,其中background:null,#007aff#007aff是选中时的背景,color:#007aff,whitewhite是选中时的文字颜色。

● 图片按钮

<button style="background:btn_normal.png,btn_pressed.png;width:250;height:30" onclick="hint('图片按钮')"/>

说明:为button设置两个不同的背景图,按下之后可以切换

● 图标按钮

<button type="icon" icon="head_normal.png,head_pressed.png" onclick="hint('图标按钮')"/>

效果:

说明:button的type为icon则为图标按钮,只显示图标,没有文字内容

● 文本图标混合按钮

<button icon="head_normal.png,head_pressed.png" onclick="hint('文本图标混合按钮')">按钮</button>

说明:可同时为按钮设置文本和图标,图标在文本的左边。

注意:这里图标只能在文字的左边,如果要实现图标摆放文字顶部的效果,可以用“列表工具栏”自己定制布局:list toolbar

● 带背景的图标按钮

<button type="icon" icon="head_normal.png,head_pressed.png" style="background:mm_title_btn_normal.png 50% 50%,mm_title_btn_pressed.png 50% 50%"></button>

说明:图标按钮的背景也可以自定义,这里对背景图片进行了切割和拉伸,可以适应不同的手机分辨率

● 带链接的按钮

<button style="width:120" href="basic_image_progress.html">按钮</button>

说明:点击按钮跳转到新的页面

● 修改按钮内容

$('test_button').text = '修改后按钮内容';

● 修改按钮图标

button.icon = 'head_normal.png,head_pressed.png';

● 修改按钮样式

$('test_button').css('color:red; font-size:20; font-weight:bold');
$('test_button').css({'color':'white', 'background':'darkgray', 'corner-radius':'5'});

var button = $('test_button');
button.css('color', 'white');
button.css('background', 'gradient(gray)');

● 隐藏按钮

$('test_button').css('display', 'none');
$('test_button').css('display', 'hidden');

● 显示按钮

$('test_button').css('display', 'block');

● 创建按钮

var button = $C('<button id="test_button" style="color:blue;font-size:20">按钮</button>');
$('test_row').add(button);

● 禁用按钮

$('test_button').disabled = true;

● 点击按钮

<button id="test_button" onclick="hint(this.text)">按钮</button>

示例下载

点此下载button相关的示例代码:imag-button.zip