中國(guó)大學(xué)的彈框

申請(qǐng)免費(fèi)試用、咨詢(xún)電話(huà)：400-8352-114

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

　　總共包含了全國(guó)3049所大學(xué), 從人人網(wǎng)復(fù)制的 (僅供學(xué)習(xí)溝通, 請(qǐng)勿用于商業(yè)項(xiàng)目)。

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

　　var schoolList=[

　　{

　　"id":1, //省份id

　　"school": [

　　{

　　"id": 1001, //校園id

　　"name": "u6e05u534eu5927u5b66" //校園名稱(chēng)

　　}

　　/....

　　], //這個(gè)省的校園

　　"name": "u5317u4eac"

　　},

　　//...

　　];

　　2. 步調(diào)

　　2.1 彈框的布局及彈出方法

　　當(dāng)前彈框分為iframe和div兩種方式, 在本例中我挑選運(yùn)用div作為彈框, 彈框的布局如下:

　　彈框初始狀況下為躲藏狀況(display:none), 為了用戶(hù)體會(huì), 在用戶(hù)觸發(fā)翻開(kāi)彈框工夫后, 彈框應(yīng)該在頁(yè)面中呈居中顯現(xiàn), 運(yù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 加載省份列表和校園列表

　　在第一次跳出彈框時(shí), 默以為列表中的第一個(gè)省份. 加載完這個(gè)省份所有的名單后, 給每一項(xiàng)都需求綁定一個(gè)click函數(shù), 用戶(hù)在發(fā)作單擊后, 更新用戶(hù)挑選省份下的大學(xué)列表.

　　更新完該省的大學(xué)列表后, 相同要給每一項(xiàng)都綁定一個(gè)click函數(shù), 用戶(hù)在挑選該大學(xué)后可以履行相應(yīng)的操作. (比方給某個(gè)文本框填值, 頁(yè)面重定向etc.)

function initProvince()  
{  
    //原先的省份列表清空  
    $('#choose-a-province').html('');  
    for(i=0;i     {  
        $('#choose-a-province').append(''+schoolList[i].name+'');  
    }  
    //增加省份列表項(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)  
{  
    //原先的校園列表清空  
    $('#choose-a-school').html('');  
    var schools = schoolList[provinceID-1].school;  
    for(i=0;i     {  
        $('#choose-a-school').append(''+schools[i].name+'');  
    }  
    //增加大學(xué)列表項(xiàng)的click事情  
    $('.school-item').bind('click', function(){  
            var item=$(this);  
            var school = item.attr('school-id');  
            //更新挑選大學(xué)文本框中的值  
            $('#school-name').val(item.text());  
            //封閉彈窗  
            hide();  
        }  
    );  
}

　　2.3 彈出及躲藏窗口

　　在本例中, 用戶(hù)點(diǎn)擊一個(gè)懇求輸入校園的文本框, 頁(yè)面跳出彈框. 彈框中含有封閉按鈕, 可以封閉彈框.

　　//彈出窗口

　　function pop(){

　　//將窗口居中

　　makeCenter();

　　//初始化省份列表

　　initProvince();

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

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

　　//初始化大學(xué)列表

　　initSchool(1);

　　}

　　//躲藏窗口

　　function hide()

　　{

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

　　}

3. 下載