怎么写一个机场选择功能的js插件

张瑜2 发布于 2013/08/24 12:55
阅读 511
收藏 0

看你写过。

怎么写一个机场选择功能的js插件?  

加载中
0
markYun
markYun
// 弹窗插件   $("input").plug_pop_layer();
var show = true; (function($) {
    $.fn.extend({
        plug_pop_layer: function(option) {
            var defaults = {
                time: "",
                width: 500,
                height: "300",
                bgcolor: "#FFFFFF",
                opacity: "0.9",
                zIndex: 1000,
                content: "",
                isShade: false,
                // 遮罩,
                input: 'node'
            };
            $(".box").remove();
            var opts = $.extend(defaults, option); // 合并传入的参数
            var bgdiv = $("<div></div>").css( // 遮罩层div
            {  "position": "absolute",
                "top": "0",
                "background": "pink",
                 "filter":
                 "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=90)",
                "opacity": "0.9",
                "width": $(window).width(),
                "height": $(window).height(),
                "z-index": 9999
            });
            var boxdiv = $("<div class='box'></div>").css({
                "position": "absolute",
                "align": "center",
                "background": opts.bgcolor,
                "filter": "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=90,finishOpacity=100)",
                "opacity": opts.opacity,
                // "width" : opts.width,
                // "height" : opts.height,
                "z-index": opts.zIndex
                // "display" : "none"
            });
            // 导航div
            var addNav = function(node) {
                boxnav = "<div class=\"boxhead\"><a id='hot' value=\"hot\"class=\"headnav on\">热门城市</a>" + "<a id='c1' value=\"a,b,c,d,e\"class=\"headnav \">A B C D E</a>" + "<a id='c2' value=\"f,g,h,i,j\"class=\"headnav\">F G H I J</a>" + "<a id='c3' value=\"k,l,m,n,o\"class=\"headnav\">K L M N O</a>" + "<a id='c4' value=\"p,q,r,s,t\"class=\"headnav\">P Q R S T</a>" + "<a id='c5' value=\"u,v,w,x,y,z\"class=\"headnav\"> U V W X Y Z</a>" + "<!--<em style=\" line-height: 30px;  float: left;\">机场拼音首字母</em>-->" + "<span class=\"close\">&nbsp;关闭</span>" + "<div class=\"clear\">" + "</div>" + "<div class=\"xian\"></div></div>" + "<div class=\"boxError\">错误:获取数据失败,请刷新重试</div>";
                // 添加内容到弹出层
                bigbox = $("<div class=\"bigbox\">" + boxnav + "</div>");
                $(".box").empty();
                    node.append(bigbox);
            };
            //关闭按钮
            boxdiv.delegate(".close", "click",
            function(event) {
                $(".box").empty();
            });
            boxdiv.delegate(".headnav", "click",
            function() {   
                dealcities($(this).attr('value'), bigbox);
            });
            //添加2级列表----------------------------
            boxdiv.delegate(".box_a", "click",
            function() {
                shi=$(this).attr("title");
                addquyu($(this));
            });
            //添加2级列表end-----------------------------
            
            //添加2级列表点击事件----------------------------
            boxdiv.delegate(".airportName", "click",
            function(event) {
                opts.input.val(shi+"市,"+$(this).attr("title"));
                $(".airportnum").val($(this).attr("value"));
                $(".box").empty();
             });
            //添加2级列表点击事件end----------------------------
            // 初始化
            var init = function(evt, opts) {
                var offset = $(evt.target).offset(); // 距页面顶端距离
                boxdiv.css({
                    top: offset.top + 5 + $(evt.target).height() + "px",
                    left: offset.left
                });
                $(".box").css("display", "block");
                if ($(".box").length < 1) {
                    $("body").append(boxdiv);
                }
                boxdiv.toggle(); // 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
                addNav($(".box"));
            };
            var hidDiv = function() {
                boxdiv.hide(0); // 隐藏
            };
            var hidBgDiv = function() {
                bgdiv.remove();
            };
            $(document).click(function(event) {
                $(".box").empty();
                hidDiv();
                hidBgDiv();
                event.stopPropagation();
            });
            boxdiv.click(function(evt) {
                evt.stopPropagation(); // 如果侦听到了事件,同时不希望事件继续在显示列表中传递(冒泡),就可以调用event.stopPropagation()
            });
            return this.each(function() {
                var $this = $(this);
                $this.after(boxdiv);
                $this.click(function(evt) {
                 
                    if (opts.isShade) {
                        $("body").append(bgdiv);
                    }
                    init(evt, opts);
                    dealcities("hot",bigbox);
                    // 取消事件冒泡
                    evt.stopPropagation();
                });
            });
        }
    });
})(jQuery);

function dealcities(val, node) {
    $.post("cities.jsp", {   "conditions": val
    },   function(data) {
        if (val == 'hot') {
            hotdatas(data, node);
        } else {
            normaldatas(data, node);
        }
    },
    "json");
}

function hotdatas(datas, node) {
    cityList='';
    var i = 0;
    cityList += "<ul><li class='boxList' ><span id='city'>";
       $.each(datas, function(k, val) {
                    i++;
                    cityList += "<a class=\"box_a cityname\" title=" + val.name + " reid='" + val.id + "'><em>" + val.name + "</em></a>";

                    if (i % 5 === 0 && i != 0) {
                        cityList += "</span>" +
                                "<div  class=\"boxlist2\">" +
                                "<ul><li><div class=\"boxlist3\" ></li></ul>" +
                                "</div>" +
                                "<div class=\"clear\">" + "</div></li><li class=\"clear\"> </li>" +
                                "</ul><ul><li class='boxList'><span>";
                    }
                });
                cityList += "</span><div  class=\"boxlist2\"><ul><li><div class=\"boxlist3\" ></li></ul></div><div class=\"clear\">" +
                        "</div></li><li class=\"clear\"></li></ul> ";
                $("#citylist").remove();
                $("<div id=\"citylist\"></div></span ></ul>").html(cityList).appendTo(node);
}
function normaldatas(datas, node) {
    cityList='';
    $.each(datas, function(key, v1) {
        $.each(v1,  function(key, v1) {
             var i = 0;
            cityList += "<ul class=\"\"><li class=\"boxL\">" + key + "</li><li class='boxList' ><span id='city'>";
            $.each(v1,
            function(k, val) {
                i++;
                cityList += "<a class=\"box_a cityname\" title=" + val.name + " reid='" + val.id + "'><em>" + val.name + "</em></a>";
                if (i % 5 === 0 && i != 0) {
                    cityList += "</span>" + "<div  class=\"boxlist2\"><ul><li><div class=\"boxlist3\" ></li></ul>" + "</div>" +
                    "<div class=\"clear\">" + "</div></li><li class=\"clear\"></li></ul><ul><li class=\"boxL\">&nbsp;&nbsp;</li><li class='boxList' ><span>";
                }
            });
            cityList += "</span><div  class=\"boxlist2\"><ul><li><div class=\"boxlist3\" ></li></ul></div><div class=\"clear\">" + " </div></li><li class=\"clear\"></li></ul> ";
            $("#citylist").remove();
        });
        $("<div id=\"citylist\"></div></span ></ul>").html(cityList).appendTo(node);
    });
}
//添加区域
function addquyu(node) {
    $(".box_a").attr("class", "box_a cityname");
    $(node).attr("class", "box_a cityname boxon");
    var _parent = $(node).parents("span:first").nextAll("div:first");
    var port = _parent.find("div:first");
    $("body").find(".boxlist2").each(function() {
        $(".boxlist2").css("display", "none");
    });
    _parent.css("display", "block");
    port.empty();
    $.post("regions.jsp", {
        "conditions": $(node).attr("reid")
    },
    function(data) {
        $.each(data,
        function(key, val) {
            var portnode = "<a reid='" + val.id + "' value='" + val.id + "' class=\"airportName\" title=" + val.name + "><em>" + val.name + "</em></a>";
            port.removeAttr("display");
            port.append(portnode);;
        });
    },
    "json");

}



写的很烂。

张瑜2
张瑜2
明白了
返回顶部
顶部