快捷導(dǎo)航

基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框 (數(shù)據(jù)、步驟、代碼)

更新時(shí)間：2012年07月26日 00:17:43 作者：

基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框，需要的朋友可以參考下

1. 數(shù)據(jù)
一共包含了全國(guó)3049所大學(xué), 從人人網(wǎng)拷貝的 (僅供學(xué)習(xí)交流, 請(qǐng)勿用于商業(yè)項(xiàng)目), 這是一個(gè)腳本文件, 里含的JSON對(duì)象存儲(chǔ)了學(xué)校的信息, 格式為:

復(fù)制代碼代碼如下:

 
var schoolList=[ 
{ 
"id":1, //省份id 
"school": [ 
{ 
"id": 1001, //學(xué)校id 
"name": "\u6e05\u534e\u5927\u5b66" //學(xué)校名稱 
} 
/.... 
], //這個(gè)省的學(xué)校 
"name": "\u5317\u4eac" 
}, 
//... 
]; 

2. 步驟
2.1 彈框的構(gòu)造及彈出方式
目前彈框分為iframe和div兩種形式, 在本例中我選擇使用div作為彈框, 彈框的結(jié)構(gòu)如下:

復(fù)制代碼代碼如下:

 
<div id="choose-box-wrapper"> 
<div id="choose-box"> 
<div id="choose-box-title"> 
<span>選擇學(xué)校</span> 
</div> 
<div id="choose-a-province"> 
</div> 
<div id="choose-a-school"> 
</div> 
<div id="choose-box-bottom"> 
<input type="botton" onclick="hide()" value="關(guān)閉" /> 
</div> 
</div> 
</div> 

彈框初始狀態(tài)下為隱藏狀態(tài)(display:none), 為了用戶體驗(yàn), 在用戶觸發(fā)打開(kāi)彈框時(shí)間后, 彈框應(yīng)該在頁(yè)面中呈居中顯示, 使用下面一段代碼可以實(shí)現(xiàn)居中效果:

復(fù)制代碼代碼如下:

 
function makeCenter() 
{ 
$('#choose-box-wrapper').css("display","block"); 
$('#choose-box-wrapper').css("position","absolute"); 
$('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px"); 
$('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px"); 
} 

2.2 加載省份列表和學(xué)校列表
在第一次跳出彈框時(shí), 默認(rèn)為列表中的第一個(gè)省份. 加載完這個(gè)省份所有的名單后, 給每一項(xiàng)都需要綁定一個(gè)click函數(shù), 用戶在發(fā)生單擊后, 更新用戶選擇省份下的大學(xué)列表.
更新完該省的大學(xué)列表后, 同樣要給每一項(xiàng)都綁定一個(gè)click函數(shù), 用戶在選擇該大學(xué)后可以執(zhí)行相應(yīng)的操作. (比如給某個(gè)文本框填值, 頁(yè)面重定向etc.)

復(fù)制代碼代碼如下:

 
function initProvince() 
{ 
//原先的省份列表清空 
$('#choose-a-province').html(''); 
for(i=0;i<schoolList.length;i++) 
{ 
$('#choose-a-province').append('<a class="province-item" province-id="'+schoolList[i].id+'">'+schoolList[i].name+'</a>'); 
} 
//添加省份列表項(xiàng)的click事件 
$('.province-item').bind('click', function(){ 
var item=$(this); 
var province = item.attr('province-id'); 
var choosenItem = item.parent().find('.choosen'); 
if(choosenItem) 
$(choosenItem).removeClass('choosen'); 
item.addClass('choosen'); 
//更新大學(xué)列表 
initSchool(province); 
} 
); 
} 
function initSchool(provinceID) 
{ 
//原先的學(xué)校列表清空 
$('#choose-a-school').html(''); 
var schools = schoolList[provinceID-1].school; 
for(i=0;i<schools.length;i++) 
{ 
$('#choose-a-school').append('<a class="school-item" school-id="'+schools[i].id+'">'+schools[i].name+'</a>'); 
} 
//添加大學(xué)列表項(xiàng)的click事件 
$('.school-item').bind('click', function(){ 
var item=$(this); 
var school = item.attr('school-id'); 
//更新選擇大學(xué)文本框中的值 
$('#school-name').val(item.text()); 
//關(guān)閉彈窗 
hide(); 
} 
); 
} 

2.3 彈出及隱藏窗口
在本例中, 用戶點(diǎn)擊一個(gè)要求輸入學(xué)校的文本框, 頁(yè)面跳出彈框. 彈框中含有關(guān)閉按鈕, 可以關(guān)閉彈框.

復(fù)制代碼代碼如下:

 
//彈出窗口 
function pop(){ 
//將窗口居中 
makeCenter(); 
//初始化省份列表 
initProvince(); 
//默認(rèn)情況下, 給第一個(gè)省份添加choosen樣式 
$('[province-id="1"]').addClass('choosen'); 
//初始化大學(xué)列表 
initSchool(1); 
} 
//隱藏窗口 
function hide() 
{ 
$('#choose-box-wrapper').css("display","none"); 
} 