東莞 cti 字體 停止 top 清空 slide 寧夏 input.h

jquery.citypicker(自己寫的jQuery中國城市選擇器)

[email protected]:164068300
* @版本 jquery.citypicker.js(version="1.1.0")
* @使用方法：
* 1.jquery.citypicker就jquery插件，使用此插件前必須先引用jquery.js庫文件
* 2.再引用此庫文件，引用方式：<script type="text/javascript" src="jquery.citypicker.js"></script>
* 3.引用CSS樣式文件和圖片：<link type="text/css" href="css/jquery.citypicker.css" rel="stylesheet" />

*/
;
cities = new Array();
pro = new Array("港澳臺藏", "直轄市", "河北", "山西", "遼寧", "吉林", "江蘇", "浙江", "安徽", "福建", "江西", "山東", "河南", "湖北", "湖南", "廣東", "廣西", "海南", "四川", "貴州", "雲南", "陜西", "甘肅", "青海", "寧夏", "新疆", "內蒙", "黑龍江");
cities[‘港澳臺藏‘] = new Array("澳門", "香港", "臺灣", "拉薩");
cities[‘直轄市‘] = new Array("北京", "上海", "重慶", "天津");
cities[‘河北‘] = new Array("唐山", "邯鄲", "保定", "承德", "秦皇島", "石家莊");
cities[‘山西‘] = new Array("太原", "大同", "陽泉", "長治", "晉城", "晉中", "運城", "臨汾");
cities[‘內蒙‘] = new Array("呼和浩特", "呼倫貝爾", "包頭", "烏海", "赤峰", "興安盟");
cities[‘遼寧‘] = new Array("沈陽", "大連", "鞍山", "撫順", "本溪", "丹東", "錦州", "阜新", "遼陽", "鐵嶺");
cities[‘吉林‘] = new Array("長春", "吉林", "四平", "遼源", "通化", "松原");
cities[‘黑龍江‘] = new Array("哈爾濱", "大興安嶺", "雞西", "大慶", "黑河", "齊齊哈爾");
cities[‘江蘇‘] = new Array("南京", "無錫", "徐州", "常州", "蘇州", "南通", "揚州", "鎮江", "連雲港");
cities[‘浙江‘] = new Array("杭州", "寧波", "溫州", "嘉興", "紹興", "金華", "衢州", "臺州", "麗水");
cities[‘安徽‘] = new Array("合肥", "蕪湖", "蚌埠", "淮南", "淮北", "銅陵", "安慶", "黃山", "馬鞍山");
cities[‘福建‘] = new Array("福州", "廈門", "莆田", "三明", "泉州");
cities[‘江西‘] = new Array("南昌", "九江", "鷹潭", "贛州", "上饒", "景德鎮");
cities[‘山東‘] = new Array("濟南", "青島", "煙臺", "德州", "聊城", "濱州", "荷澤");
cities[‘河南‘] = new Array("鄭州", "開封", "洛陽", "安陽", "許昌", "南陽", "周口", "駐馬店", "三門峽");
cities[‘湖北‘] = new Array("武漢", "黃石", "宜昌", "荊門", "荊州", "黃岡", "鹹寧", "恩施");
cities[‘湖南‘] = new Array("長沙", "湘潭", "嶽陽", "常德", "益陽", "郴州", "湘西", "張家界");
cities[‘廣東‘] = new Array("廣州", "韶關", "深圳", "珠海", "汕頭", "佛山", "江門", "湛江", "惠州", "東莞", "中山");
cities[‘廣西‘] = new Array("南寧", "柳州", "桂林", "北海", "玉林");
cities[‘海南‘] = new Array("海口", "三亞", "海南沿革");
cities[‘四川‘] = new Array("成都", "瀘州", "德陽", "綿陽", "樂山", "眉山", "宜賓", "攀枝花");
cities[‘貴州‘] = new Array("貴陽", "遵義", "安順", "銅仁", "六盤水");
cities[‘雲南‘] = new Array("昆明", "曲靖", "玉溪", "保山", "麗江", "大理");
cities[‘陜西‘] = new Array("西安", "銅川", "寶雞", "鹹陽", "延安", "漢中");
cities[‘甘肅‘] = new Array("蘭州", "金昌", "白銀", "天水", "嘉峪關");
cities[‘青海‘] = new Array("西寧", "海東", "海北", "黃南", "海南", "果洛", "玉樹", "海西");
cities[‘寧夏‘] = new Array("銀川", "吳忠", "固原", "中衛");
cities[‘新疆‘] = new Array("烏魯木齊", "克拉瑪依", "哈密", "伊犁", "吐魯番");
;
(function($){
jQuery.fn.extend({
"citypicker": function(){
return this.each(function(){
new jQuery.CityPicker(this);
});
}
});
jQuery.CityPicker = function(obj){
var $input = $(obj);
//產生一個選擇器
var $container = setupContainer();

$input.click(function(event){
//設置當前不可讀
this.readOnly = true;
//得到輸入框的位置
var offset = $input.offset();
//得到輸入框的高度,寬度
var height = $input.height();
var width = $input.width();
//計算選擇器的位置
var cont_top = offset.top + height;
var cont_left = offset.left;
//設置選擇器出現的位置
$container.appendTo($("body")).css({
‘top‘: cont_top + 5,
‘left‘: cont_left
});
if ($container.is(":hidden")) {
//當前選擇器是隱藏的
$container.show(10);
}
else
if ($container.is(":visible")) {
//當前選擇器是顯示的
//停止事件冒泡
event.stopPropagation();
}
});
//點擊在選擇器以外，隱藏它
$(document).bind("click", function(event){
var $target = $(event.target);
var hideFag = $target.parent("div").attr("id");
if (!(hideFag == "citypicker_container" || hideFag == "citypicker_caption" || hideFag == "citypicker_city" || hideFag == "citypicker_pro")) {
$container.hide();
}
});

//初始化選擇器函數
function setupContainer(){
var container = document.createElement("div");
var caption = document.createElement("div");
var prov = document.createElement("div");
var city = document.createElement("div");

var $container = $(container).attr("id", "citypicker_container");
var $caption = $(caption).attr("id", "citypicker_caption");
var $prov = $(prov).attr("id", "citypicker_pro");
var $city = $(city).attr("id", "citypicker_city");
$container.append($caption).append($prov).append($city);
$("<h1>選擇城市</h1>").appendTo($caption);
$("<span>關閉</span>").appendTo($caption).click(function(){
$container.slideUp(100);
});
for (p in pro) {
$("<label>" + pro[p] + "</label>").appendTo($prov).click(function(){
var i = $(this).text();
//被點了的省份字體色改變
$(this).css({
‘color‘: ‘blue‘,
});
//清空城市，讓另外一個省的城市顯示在此處
$city.empty();
for (c in cities[i]) {
$("<label>" + cities[i][c] + "</label>").appendTo($city).click(function(){
//這裏把相應的值設置到輸入框當中去
$(obj).val($(this).text());
//被點了的城市字體色改變
$(this).css({
‘color‘: ‘blue‘,
‘font-weight‘: ‘bold‘
});
//選擇以後隱藏選擇器
$container.fadeOut("fast");
});
}
});
}
return $container;
}
}
})(jQuery);

jquery城市選擇器