jQuery 仿百度地图中的城市列表

// JavaScript Document
/*
*/
(function($) {
	
	$.selectSort = function(options){install(options)};
	//各种属性
	$.selectSort.defaults = {
			title:"",//显示的标题
			divClass: "", // 显示的div
			clickClass:"",//判断你点击的class
			obj: "", // 你要查询json的对象
			name: "", // obj下的name
			value: "", // obj下的value
			okEvent: 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);

评论

2 楼 catmimigo 2012-05-04  

能不能提供demo啊？

1 楼 demojava 2012-02-29  

....犀利。。。