所有按钮元素
按钮是BingoTouch的核心部件,大部分组件主要构成元素,理解了按钮,也就理解了大部分的组件使用。意思是可以在任意标签上面使用。
1. 默认按钮示例
data-role="BTButton" 设置这个属性,就会生成一个按钮了,复制代码请点击查看代码里面的内容
2. 多个按钮一行显示
data-inline="" true || false 默认按钮宽度都是100%,通过这个设置,可以让按钮自适应内容大小
3. 多种颜色
data-theme="" a || b || c || d || e || f 提供默认5种颜色选择,如需扩展,自行添加样式便可
4. 圆角属性
data-corner="" all || top || right || bottom || left || none按钮默认是圆角
example
默认圆角
none
all
left
right
top
bottom
5. 阴影
data-shadow="" true || false 阴影的控制
6. 文本对齐方式
align="" left || center || right 文本的位置
7. 不可用状态
disabled="disabled" 不可用
按钮基本属性
8. 按钮的图标及位置
data-icon="" class || src 样式名或者是图片路径,设置data-icon必须和 data-iconpos 一起使用
example
无图标
left
right
top
bottom
right
9. 按钮的不同类型
data-type="" image || text image跟text的区别是会有间隙padding
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
13. 按钮按下或者松开效果
mousedown="false" ; mouseup="false"
14. 按钮变成select
type="select" data="[{"key":"","value":""}]"
15. 按钮变成日期控件
type="" date || wheeldate || time || wheeltime 日期,滚轮日期,时间,滚轮时间
16. 按钮不通过渲染
data-status="1",可以不通过js就把按钮的样式显示出来,可以提高性能,但编写过程会过于繁琐。
不同组合效果
17. 按钮群组
父层class="btn-group",更多效果可以查看
group.html
配合 data-role="BTSwitchs" 使用可以用于 只激活一个
data-inline="false"
17. 配合其他组合