用avalon写的一个弹窗demo

标签：

之前项目中，用avalon写的一个模块，单独拿出来了，一个小弹窗的效果。

demo地址： http://www.hui12.com/nbin/demo/4a/4a.html

html：

<div class="people-pop-shade" ms-controller="vmPeoplePop" ms-visible="toggleShade">
    <div class="people-pop-box" ms-visible="togglePeopleBox">
        <!-- head -->
        <div class="people-pop-head">
            <span class="nb-fleft people-pop-head-title">自定义人群条件</span>
            <a href="javascript:;" class="nb-fRight people-pop-close" ms-on-click="hidePeopleBox">x</a>
        </div>
        <!-- content -->
        <div class="people-pop-content-box">
            <!-- 待选标签 -->
            <div class="nb-fLeft people-pop-unChoose-box" id="people-pop-unChoose-box">
                <div class="people-pop-unChoose-box-limit" ms-on-scroll="fnScroll">
                    <h3 class="people-pop-choose-title">待选标签</h3>
                    <ul class="people-pop-unChoose-list">
                        <!-- 性别 -->
                        <li class="nb-clear" unChooseType="gender">
                            <span class="tag">性别</span>
                            <div ms-repeat-el="unChooseData.gender">
                                <span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
                                <b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
                                <b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
                            </div>
                        </li>
                        <!-- 地域 -->
                        <li class="nb-clear" unChooseType="region">
                            <span class="tag">地域</span>
                            <div ms-repeat-el="unChooseData.region" ms-if-loop="$index<5">
                                <span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
                                <b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
                                <b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
                            </div>
                            <br/><br/>
                            <div ms-repeat-el="unChooseData.region" ms-if-loop="$index>=5">
                                <span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
                                <b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
                                <b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
                            </div>
                        </li>
                        <!-- 设备 -->
                        <li class="nb-clear" unChooseType="brand">
                            <span class="tag">设备</span>
                            <div ms-repeat-el="unChooseData.brand">
                                <span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
                                <b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
                                <b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
                            </div>
                        </li>
                        <!-- 运营商 -->
                        <li class="nb-clear" unChooseType="operator">
                            <span class="tag">运营商</span>
                            <div ms-repeat-el="unChooseData.operator">
                                <span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
                                <b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
                                <b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
                            </div>
                        </li>
                        <!-- 行为偏好 -->
                        <li class="nb-clear" unChooseType="behavior">
                            <span class="tag">行为偏好</span>
                            <div ms-repeat-el="unChooseData.behavior">
                                <span ms-attr-index="$index" ms-class="active:el.checkNums>0" ms-on-click="unChooseClick">{{el.dictName}}</span>
                                <b class="people-pop-content-num-all" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==1">all</b>
                                <b class="people-pop-content-num-num" ms-if-loop="!(el.dictCode==allChoose||el.childList==null)" ms-visible="el.isAllCheck==null&&el.checkNums>0">{{el.checkNums}}</b>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 弹框 -->
                <div class="people-pop-detail-box" id="people-pop-detail-box" ms-visible="toggleDetail">
                    <div class="people-pop-detail-head nb-clear">
                        <span ms-repeat-el="childList" ms-if-loop="$index==0" ms-class="active:el.checked==1" ms-attr-index="$index" ms-on-click="unChooseDetailClick">{{el.dictName}}</span>
                        <a href="javascript:;" class="people-pop-detail-btn-close" ms-on-click="detailClose"></a>
                        <a href="javascript:;" class="people-pop-detail-btn-reset" ms-on-click="detailReset"></a>
                    </div>
                    <div class="nb-clear">
                        <span ms-repeat-el="childList" ms-if-loop="$index>0" ms-class="active:el.checked==1" ms-attr-index="$index" ms-on-click="unChooseDetailClick">{{el.dictName}}</span>
                    </div>
                </div>
            </div>
            <!-- 已选标签 -->
            <div class="nb-fRight people-pop-isChoose-box">
                <h3 class="people-pop-choose-title">已选标签</h3>
                <ul class="nb-clear people-pop-isChoose-list-tag">
                    <li isChooseType="gender" ms-repeat-el="isChooseData.gender" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">
                        <span>{{el.dictName}}</span>
                        <a href="javascript:;">x</a>
                    </li>
                    <li isChooseType="region" ms-repeat-el="isChooseData.region" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">
                        <span>{{el.dictName}}</span>
                        <a href="javascript:;">x</a>
                    </li>
                    <li isChooseType="brand" ms-repeat-el="isChooseData.brand" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">
                        <span>{{el.dictName}}</span>
                        <a href="javascript:;">x</a>
                    </li>
                    <li isChooseType="operator" ms-repeat-el="isChooseData.operator" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">
                        <span>{{el.dictName}}</span>
                        <a href="javascript:;">x</a>
                    </li>
                </ul>
                <ul class="nb-clear people-pop-isChoose-list-type">
                    <li ms-repeat-el="isChooseData.behavior">
                        <a href="javascript:;" class="people-pop-isChoose-btn-remove" isChooseType="behavior" ms-attr-i="el.i" ms-attr-i2="el.i2" ms-on-click="removeTag">x</a>
                        <span class="people-pop-isChoose-name">{{el.dictName}}</span>
                        <input type="text" ms-attr-value="el.tgiStart" ms-on-blur="tgiChange"/>
                        <span class="people-pop-tgi"><TGI<</span>
                        <input type="text" ms-attr-value="el.tgiEnd" ms-on-blur="tgiChange"/>
                    </li>
                </ul>
            </div>
        </div>
        <!-- foot -->
        <div class="people-pop-foot">
            <a href="javascript:;" ms-on-click="resetData">重置</a>
            <a href="javascript:;" ms-on-click="showNameBox">生成</a>
        </div>
    </div>
    <!-- 输入姓名 -->
    <div class="people-pop-write-box" ms-visible="toggleNameBox">
        <h3>请为您定义的人群输入一个名称</h3>
        <input type="text" class="people-pop-write-name" ms-duplex="nameVal"/>
        <a href="javascript:;" class="nb-fLeft" ms-on-click="hideNameBox">取消</a>
        <a href="javascript:;" class="nb-fRight" ms-on-click="fnSubmit">确认</a>
    </div>
</div>

css：

/* 公用 */
.nb-fLeft{
    float: left;
}
.nb-fRight{
    float: right;
}
.nb-clear{
    zoom: 1;
}
.nb-clear:after{
    content: '';
    display: block;
    clear: both;
}

/*  */
.people-pop-shade a{
    text-decoration: none;
}
.people-pop-shade{
    -display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
.people-pop-box{
    position: absolute;
    width: 1000px;
    left: 50%;
    top: 50%;
    margin-left: -500px;
    margin-top: -300px;
    min-height: 600px;
    border-radius: 6px;
    box-shadow: 0 0 5px #000;
}
.people-pop-head{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60px;
    background: #4b5868;
}
.people-pop-content-box{
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 0;
    right: 0;
}
.people-pop-foot{
    position: absolute;
    height: 60px;
    left: 0;
    right: 0;
    bottom: 0px;
    background: #4b5868;
}
.people-pop-head-title{
    color: #ffffff;
    position: relative;
    font-size: 14px;
    padding-left: 20px;
    left: 20px;
    top: 20px;
}
.people-pop-head-title:before{
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    background: url("../images/peoplePop.png") no-repeat 0 0;
}
.people-pop-close{
    color: #9bb1be;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 55px;
    background: #242d36;
    font-size: 40px;
}
.people-pop-unChoose-box{
    padding-left: 20px;
    width: 670px;
    height: 100%;
    background: #ffffff;
    position: relative;
}
.people-pop-unChoose-box-limit{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.people-pop-isChoose-box{
    padding-left: 20px;
    padding-right: 20px;
    width: 330px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f6f7fb;
}
h3.people-pop-choose-title{
    font-weight: bold;
    font-size: 14px;
    margin: 20px 0;
}
.people-pop-unChoose-list{
    margin-right: 20px;
}
.people-pop-unChoose-list>li{
    border-bottom: 1px dashed #e9e8f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
    padding-left: 50px;
}
.people-pop-unChoose-list>li:last-child{
    border-bottom: none;
}
.people-pop-unChoose-list>li .tag{
    float: left;
    width: 50px;
    text-align: right;
    height: 24px;
    line-height: 24px;
    margin-left: -50px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.people-pop-unChoose-list>li>div{
    position: relative;
    float: left;
    height: 24px;
    line-height: 22px;
    margin-bottom: 10px;
    margin-left: 10px;
}
.people-pop-unChoose-list>li>div>span{
    cursor: pointer;
    display: inline-block;
    height: 24px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #e5eaee;
    border-radius: 10px;
}
.people-pop-unChoose-list>li>div>span.active{
    border-color: transparent;
    background: #25a5fe;
    color: #ffffff;
}
.people-pop-content-num-all,
.people-pop-content-num-num{
    padding: 2px;
    line-height: 12px;
    position: absolute;
    top: -5px;
    right: -5px;
    color: #ffffff;
    font-size: 12px;
    border-radius: 8px;
    display: none;
}
.people-pop-content-num-all{
    background: #fc635d;
}
.people-pop-content-num-num{
    background: #fca057;
}
.people-pop-detail-box{
    position: absolute;
    width: 290px;
    min-height: 90px;
    padding: 0 10px;
    background: #4b5868;
    left: 200px;
    top: 200px;
    border-radius: 4px;
    z-index: 1;
    display: none;
}
.people-pop-detail-box:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: -16px;
    top: 12px;
    border: 8px solid transparent;
    border-right-color: #4b5868;
}
.people-pop-detail-box span{
    float: left;
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    background: #ffffff;
    color: #000;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
}
.people-pop-detail-box span.active{
    background: #25a5fe;
    color: #ffffff;
}
.people-pop-detail-head{
    padding-top: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid #000;
}
.people-pop-detail-btn-reset,
.people-pop-detail-btn-close{
    width: 12px;
    height: 12px;
    float: right;
    margin: 6px 5px 0;
    background-image: url("../images/peoplePop.png");
    background-repeat: no-repeat;
}
.people-pop-detail-btn-reset{
    background-position: -20px 0;
}
.people-pop-detail-btn-close{
    background-position: -40px 0;
}
.people-pop-isChoose-list-tag{
    padding-bottom: 10px;
    border-bottom: 1px dashed #e7e8ee;
}
.people-pop-isChoose-list-tag>li{
    float: left;
    height: 24px;
    line-height: 22px;
    padding: 0 10px;
    border: 1px solid #26a6ff;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    color: #26a6ff;
    cursor: pointer;
}
.people-pop-isChoose-list-tag>li>a{
    position: absolute;
    display: none;
    width: 12px;
    height: 12px;
    right: -6px;
    top: -6px;
    text-align: center;
    line-height: 10px;
    background: #ff645d;
    border-radius: 50%;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
}
.people-pop-isChoose-list-tag>li:hover{
    border-color: transparent;
    background: #26a6ff;
    color: #ffffff;
}
.people-pop-isChoose-list-tag>li:hover a{
    display: block;
}
.people-pop-isChoose-list-type{}
.people-pop-isChoose-list-type li{
    height: 34px;
    padding: 5px 0;
    line-height: 24px;
    background: transparent;
    border-radius: 6px;
    margin-bottom: 5px;
}
.people-pop-isChoose-list-type li>*{
    float: left;
}
.people-pop-isChoose-btn-remove{
    display: inline-block;
    margin-left: 10px;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 10px;
    background: #ffffff;
    color: #aac4de;
    font-weight: bold;
    border-radius: 50%;
    position: relative;
    top: 6px;
    visibility: hidden;
}
.people-pop-isChoose-name{
    width: 90px;
    height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 10px;
    color: #26a6ff;
}
.people-pop-isChoose-list-type li input{
    width: 44px;
    height: 24px;
    border: 1px solid #dbdee6;
    text-align: center;
    outline: none;
}
.people-pop-tgi{
    margin: 0 5px;
}
.people-pop-isChoose-list-type li:hover{
    background: #aac4de;
}
.people-pop-isChoose-list-type li:hover .people-pop-isChoose-btn-remove{
    visibility: inherit;
}
.people-pop-isChoose-list-type li:hover .people-pop-isChoose-name{
    color: #ffffff;
}
.people-pop-isChoose-list-type li:hover .people-pop-tgi{
    color: #ffffff;
}
.people-pop-foot{
    text-align: center;
}
.people-pop-foot a{
    position: relative;
    top: 12px;
    margin: 0 5px;
    display: inline-block;
    width: 80px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    border-radius: 6px;
    background: #f6f7fa;
    color: #000000;
}
.people-pop-foot a:hover{
    background: #ff9e57;
    color: #ffffff;
}
.people-pop-write-box{
    display: none;
    width: 280px;
    height: 170px;
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 20px;
    margin-left: -140px;
    margin-top: -85px;
    background: #ffffff;
    border-radius: 6px;
}
.people-pop-write-box h3{
    font-size: 16px;
    margin: 0;
    height: 40px;
}
.people-pop-write-name{
    width: 100%;
    height: 36px;
    border-radius: 4px;
    background: #f1f1f1;
    border: 1px solid #dfdfdf;
    outline: none;
    text-align: center;
    font-size: 14px;
}
.people-pop-write-box a{
    position: relative;
    top: 20px;
    width: 112px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: #dcdcdc;
    color: #000000;
    font-size: 14px;
    border-radius: 4px;
}
.people-pop-write-box a:hover{
    background: #ff9e57;
    color: #ffffff;
}

define(function(require,exports,module){
    function ajaxEvent(url,param,callback,errCallback){
        $.ajax({
            type: 'post',
            url: url,
            data: param,
            success: function(data){
                console.log(url);
                console.log(data);
                if( data['code'] == 0 ){
                    callback && callback(data);
                }else{
                    errCallback && errCallback(data);
                };
            }
        });
    };
    function newObj(obj){
        return JSON.parse(JSON.stringify(obj));
    };
//检测val，只能为正数字
    function testVal(val){
        return  val=='' || (!isNaN(val) && val>=0) ? true : false;
    };
//用于过滤生成isChooseData
    function filterData(){
        var tj = {};
        for( var k in unChooseData ){
            if( !Array.isArray(unChooseData[k]) ) continue;
            if( !tj[k] ) tj[k] = [];
            if( k == specialType ){
                for( var i= 0,len=unChooseData[k].length; i<len; i++ ){
                    var v = unChooseData[k][i];
                    if( v['checkNums'] == 1 && v['isAllCheck'] == 1 ){
                        //全选
                        var v2 = v['childList'];
                        for( var j= 1,len2=v2.length; j<len2; j++ ){
                            tj[k].push({
                                dictName: v2[j]['dictName'],
                                profileType: v2[j]['profileType'],
                                id: v2[j]['id'],
                                dictCode: v2[j]['dictCode'],
                                i: i,
                                i2: j,
                                tgiStart: v2[j]['tgiStart'],
                                tgiEnd: v2[j]['tgiEnd'] || ''
                            });
                        };
                    }else if( v['checkNums'] > 0 && v['isAllCheck'] == null ){
                        //非全选
                        var v2 = v['childList'];
                        for( var j= 1,len2=v2.length; j<len2; j++ ){
                            if( v2[j]['checked'] == 1 ){
                                tj[k].push({
                                    dictName: v2[j]['dictName'],
                                    profileType: v2[j]['profileType'],
                                    id: v2[j]['id'],
                                    dictCode: v2[j]['dictCode'],
                                    i: i,
                                    i2: j,
                                    tgiStart: v2[j]['tgiStart'],
                                    tgiEnd: v2[j]['tgiEnd'] || ''
                                });
                            };
                        };
                    };
                };
            }else{
                for( var i= 0,len=unChooseData[k].length; i<len; i++ ){
                    var v = unChooseData[k][i];
                    if( i == 0 && v['checkNums'] == 1 ){
                        //判断总全选
                        tj[k].push({
                            dictName: typeNames[k],
                            profileType: v['profileType'],
                            id: v['id'],
                            dictCode: v['dictCode'],
                            isAllCheck: v['isAllCheck'] || null,
                            i: i
                        });
                        break;
                    }else if( v['checkNums'] > 0 && v['isAllCheck'] == null && Array.isArray(v['childList']) ){
                        //判断2级
                        var v2 = v['childList'];
                        for( var j=1,len2=v2.length; j<len2; j++ ){
                            if( v2[j]['checked'] == 1 ){
                                tj[k].push({
                                    dictName: v2[j]['dictName'],
                                    profileType: v2[j]['profileType'],
                                    id: v2[j]['id'],
                                    dictCode: v2[j]['dictCode'],
                                    isAllCheck: v2[j]['isAllCheck'] || null,
                                    i: i,
                                    i2: j
                                });
                            };
                        };
                    }else if( v['checkNums'] > 0 ){
                        //全选，单选
                        tj[k].push({
                            dictName: v['dictName'],
                            profileType: v['profileType'],
                            id: v['id'],
                            dictCode: v['dictCode'],
                            isAllCheck: v['isAllCheck'] || null,
                            i: i
                        });
                    }
                };
            };
        };
        return tj;
    };
//检测全部选中，如果全部选中了，1级按钮为全选状态，1级和2级点击都要调用,没有全部按钮的不调用
    function fnCheckData(){
        var data = unChooseData[unChooseType];
        if( data[0]['dictCode'] != allChoose ) return false;
        var re = true;
        for( var i= 1, len=data.length; i<len; i++ ){
            if( Array.isArray(data[i]['childList']) && data[i]['isAllCheck'] == null ){
                re = false;
                break;
            }else if( data[i]['checkNums'] != 1 ){
                re = false;
                break;
            };
        };
        if( !re ) return false;
        fnAllChoose1();
    };
//1级全选共用
    function fnAllChoose1(){
        var data = unChooseData[unChooseType];
        for( var i= 0,len=data.length; i<len; i++ ){
            if( i == 0 ){
                data[i]['isAllCheck'] = 1;
                data[i]['checkNums'] = 1;
            }else{
                data[i]['isAllCheck'] = null;
                data[i]['checkNums'] = 0;
                if( Array.isArray(data[i]['childList']) ){
                    for( var j= 0,len2=data[i]['childList'].length; j<len2; j++ ){
                        data[i]['childList'][j]['checked'] = 0;
                    };
                };
            };
        };
        hideDetail();
    };
//获取position位置
    function getPosition(self){
        var $parent = $('#people-pop-unChoose-box');
        getPosition.pLeft = $parent.offset()['left'];
        getPosition.pTop = $parent.offset()['top']
        var selfLeft = $(self).offset()['left'],
            selfTop = $(self).offset()['top'],
            disLeft = selfLeft - getPosition.pLeft + $(self).outerWidth() + 10 ,
            disTop = selfTop - getPosition.pTop + $(self).outerHeight() - 30;
        positionMsg = {left: disLeft, top: disTop};
    };
//设置提交ajax数据
    function getAjaxData(){
        var tj = {};
        for( var k in isChooseData ){
            if( !tj[k] ){
                tj[k] = {
                    profileType: [],
                    id: [],
                    code: []
                };
            };
            var data = isChooseData[k];
            if( k == specialType ){
                for( var j = 0,len=data.length; j<len; j++ ){
                    tj[k]['profileType'].push( data[j]['profileType'] );
                    tj[k]['id'].push( data[j]['id'] + '|' + data[j]['tgiStart'] + '-' + data[j]['tgiEnd'] );
                    tj[k]['code'].push( data[j]['dictCode'] );
                };
            }else{
                for( var j= 0,len=data.length; j<len; j++ ){
                    if( data[j]['isAllCheck'] == 1 ){
                        //全选，需要遍历unChooseData数据看是否有childList
                        if( unChooseData[k][data[j]['i']]['childList'] == null ){
                            tj[k]['profileType'].push( data[j]['profileType'] );
                            tj[k]['id'].push( data[j]['id'] );
                            tj[k]['code'].push( data[j]['dictCode'] );
                        }else{
                            for( var z= 1, len2=unChooseData[k][data[j]['i']]['childList'].length; z<len2; z++ ){
                                tj[k]['profileType'].push( unChooseData[k][data[j]['i']]['childList'][z]['profileType'] );
                                tj[k]['id'].push( unChooseData[k][data[j]['i']]['childList'][z]['id'] );
                                tj[k]['code'].push( unChooseData[k][data[j]['i']]['childList'][z]['dictCode'] );
                            };
                        };
                    }else{
                        tj[k]['profileType'].push( data[j]['profileType'] );
                        tj[k]['id'].push( data[j]['id'] );
                        tj[k]['code'].push( data[j]['dictCode'] );
                    };
                };
            };
            if( len > 0 ){
                tj[k]['profileType'] = tj[k]['profileType'][0];
            }else{
                delete tj[k];
            };
        };
        return tj;
    };
    /* END 方法函数 */

    var queryAllProfileUrl = 'http://localhost:8085/profileDict/queryAllProfile',
    //editMyProfile = 'http://localhost:8085/profileDict/editMyProfile?crowId=10';
        editMyProfileUrl = 'http://localhost:8085/profileDict/editMyProfile',
        saveMyCrowdUrl = 'http://localhost:8085/myCrowds/saveMyCrowd',
        updateMyCrowdUrl = 'http://localhost:8085/myCrowds/updateMyCrowd';

    var $obj,
        vmPop,
        address = 'http://www.hui12.com/', //提交后成功后跳转地址
        $detailBox,
        specialType = 'behavior', //特殊参考
        typeNames = {
            gender: '全部性别',
            region: '全部地域',
            brand: '全部设备',
            operator: '全部运营商'
        },
        textErr = '只能输入正数字',
        positionMsg = {
            left: 0,
            top: 0
        },
        isAgainVisit = false, //判断是否回填
        unChooseType, //点击按钮的类型
        index1, //一级按钮的index
        index2, //二级按钮的index
        allChoose = '-999', //全部按钮的dictCode
        unChooseData, //当前待选标签数据
        isChooseData, //已选标签数据
        cacheDataOriginal; //填写数据备份

    $.get('peoplePop.html',function(data){
        $obj = $(data);
        $('body').append($obj);
        $detailBox = $('#people-pop-detail-box');
        getHtmlCallback();
    });
    function getHtmlCallback(){
        vmPop = avalon.define({
            $id: 'vmPeoplePop',
            toggleShade: false,
            toggleDetail: false,
            togglePeopleBox: true,
            toggleNameBox: false,
            allChoose: allChoose,
            unChooseData: {
                gender: [],
                region: [],
                brand: [],
                operator: [],
                behavior: []
            },
            isChooseData: {
                gender: [],
                region: [],
                brand: [],
                operator: [],
                behavior: []
            },
            childList: [],
            nameVal: '',
            hidePeopleBox: function(){
                vmPop.toggleShade = false;
            },
            showNameBox: function(){
                vmPop.togglePeopleBox = false;
                vmPop.toggleNameBox = true;
            },
            hideNameBox: function(){
                vmPop.nameVal = '';
                vmPop.togglePeopleBox = true;
                vmPop.toggleNameBox = false;
            },
            fnSubmit: function(){
                var crowdName = $.trim(vmPop.nameVal);
                if( crowdName == '' ){
                    alert('请输入姓名');
                    return false;
                }
                var msg = getAjaxData();
                var url, param;
                if( isAgainVisit ){
                    url = updateMyCrowdUrl;
                    param = {
                        crowdName: crowdName,
                        crowId: unChooseData['crowId'],
                        crowdRef: JSON.stringify(msg)
                    }
                }else{
                    url = saveMyCrowdUrl;
                    param = {
                        crowdName: crowdName,
                        crowdRef: JSON.stringify(msg)
                    }
                };
                vmPop.hidePeopleBox();
            },
            //滚轮事件
            fnScroll: function(){
                hideDetail();
            },
            //一级按钮
            unChooseClick: function(e){
                getPosition(this);
                unChooseType = $(this).closest('li[unChooseType]').attr('unChooseType');
                index1 = $(this).attr('index');
                unChooseClickCallback();
            },
            //二级按钮
            unChooseDetailClick: function(){
                index2 = $(this).attr('index');
                unChooseDetailClickCallback();
            },
            //已选标签删除
            removeTag: function(){
                removeTagCallback({
                    isChooseType: $(this).attr('isChooseType'),
                    i: $(this).attr('i'),
                    i2: $(this).attr('i2')
                });
            },
            //针对行为偏好，tgi改变调用
            tgiChange: function(){
                tgiChangeCallback.call(this);
            },
            //关闭detailBox
            detailClose: function(){
                hideDetail();
            },
            detailReset: function(){
                detailResetCallback();
            },
            resetData: function(){
                resetData();
            }
        });
        avalon.scan();
        getCacheDataOriginal();
    };

//tgi改变回调
    function tgiChangeCallback(){
        var $input1,
            $input2,
            val1,
            val2,
            $this = $(this),
            thisIndex = $this.index(),
            $siblings = $this.siblings('input'),
            siblingsIndex = $siblings.index(),
            val = $this.val(),
            siblingsVal = $siblings.val(),
            $a = $this.prevAll('a[ischoosetype]'),
            i = $a.attr('i'),
            i2 = $a.attr('i2'),
            type = $a.attr('isChooseType');
        if( !testVal(val) ){
            alert(textErr);
            $this.val('');
            val = '';
        };
        val = val===''?'':parseFloat(val);
        siblingsVal = siblingsVal===''?'':parseFloat(siblingsVal);
        //给input标识顺序
        if( thisIndex < siblingsIndex ){
            $input1 = $this;
            $input2 = $siblings;
        }else{
            $input1 = $siblings;
            $input2 = $this;
        };
        //给val排序
        if( val==='' && (siblingsVal === '') ){
            val1 = siblingsVal;
            val2 = val;
        }else if( !(val==='') && siblingsVal==='' ){
            val1 = val;
            val2 = siblingsVal;
        }else if( val < siblingsVal && !(val === '') ){
            val1 = val;
            val2 = siblingsVal;
        }else{
            val1 = siblingsVal;
            val2 = val;
        };
        $input1.val(val1);
        $input2.val(val2);
        unChooseData[type][i]['childList'][i2]['tgiStart'] = val1;
        unChooseData[type][i]['childList'][i2]['tgiEnd'] = val2;
        refreshData();
    };
//已选标签删除回调
    function removeTagCallback(param){
        //hideDetail();
        var type = param['isChooseType'],
            i = param['i'],
            i2 = param['i2'];
        if( type == specialType ){
            resetTgi({type: type, i: i, i2: i2});
            var data = unChooseData[type][i];
            var num = 0,
                v2 = data['childList'];
            if( data['isAllCheck'] == 1 ){
                //从全选状态开始
                data['isAllCheck'] = null;
                v2[0]['checked'] = 0;
                for( var j= 1,len=v2.length; j<len; j++ ){
                    if( j == i2 ){
                        v2[j]['checked'] = 0;
                    }else{
                        v2[j]['checked'] = 1;
                        num++;
                    };
                };
                data['checkNums'] = num;
            }else{
                v2[i2]['checked'] = 0;
                for( var j= 1,len=v2.length; j<len; j++ ){
                    if( v2[j]['checked'] == 1 ) num++;
                };
                data['checkNums'] = num;
            };
        }else{
            if( i2 == null ){
                //单选，2级全选
                unChooseData[type][i]['checkNums'] = 0;
                unChooseData[type][i]['isAllCheck'] = null;
                if( Array.isArray(unChooseData[type][i]['childList']) ){
                    unChooseData[type][i]['childList'].forEach(function(v,i){
                        v['checked'] = 0;
                    });
                };
            }else{
                //2级单选,并且要更新1级的checkNums
                unChooseData[type][i]['childList'][i2]['checked'] = 0;
                var num = 0;
                for( var j= 1,len=unChooseData[type][i]['childList'].length; j<len; j++ ){
                    if( unChooseData[type][i]['childList'][j]['checked'] == 1 ) num++;
                };
                unChooseData[type][i]['checkNums'] = num;
            };
        };

        refreshDetailData();
        refreshData();
    };
//一级按钮点击回调
    function unChooseClickCallback(){
        var data = unChooseData[unChooseType];
        if( data[index1]['dictCode'] == allChoose && data[index1]['isAllCheck'] == null ){
            //全选
            fnAllChoose1();
        }else if( data[index1]['dictCode'] == allChoose && data[index1]['isAllCheck'] == 1 ){
            //取消全选
            data[index1]['isAllCheck'] = null;
            data[index1]['checkNums'] = 0;
        }else if( !Array.isArray(data[index1]['childList']) && data[index1]['checkNums'] == 0 ){
            //普通的，没有2级,选中,并且取消对应全选状态,并且隐藏2级窗口
            data[index1]['checkNums'] = 1;
            data[0]['isAllCheck'] = null;
            data[0]['checkNums'] = 0;
            hideDetail();
        }else if( !Array.isArray(data[index1]['childList']) && data[index1]['checkNums'] == 1 ){
            //普通的，没有2级，取消选中，并且隐藏2级窗口
            data[index1]['checkNums'] = 0;
            hideDetail();
        }else if( Array.isArray(data[index1]['childList']) ){
            //有2级菜单
            showDetail();
        };

        fnCheckData();
        refreshData();
    };
//二级按钮点击回调
    function unChooseDetailClickCallback(){
        //只要有点击，就是取消1级的全选状态，行为偏好没有全选不调用
        if( unChooseType != specialType ){
            unChooseData[unChooseType][0]['isAllCheck'] = null;
            unChooseData[unChooseType][0]['checkNums'] = 0;
        };
        //如果是行为偏好的，需要重置对应的tgi
        var dataP = unChooseData[unChooseType][index1],
            dataC = dataP['childList'];
        if( dataC[index2]['dictCode'] == allChoose && dataP['isAllCheck']==null ){
            //全选
            fnAllChoose2();
        }else if( dataC[index2]['dictCode'] == allChoose && dataP['isAllCheck']==1 ){
            //取消全选
            resetTgi({type: unChooseType,i:index1});
            dataP['checkNums'] = 0;
            dataP['isAllCheck'] = null;
            dataC[index2]['checked'] = 0;
        }else if( dataC[index2]['dictCode'] != allChoose && dataC[index2]['checked'] == 0 ){
            //单选,会取消全选,并且要统计选中的个数 dataP['checkNums'],如果全部全中，则全选状态
            dataP['isAllCheck'] = null;
            dataC[0]['checked'] = 0;
            dataC[index2]['checked'] = 1;
            var num = 0;
            var total = 0;
            for( var i= 1,len=dataC.length; i<len; i++ ){
                total++;
                if( dataC[i]['checked'] == 1 ) num++;
            };
            if( num == total ){
                //全选
                fnAllChoose2();
            }else{
                //非全选
                dataP['checkNums'] = num;
            };
        }else if( dataC[index2]['dictCode'] != allChoose && dataC[index2]['checked'] == 1 ){
            //取消单选, 并且要统计选中的个数 dataP['checkNums']
            resetTgi({type: unChooseType, i: index1, i2: index2});
            dataC[index2]['checked'] = 0;
            var num = 0;
            for( var i= 1,len=dataC.length; i<len; i++ ){
                if( dataC[i]['checked'] == 1 ) num++;
            };
            dataP['checkNums'] = num;
        };

        //2级全选共用
        function fnAllChoose2(){
            dataP['checkNums'] = 1;
            dataP['isAllCheck'] = 1;
            for( var i= 0,len=dataC.length; i<len; i++ ){
                if( i == 0 ){
                    dataC[i]['checked'] = 1;
                }else{
                    dataC[i]['checked'] = 0;
                };
            };
        };
        fnCheckData();
        refreshData();
        refreshDetailData();
    };
//重置tgi
    function resetTgi(param){
        //param = {type: type, i: i, i2: i2}
        //type,i为必填参数，如果只存在i，重置一例，存在i2，则重置对应的
        //1、点击全选按钮，全选状态，不做任何处理
        //2、点击全选按钮，取消全选状态，重置这一例的tgi
        //3、点击单个按钮，取消选中状态，对应重置tgi
        //4、点击detailbox的重置按钮，重置这一例的tgi
        //5、从已选标签中删除，重置对应的tgi
        var type = param['type'],
            i = param['i'],
            i2 = param['i2'];
        var data = unChooseData[type][i]['childList'];
        if( i2 == null ){
            data.forEach(function(v,i){
                v['tgiStart'] = 1;
                v['tgiEnd'] = '';
            });
        }else{
            data[i2]['tgiStart'] = 1;
            data[i2]['tgiEnd'] = '';
        };
    };
//点击detailbox上的重置按钮
    function detailResetCallback(){
        var data = unChooseData[unChooseType][index1];
        data['isAllCheck'] = null;
        data['checkNums'] = 0;
        data['childList'].forEach(function(v,i){
            v['checked'] = 0;
        });
        resetTgi({type: unChooseType, i: index1});
        refreshDetailData();
        refreshData();
    };
//显示2级菜单，刷新数据，更新位置
    function showDetail(){
        refreshDetailData();
        $detailBox.css({
            left: positionMsg['left'],
            top: positionMsg['top']
        });
        vmPop.toggleDetail = true;
    };
//隐藏2级菜单
    function hideDetail(){
        vmPop.toggleDetail = false;
    };
//获取原始数据结构
    function getCacheDataOriginal(){
        require('./4aData');
        cacheDataOriginal = newObj(JSON.parse(a1));
        unChooseData = newObj(cacheDataOriginal);
        refreshData();
    };
//获取填充的数据结构
    function getCacheDataFill(param){
        //var param = {crowId: 10};
        unChooseData = newObj(JSON.parse(a2));
        vmPop.nameVal = unChooseData['crowName'] || '';
        refreshData();
    };

//刷新view
    function refreshDetailData(){
        if( !unChooseType ) return false;
        vmPop.childList = newObj( unChooseData[unChooseType][index1]['childList'] );
    };
    function refreshData(){
        vmPop.unChooseData = newObj(unChooseData);
        isChooseData = filterData();
        vmPop.isChooseData = newObj(isChooseData);
    };
//重置view
    function resetData(){
        if( !cacheDataOriginal ) return false;
        unChooseData = newObj(cacheDataOriginal);
        vmPop.unChooseData = newObj(unChooseData);
        isChooseData = filterData();
        vmPop.isChooseData = newObj(isChooseData);
        hideDetail();
        vmPop.hideNameBox();
    };
    module.exports = {
        openPop: function(param){
            if( !$obj ){
                var caller = arguments.callee;
                setTimeout(function(){
                    caller(param);
                },50);
                return false;
            };
            resetData();
            isAgainVisit = false;
            vmPop.toggleShade = true;
            if( param && param['address'] ) address = param['address'];
            if( param && param['crowId'] ){
                isAgainVisit = true;
                getCacheDataFill({crowId: param['crowId']});
            };
        }
    };
});
/*
 * param参数，不填写为创建，填写为修改。
 * {
 *   address: 保存成功后的跳转地址
 *   crowId: 33
 * }
 * */

用avalon写的一个弹窗demo

标签：

原文地址：http://blog.csdn.net/nbin2008/article/details/51592010