汽车车型选择弹出层

2019独角兽企业重金招聘Python工程师标准>>>

/**
 * 
 * 车型选择
 * 
 * @param _point
 *            弹出窗触发节点
 */
function chooseModel(_point) {
if ($("#_root_div").length > 0) {
$("#_root_div").remove();
}
var RootDiv = $("<div id='_root_div'  tabindex='0' class='gm-box' style='display: block;'></div>");
var PopNav = $("<div id='pop-nav' class='tab-bg'></div>");
var RencentDiv = $("<div id='recent_id' class='gp-Recently'></div>");
if($("body").has($(RootDiv)).length){//页面存在根节点内容则直接退出
$("#_root_div").remove();
}else{
// $("#_root_div").live("blur",function(){
// $(this).remove();
// });
// oldobj = $(RootDiv);// 获得焦点的div
// document.onmousedown = Hanlder;
$(RootDiv).mouseleave(function(){
$(this).remove();
});
$(RootDiv).append(initPopNav($(PopNav)));
$(_point).after($(RootDiv));
$(RootDiv).delegate(".zzc-selector-tab", "click", function(event) {
$(".zzc-selector-tab").each(function() {
$(this).removeClass("ontab");
});
$(this).addClass("ontab");
if ($("#chooser_contents").length > 0) {
$("#chooser_contents").remove();
}
$(RootDiv).append(dealBrands($(_point),$(this).attr("qts")));
});
setLocation(_point,$(RootDiv));
removeOverflow();//去除弹窗的滚动条出现
}


}


function Hanlder(e) {
e = e ? e : window.event;
var tag = e.srcElement ? e.srcElement : e.target;
if (tag.tagName == "DIV") {
if (oldobj == null)
oldobj = tag;
else if (oldobj != tag) {
oldobj = tag;
setTimeout("alert('我失去了输入焦点!')", 10);
}
} else if (oldobj != null) {
oldobj = null;// 把div焦点对象清除
setTimeout("alert('我失去了输入焦点!')", 10);
}
}


function removeOverflow(){
// $("body").attr("style", "overflow:hidden");
}


function dealBrands(rootNode,qts){
var cotent_div=$("<div id='chooser_contents'>");
$.post("query_brands.jsp", {
condition : qts
}, function(data) {
if (data.stat == 1) {
$.each(data.content, function(k1, v1) {
var _ul = $("<ul  class='gp-Models'></ul>");
$(_ul).append("<li class='cls'>" + k1 + "</li>");
var _content_li = $("<li class='car-list'></li>");
var _span = $("<span></span>");
var _model_panel=$("<div class='gp-Models-b' style='display: none;'></div>");
var count=0;
var max_index=Math.ceil(v1.length/5);
$.each(v1, function(k2, v2) {
var _a=$("<a qid='"+v2.id+"' title='" + v2.zh_name + "' class='zzc-selector-1' href='javascript:void(0);'><em>" + v2.zh_name + "</em></a>");
$(_span).append(_a);
if ((k2+1) % 5 == 0) {
                        $(_content_li).append($(_span));
                        $(_content_li).append($("<div class='gp-Models-b' style='display: none;'></div>"));
                        _span = $("<span></span>");
                        count+=1;
                    }
                    $(_a).click(function(){
                    $("#brand_name").val($(this).attr("title"));
                    $(".zzc-selector-1").each(function(){
                    $(this).removeClass("on-list-b");
                    });
                    $(".gp-Models-b").each(function(){
                    $(this).css("display","none");
                    });
                    $(this).addClass("on-list-b");
                    var model_root=$(this).parent("span").next(".gp-Models-b").eq(0);
                    $(model_root).empty();
                    $(model_root).css("display","block");
                    dealModel($(rootNode),$(this).attr("qid"),$(model_root));
                    });
});
if(max_index>count){
                    $(_content_li).append($(_span));
                    $(_content_li).append($(_model_panel));
}
$(_ul).append($(_content_li));
            $(_content_li).append("<div class=\"clear\"></div>");
            $(_ul).append("<li class=\"clear\"></li>");
            $(cotent_div).append(_ul);
});
$(cotent_div).append("<li class='clear'></li>");
} else {
$(cotent_div).text("查询超时");
};
}, "json");
return cotent_div;
}


function initPopNav(_popNode){
// _popNode.append("<a class='zzc-selector-hot' href='javascript:void(0);'>热门</a>");
_popNode.append("<a class='zzc-selector-tab' qts='a,b,c,d,e' href='javascript:void(0);'>A B C D E</a>");
_popNode.append("<a class='zzc-selector-tab' qts='f,g,h,i,j' href='javascript:void(0);'>F G H I J</a>");
_popNode.append("<a class='zzc-selector-tab' qts='k,l,m,n,o' href='javascript:void(0);'>K L M N O</a>");
_popNode.append("<a class='zzc-selector-tab' qts='p,q,r,s,t' href='javascript:void(0);'>P Q R S T</a>");
_popNode.append("<a class='zzc-selector-tab' qts='u,v,w,x,y,z' href='javascript:void(0);'>U V W X Y Z</a>");
_popNode.append("<div class='clear'></div>");
return _popNode;
}


function dealModel(rootNode,qid,_point){
$.post("query_models.jsp", {
qid : qid
}, function(data) {
var _model_div=$("<div class='both'></div>");
if (data.stat == 1) {
var count=0;
var max_index=Math.ceil(data.content.length/4);
$.each(data.content, function(k1, v1) {
var _a=$("<a qid='"+v1.id+"' title='" + v1.zh_name + "' class='zzc-selector-2' href='javascript:void(0);'><em>" + v1.zh_name + "</em></a>");
$(_model_div).append(_a);
if ((k1+1) % 4 == 0) {
                        $(_point).append($(_model_div));
                        $(_point).append($("<div class='gp-Models-c'></div>"));
                        _model_div=$("<div class='both'></div>");
                        count+=1;
                    }
$(_a).click(function(){
$("#model_name").val($(this).attr('title'));
                    $(".zzc-selector-2").each(function(){
                    $(this).removeClass("on-list-c");
                    });
                    $(".gp-Models-c").each(function(){
                    $(this).css("display","none");
                    });
                    $(this).addClass("on-list-c");
                    var model_more_root=$(this).parent("div").next(".gp-Models-c").eq(0);
                    $(model_more_root).empty();
                    $(model_more_root).css("display","block");
                    dealMoreModel($(rootNode),$(this).attr("qid"),$(model_more_root));
                    });
});
if(max_index>count){
$(_point).append($(_model_div));
                $(_point).append($("<div class='gp-Models-c'></div>"));
}
} else {
$(_model_div).text("查询超时");
};
}, "json");
}
function dealMoreModel(rootNode,qid,_point){
$.post("query_models_more.jsp", {
qid : qid
}, function(data) {
var _more_span=$("<span></span>");
if (data.stat == 1) {
var count=0;
var max_index=Math.ceil(data.content.length/4);
$.each(data.content, function(k1, v1) {
var _a=$("<a qid='"+v1.id+"' title='" + v1.zh_name + "' class='zzc-selector-3' href='javascript:void(0);'><em>" + v1.zh_name + "</em></a>");
$(_more_span).append(_a);
if ((k1+1) % 4 == 0) {
$(_point).append($(_more_span));
_more_span=$("<span></span>");
count+=1;
}
$(_a).click(function(){
var val=$("#brand_name").val()+","+$("#model_name").val()+","+$(this).attr("title");
$(rootNode).val(val);
$(rootNode).nextAll("input[name='base_p1_id']").remove();
$(rootNode).after($("<input type='hidden' name='base_p1_id' val='"+$(this).attr("qid")+"'/>"));
$("#_root_div").remove();
$("#previewimg").css("display","block"); 
});
});
if(max_index>count){
$(_point).append($(_more_span));
}
} else {
$(_model_div).text("查询超时");
};
}, "json");
} 
function setLocation(_point,_root){
$(_root).offset({
top : $(_point).offset().top + 40,
left : $(_point).offset().left+7
});
}

转载于:https://my.oschina.net/markyun/blog/151640