miniUi常用方法

验证规则

onvalidation="onPhoneValidation"

//身份证号验证规则
function onIDCardsValidation(e){
    var exp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (e.isValid) {
        if (!exp.test(e.value)) {
            e.errorText = "必须输入15~18位数字";
            e.isValid = false;
        }
    }
}

// 手机号验证规则
function onPhoneValidation(e){
    var exp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (e.isValid) {
        if (!exp.test(e.value)) {
            e.errorText = "请输入正确的手机号";
            e.isValid = false;
        }
    }
}

布局

mini-fit高度撑满布局控件。它的高度为：父元素高度 - 其他同级元素高度。

<div class="mini-fit">
  该div将撑满整个页面的高度
</div>

mini-splitter分隔容器

<div class="mini-fit">
  <!-- 此时下面的两个div将水平分隔 -->
  <!-- 但此时splitter内容的宽只是两个div根据自己内容确定的宽度的和 -->
  <div class="mini-splitter">
    <div size="30%">该div将占据左边30%的宽</div>
    <div>该div将占据剩下的70%的宽</div>
  </div>
</div>

<div class="mini-fit">
  <!-- 设置style，使splitter的内容区域横向和纵向都充满整个父容器 -->
  <div class="mini-splitter"  style="width: 100%;height: 100%;">
    <div size="30%">该div将占据左边30%的宽</div>
    <div>该div将占据剩下的70%的宽</div>
  </div>
</div>

<div class="mini-fit">
    <!-- 设置style，使splitter的内容区域横向和纵向都充满整个父容器 -->
    <div class="mini-splitter" style="width: 100%;height: 100%;">
        <div size="30%">
            <!-- 这里也需要设置style以充满父容器 -->
            <div class="mini-panel" title="第一个panel" 
                 style="width: 100%;height: 100%">该panel</div>
        </div>
        <div>该div将占据剩下的70%的宽</div>
    </div>
</div>

<div class="mini-fit">
    <!-- 设置style，使splitter的内容区域横向和纵向都充满整个父容器 -->
    <div class="mini-splitter" style="width: 100%;height: 100%;">
        <div size="30%">
            <!-- 如果需要纵向分隔，可以设置vertical="true" -->
            <!-- 默认情况下还是根据内容来计算宽高 -->
            <div class="mini-splitter" vertical="true" >
                <div size="50%">
                    <!-- 这里也需要设置style以充满父容器 -->
                    <div class="mini-panel" title="左边第一个panel" 
                         style="width: 100%;height: 100%">
                      该panel
                    </div>
                </div>
                <div>
                    <!-- 这里也需要设置style以充满父容器 -->
                    <div class="mini-panel" title="左边第二个panel" 
                         style="width: 100%;height: 100%">
                      该panel
                    </div>

                </div>
            </div>
        </div>
        <div>该div将占据剩下的70%的宽</div>
    </div>
</div>

<div class="mini-fit">
    <!-- 设置style，使splitter的内容区域横向和纵向都充满整个父容器 -->
    <div class="mini-splitter" style="width: 100%;height: 100%;">
        <div size="30%">
            <!-- 设置style以充满父容器 -->
            <div class="mini-splitter" vertical="true" 
                 style="width: 100%;height: 100%;">
                <div size="50%">
                    <!-- 这里也需要设置style以充满父容器 -->
                    <div class="mini-panel" title="左边第一个panel" 
                         style="width: 100%;height: 100%">
                      该panel
                    </div>
                </div>
                <div>
                    <!-- 这里也需要设置style以充满父容器 -->
                    <div class="mini-panel" title="左边第二个panel" 
                         style="width: 100%;height: 100%">
                      该panel
                    </div>
                </div>
            </div>
        </div>
        <div>该div将占据剩下的70%的宽</div>
    </div>
</div>