按钮

所有按钮元素

按钮是BingoTouch的核心部件,大部分组件主要构成元素,理解了按钮,也就理解了大部分的组件使用。意思是可以在任意标签上面使用。

1. 默认按钮示例

data-role="BTButton" 设置这个属性,就会生成一个按钮了,复制代码请点击查看代码里面的内容
example
最简单的按钮
全局属性

2. 多个按钮一行显示

data-inline="" true || false 默认按钮宽度都是100%,通过这个设置,可以让按钮自适应内容大小
example
true
false

3. 多种颜色

data-theme="" a || b || c || d || e || f 提供默认5种颜色选择,如需扩展,自行添加样式便可
example
normal
a
b
c
d
e
f

4. 圆角属性

data-corner="" all || top || right || bottom || left || none按钮默认是圆角
example
默认圆角
none
all
left
right
top
bottom

5. 阴影

data-shadow="" true || false 阴影的控制
example
normal
true
false

6. 文本对齐方式

align="" left || center || right 文本的位置
example
center
left
right
center

7. 不可用状态

disabled="disabled" 不可用
example
disabled
按钮基本属性

8. 按钮的图标及位置

data-icon="" class || src 样式名或者是图片路径,设置data-icon必须和 data-iconpos 一起使用
example
无图标
left
right
top
bottom
right

9. 按钮的不同类型

data-type="" image || text image跟text的区别是会有间隙padding
example
这是没有按钮背景的文本

10. 按钮上的提示信息

data-badges="" num 可以通过设置动态新增提示信息,也可以放在任意位置
example
5

11. 多种大小

class="" btn-mini || btn-large || btn-xlarge || btn-xxlarge
example
btn-mini
默认大小
btn-large
btn-xlarge
btn-xxlarge
事件属性

12. 跳转页面

data-url="" http:// 或者相对路径 可以带参数跳转,参数格式请参考API
example
跳转刷新当前页面
带参数跳转

13. 按钮按下或者松开效果

mousedown="false" ; mouseup="false"
example
正常效果
点击高亮不取消
取消点击高亮

14. 按钮变成select

type="select" data="[{"key":"","value":""}]"
example
请选择性别

15. 按钮变成日期控件

type="" date || wheeldate || time || wheeltime 日期,滚轮日期,时间,滚轮时间
example
可编辑日期
滚轮日期
可编辑时间
滚轮时间

16. 按钮不通过渲染

data-status="1",可以不通过js就把按钮的样式显示出来,可以提高性能,但编写过程会过于繁琐。
example
不用js渲染的按钮
不同组合效果

17. 按钮群组

父层class="btn-group",更多效果可以查看
group.html
example
返回
刷新
返回
刷新
配合 data-role="BTSwitchs" 使用可以用于 只激活一个
example
返回
刷新
data-inline="false"
example
返回
刷新
返回
刷新
17. 配合其他组合
example
重新发送
重新发送
+
-