基於jquery實現的一個選擇中國大學的彈框 (資料、步驟、代碼)_jquery

1. 資料
總共包含了全國3049所大學, 從人人網拷貝的(僅供學習交流, 請勿用於商業項目), 這是一個腳本文件, 裡含的JSON對象存儲了學校的信息, 格式為:

複製程式碼 程式碼如下:

var schoolList=[>
"id":1, //省份id
"school": [
{
"id": 1001, //學校id
"name": "u6e05u534eu5927u5b66" //學校名稱
}
/....
], //這個省的學校
"name": "u5317u4eac"
},
//...
];

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

複製程式碼 程式碼如下:

程式碼如下:

選擇學校

彈框初始狀態下為隱藏狀態(display:none), 為了使用者體驗, 在使用者觸發開啟彈框時間後, 彈框應該在頁面中呈現居中顯示, 使用下面一段程式碼可以實現居中效果: 複製程式碼

程式碼如下:



程式碼如下:


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 加載省份列表和學校列表在第一次跳出彈框時, 默認為列表中的第一個省份. 加載完這個省份所有的名單後, 給每一項都需要綁定一個click函數, 用戶在發生單擊後, 更新用戶選擇省份下的大學列表. 更新完該省的大學列表後, 同樣要給每一項都綁定一個click函數, 用戶在選擇該大學後可以執行相應的操作. (比如給某個文本框填值, 頁面重定向etc.)

複製程式碼


程式碼如下:


function initProvince()
{
//原先的省份列表$
清空('>清空(' choose-a-province').html('');
for(i=0;i{
$('#choose-a-province'). append('' schoolList[i].name '');
}
/ /新增省份列表項目的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');
//更新大學列表
initSchool(province);
}
);
}
function initSchool(provinceID)
{
//原先的學校清單清空
$('#choose-a-school').html('');
var schools = schoolList[provinceID-1].school;
for(i=0;i{
$('#choose-a-school').append('' schools[i].name '');
}
//新增大學列表項目的click事件
$(' .school-item').bind('click', function(){
var item=$(this);
var school = item.attr('school-id');
//更新選擇大學文字方塊中的值

$('#school-name').val(item.text());
//關閉彈跳窗
hide();
}

); } 2.3 彈出及隱藏視窗在本例中, 使用者點選一個要求輸入學校的文字方塊, 頁面跳出彈框. 彈框中含有關閉按鈕, 可以關閉彈框.

複製程式碼 程式碼如下:

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

}

3. DEMO及下載
http://demo.jb51.net/js/2012/jquery_school/下載：jquery_school.rar