jQuery 仿百度地图中的城市列表
// JavaScript Document/**/(function($) {$.selectSort = function(options){install(options)};//各种属性$.selectSort.defaults = {title:"",//显示的标题divClass: "", // 显示的divclickClass:"",//判断你点击的classobj: "", // 你要查询json的对象name: "", // obj下的namevalue: "", // obj下的valueokEvent: function (){},//关闭层之后调用的方法，也可不写。divBox: false //true就显示，false就不显示. 默认false}function install(options){// 合并参数var options = $.extend($.selectSort.defaults, options);//页面显示$(options.divClass).slideDown(500);var proList = "";var html = "";var divBox ="";var shopSort ="";var title ="";if(options.divBox == true){divBox = "<div class='cityTitle'><span class='fl'>"+options.title+"</span><img src='../images/closed.gif' class='showImg'/></div><div class='proList'></div><ul class='proEngAll'><li><a href='javascript:void(0)' class='anchor'>A</a></li><li><a href='javascript:void(0)' class='anchor'>B</a></li><li><a href='javascript:void(0)' class='anchor'>C</a></li><li><a href='javascript:void(0)' class='anchor'>F</a></li><li><a href='javascript:void(0)' class='anchor'>G</a></li><li><a href='javascript:void(0)' class='anchor'>H</a></li><li><a href='javascript:void(0)' class='anchor'>J</a></li><li><a href='javascript:void(0)' class='anchor'>L</a></li><li><a href='javascript:void(0)' class='anchor'>N</a></li><li><a href='javascript:void(0)' class='anchor'>Q</a></li><li><a href='javascript:void(0)' class='anchor'>S</a></li><li><a href='javascript:void(0)' class='anchor'>X</a></li><li><a href='javascript:void(0)' class='anchor'>Y</a></li><li><a href='javascript:void(0)' class='anchor'>Z</a></li></ul><div class='proEngSort'></div>";}else{divBox ="<div class='cityTitle'><span class='fl'>"+options.title+"</span></div>"+title+"<div class='shopSort'></div>";}$(divBox).appendTo(options.divClass);var objN = eval("(" + options.obj + ")");for(n in objN) {html += '<dl>';html += '<dt>';html += "<a href='javascript:void(0);' class='city_"+objN[n][options.name][0]+"'>"+objN[n][options.name][1]+":</a>";shopSort += "<h3>"+objN[n][options.name][1]+":</h3>";html += '</dt>';html += '<dd>';for(var j = 0; j < objN[n][options.value].length; j ++) {html += '<a href="javascript:void(0);" id="'+objN[n][options.value][j][0]+'">' + objN[n][options.value][j][1] + '</a>';shopSort += '<a href="javascript:void(0);" id="'+objN[n][options.value][j][0]+'">' + objN[n][options.value][j][1] + '</a>';}html += '</dd>';html += '</dl>';proList +='<a href="javascript:void(0);" id="city_'+objN[n][options.name][0]+'_'+n+'">' + objN[n][options.name][1]+ '</a>';}//把得到的值，放到指定的div中去$(html).appendTo(".proEngSort");$(proList).appendTo(".proList");$(shopSort).appendTo(".shopSort");/*关闭*/$(".showImg").hover(function(){$(this).attr("src","../images/close.gif");},function(){$(this).attr("src","../images/closed.gif");}).click(function(){$(options.divClass).slideUp().empty();return false;});$(".proEngSort a,.proList a,.shopSort a").bind("click",function(){var proCity = $(this).html();//市var proId = $(this).attr("id");$(options.clickClass).val(proCity);$("#proId").val(proId);//获得value值。$(options.divClass).slideUp("fast", options.okEvent).empty();//绑定事件，用于获得值后触发，});/*处理ABC*/$(".anchor").live("click",function(){$(".proEngSort").scrollTop(0);var anchorText = $(this).text();if($(".city_"+anchorText).length > 0){var pos = $(".city_"+anchorText).offset().top; var poshigh = $(".cityTitle").height(); $(".proEngSort").animate({ scrollTop: pos-poshigh-120},0); } return false;});/*点击任何地方关闭层*///$(document).click(function(event) {//if ($(event.target).attr("id") != "allSortVal") {//$(options.divClass).hide();//}//});}})(jQuery);1 楼 demojava 2012-02-29 ....犀利。。。 2 楼 catmimigo 2012-05-04 能不能提供demo啊？