标签 MUI 下的文章

MUI - 选项卡点击事件

HTML

<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
    <a class="mui-control-item mui-active title-item" href="#container-1" data-type="1">
        <img src="/images/common/portrait.gif" class="title-img" /><br>淋巴系统</a>
    <a class="mui-control-item title-item" href="#container-2" data-type="2">
        <img src="/images/common/portrait.gif" class="title-img" /><br>淋巴水肿</a>
    <a class="mui-control-item title-item" href="#container-3" data-type="3">
        <img src="/images/common/portrait.gif" class="title-img" /><br>检查治疗</a>
    <a class="mui-control-item title-item" href="#container-4" data-type="4">
        <img src="/images/common/portrait.gif" class="title-img" /><br>患者问答</a>
</div>

JS

mui('#segmentedControl').on('tap', 'a', function(e) {
        //
});

阅读全文

JS - mui.showLoading

JS

//扩展mui.showLoading
(function($, window) {
    //显示加载框
    $.showLoading = function(message,type) {
        if ($.os.plus && type !== 'div') {
            $.plusReady(function() {
                plus.nativeUI.showWaiting(message);
            });
        } else {
            var html = '';
            html += '<i class="mui-spinner mui-spinner-white"></i>';
            html += '<p class="text">' + (message || "数据加载中") + '</p>';
            //遮罩层
            var mask=document.getElementsByClassName("mui-show-loading-mask");
            if(mask.length==0){
                mask = document.createElement('div');
                mask.classList.add("mui-show-loading-mask");
                document.body.appendChild(mask);
                mask.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
            }else{
                mask[0].classList.remove("mui-show-loading-mask-hidden");
            }
            //加载框
            var toast=document.getElementsByClassName("mui-show-loading");
            if(toast.length==0){
                toast = document.createElement('div');
                toast.classList.add("mui-show-loading");
                toast.classList.add('loading-visible');
                document.body.appendChild(toast);
                toast.innerHTML = html;
                toast.addEventListener("touchmove", function(e){e.stopPropagation();e.preventDefault();});
            }else{
                toast[0].innerHTML = html;
                toast[0].classList.add("loading-visible");
            }
        }
    };
    //隐藏加载框
    $.hideLoading = function(callback) {
        if ($.os.plus) {
            $.plusReady(function() {
                plus.nativeUI.closeWaiting();
            });
        }
        var mask=document.getElementsByClassName("mui-show-loading-mask");
        var toast=document.getElementsByClassName("mui-show-loading");
        if(mask.length>0){
            mask[0].classList.add("mui-show-loading-mask-hidden");
        }
        if(toast.length>0){
            toast[0].classList.remove("loading-visible");
            callback && callback();
        }
    }
})(mui, window);

阅读全文

JS - MUI - PopPicker - 销毁 - 大坑

最近做了个需求:用到了2个选择器,逻辑是当第一个选择器选择好后,会根据第一个选中的值来对应加载第二个选择器的值,类似于省市区的效果,但是不能使用多级选择器来展示。
因此会发现,当第一个选择器多次点击后,会生成多次第二个选择器。


解决方法:

document.getElementById('hosptialMain').addEventListener("tap",function(){
    hospitalPicker.show(function(items){
        var text = items[0].text;
        var val = items[0].value;
        document.getElementById('hospital').value = text;
        document.getElementById('hospitalVal').value = val;
        /**********MUI大坑!去掉多余的************/
        var crr = $('.mui-poppicker');
        for(var j=0;j<crr.length;j++){
            var drr = crr[j];
            if(j != 0){
                drr.remove();
            }
        }
        /******************************************/
        //执行加载第二个选择器
        initDoctor();
    });
});