中國大學的彈框

申請免費試用、咨詢電話：400-8352-114

1. 數(shù)據(jù)

　　總共包含了全國3049所大學, 從人人網(wǎng)復制的 (僅供學習溝通, 請勿用于商業(yè)項目)。

　　數(shù)據(jù)地址:http://files.cnblogs.com/technology/school.js. 這是一個腳本文件, 里含的JSON目標存儲了校園的信息, 格局為:

　　var schoolList=[

　　{

　　"id":1, //省份id

　　"school": [

　　{

　　"id": 1001, //校園id

　　"name": "u6e05u534eu5927u5b66" //校園名稱

　　}

　　/....

　　], //這個省的校園

　　"name": "u5317u4eac"

　　},

　　//...

　　];

　　2. 步調(diào)

　　2.1 彈框的布局及彈出方法

　　當前彈框分為iframe和div兩種方式, 在本例中我挑選運用div作為彈框, 彈框的布局如下:

　　彈框初始狀況下為躲藏狀況(display:none), 為了用戶體會, 在用戶觸發(fā)翻開彈框工夫后, 彈框應該在頁面中呈居中顯現(xiàn), 運用下面一段代碼可以完成居中作用:

　　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函數(shù), 用戶在發(fā)作單擊后, 更新用戶挑選省份下的大學列表.

　　更新完該省的大學列表后, 相同要給每一項都綁定一個click函數(shù), 用戶在挑選該大學后可以履行相應的操作. (比方給某個文本框填值, 頁面重定向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();

　　//默許情況下, 給第一個省份增加choosen款式

　　$('[province-id="1"]').addClass('choosen');

　　//初始化大學列表

　　initSchool(1);

　　}

　　//躲藏窗口

　　function hide()

　　{

　　$('#choose-box-wrapper').css("display","none");

　　}

3. 下載