Hbuilder mui手机页面开发

1：mui基础

头部：mh

身体：mb

尾部：mt

列表：ml

2：折叠面板

maccording

3：操作表

mActionsheet   

关闭操作表：

$(function(){

$("#cancel").bind("tap",function(){

mui("#sheet").popover("toggle");

});

   });

   注意：要引入jquery

4：数字角标

mbadge

一般用于未读消息

5：按钮

mButton

6:卡片视图（无快捷键）

<div class="mui-card">

<div class="mui-card-header">

头

</div>

<div class="mui-card-content mui-content-padded">

<img src="img/1.jpg" width="100%"/>

</div>

<div class="mui-card-footer">

尾部

</div>

</div>

7：复选框

mCheckbox

8：消息框  （mui的alert等）

提示消息，确认消息，输入消息，自动消失消息

eg：$(function() {

$("#alert").bind("tap", function() {

mui.alert("点击", "确认删除吗？", "yes", function() {

$("#con").html("弹出消息框被调用");

    })

});

$("#confirm").bind("tap", function() {

mui.confirm("确认删除吗？", "删除标题", ["确认", "取消", "关闭"], function(e) {

var e = e.index;

if(e == 0) {

$("#con").html("确认");

} else if(e == 1) {

$("#con").html("取消");

} else if(e == 2) {

$("#con").html("关闭");

}

     })

          });

$("#input").bind("tap",function(){

mui.prompt("输入","默认输入","输入标题",["确认","取消"],function(e){

var e1=e.index;

var e2=e.value;

$("#con").html(e1);

     });

});

$("#autodisappare").bind("tap",function(){

mui.toast("拜拜");

    });

});

9：图片轮播（参考图片轮播）

启动：mui轮播组件

$(function() {

   mui("#slider").slider({

   interval: 1000

});

});

10：栅格

mGrid

11：图标

mIcon （可用style 修改颜色）

12：表单

mform（参考表单）

min

13：蒙版

var m=mui.createMask(function(){

mui.alert("123","123","yes");

});

m.show();

14：数字输入框

mn

15:侧滑菜单

mOffcanva（在body外写，本页面body不写内容）

16：弹出菜单

mPopove（不常用，了解）

17：选择器

参考案例即可

18：进度条

mprogressba

19：单选mradio 滑块mrange 开关mSwitch