MUI使用笔记

AnQuan

1. mui.init

mui.init({
    gestureConfig:{
        tap: true, //默认为true
        doubletap: true, //默认为false
        longtap: true, //默认为false
        swipe: true, //默认为true
        drag: true, //默认为true
        hold:false,//默认为false，不监听
        release:false//默认为false，不监听
    }
})

2. 日期

css:

<link rel="stylesheet" type="text/css" href="../css/mui.picker.css"/>
<link rel="stylesheet" type="text/css" href="../css/mui.dtpicker.min.css"/>

js:

<script type="text/javascript" src="../js/mui.picker.js" ></script>
<script type="text/javascript" src="../js/mui.dtpicker.min.js" ></script>
<script src="../js/custom.js" ></script>

code:

开始时间,结束时间
mui.each(['start_time','end_time'],function(i,id){
    //默认时间
    mui.byId(id).value = (new Date()).pattern("yyyy-MM-dd hh:mm:ss");
    //手动选择时间
    mui.byId(id).addEventListener('tap',function(e){
        var picker = new mui.DtPicker({});
            picker.show(function(rs) {
                mui.byId(id).value = rs.text+":"+(new Date()).pattern("yyyy-MM-dd hh:mm:ss").split(":")[2];
                picker.dispose();
            });
    });
});

3. ActionSheet 底部弹出框选择器

初始化设置数据:

var arr = new Array();
var ciType = json.ciType;
mui.each(ciType,function(i,type){
    arr.push({
        value:type['VALUE'],
        text:type['TEXT']
    })
})
catagoryPicker.setData(arr);

获取选中数据:

 //分类 actionsheet
mui.byId("selectCatagory").addEventListener('tap', function(event) {
    catagoryPicker.show(function(items) {
        var itemCallBack=catagoryPicker.getSelectedItems();
        // 获取选中的键值对
        $('#selectCatagory').val(itemCallBack[0].text);
        info.data.CI_TYPE = itemCallBack[0].value;
        // var text = items[0]["text"];
        // 返回 false 可以阻止选择框的关闭
        //return false;
    });
}, false);

4. ArtTemplate模板使用

js:

<script src="../js/arttemplate.min.js" type="text/javascript" charset="utf-8"></script>

自己编写模板:

 <script id="zrdw_template" type="text/html">
            {{if items}}
                <ul class="mui-table-view">
                    {{each items as item i}}
                        <li class="mui-table-view-cell zrdw_bg">
                            <a class="" href="#"><span class="mui-hidden">{{item["ID"]}}</span><span>{{item["NAME"]}}</span></a>
                        </li>
                    {{/each}}
                </ul>
            {{/if}}
        </script>

模板填充数据:

var html = template("zrdw_template",{'items':info.stations})
mui.byId("zrdw_wrapper").innerHTML = html;

其他非必须语法:

//template 自定义helper 函数
template.helper("toJsonString",function(item){
    return JSON.stringify(item);
});
使用:
{{#toJsonString(item)}}

5. scroll区域滚动

code:

//区域滚动
var options = {
    scrollY: true, //是否竖向滚动
    scrollX: false, //是否横向滚动
    startX: 0, //初始化时滚动至x
    startY: 0, //初始化时滚动至y
    indicators: true, //是否显示滚动条
    deceleration:0.0010, //阻尼系数,系数越小滑动越灵敏
    bounce: true //是否启用回弹
};
var scroll = mui('.mui-scroll-wrapper').scroll(options);
或者使用custom.js中已定义好的options

var scroll = mui('.mui-scroll-wrapper').scroll(mui.scrollOptions);

6. textarea语音输入

html:

<textarea id="textarea" rows="5" placeholder="手动输入或语音输入"
                                     class="mui-input-speech">
                                 </textarea>

code:

//语音输入
mui('.mui-input-row textarea').input();
//获得焦点时清除里面的空白内容，不知为何有空白字符
document.getElementById("textarea").onfocus = function(){
    this.value = this.value.replace(/[ \t]+/g,"");
}
//不区分全角半角重复加载 问题 转换
document.getElementById("textarea").addEventListener('recognized',function(e){
    console.log(e.detail.value);
    this.value = e.detail.value.replace(/，/g,'').replace(/,。/g,'。');
});

7. 重写back

//重写back
var bk = mui.back;
mui.back = function(){
    if(info.saved){
        bk();
    }else{
        mui.confirm("信息未保存！确定要退出？","提示：",["取消","确定"],function(obj){
            if(obj.index==0){
            }else{
                bk();
            }
        });
    }
}

8. Ajax

mui.ajax:

var url = mui.serverAdddress+"app/appaqcheckinfo/AppAqCheckInfo.do?method=saveUpdateCheckInfo";
mui.ajax(url,{
    //async:false,//同步
    dataType:'json',//服务器返回json格式数据
    type:'post',//HTTP请求类型
    data:checkInfo,
    success:function(json){
        if(!json){
            mui.toast("网络错误!");
            return;
        }
        if(json.msg=="true"){
            callback(json);
        }else{
            mui.toast(json.msg);
        }
    },
    error: function(xhr, type, errorThrown) {
        error = "网络错误!请重试!";
        mui.toast(error);
        console.log(xhr.readyState+"--"+type+"--"+errorThrown);
    }
})  

mui.getJSON:

var url = mui.serverAdddress+"app/appaqcheckinfo/AppAqCheckInfo.do?method=queryUserNameStationNameById"
mui.getJSON(url,{
    'user_id':user_id,
    'station_id':station_id
},function(json){
    console.log(JSON.stringify(json));
    if(json&&json.msg=="true"){
        $(dataTomodals[1]).val(json['STATION_NAME']);
        $(dataTomodals[2]).val(json['USER_NAME']);
        info.data.CI_USER_ID = user_id;
        info.data.CI_DEPTMENT = station_id;
    }
});

custom.js

• mui.md5()
• mui.uuid()
• mui.myAjax()
• String.prototype.replaceAll
• Date.prototype.pattern
• mui.byId()

httputil.js