中国大学的弹框

申请免费试用、咨询电话：400-8352-114

1. 数据

　　总共包含了全国3049所大学, 从人人网复制的 (仅供学习沟通, 请勿用于商业项目)。

　　数据地址:http://files.cnblogs.com/technology/school.js. 这是一个脚本文件, 里含的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();

　　//默许情况下, 给第一个省份增加choosen款式

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

　　//初始化大学列表

　　initSchool(1);

　　}

　　//躲藏窗口

　　function hide()

　　{

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

　　}

3. 下载