Heim  >  Artikel  >  Web-Frontend  >  基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)_jquery

基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)_jquery

WBOY
WBOYOriginal
2016-05-16 17:51:321142Durchsuche

1. 数据
一共包含了全国3049所大学, 从人人网拷贝的 (仅供学习交流, 请勿用于商业项目), 这是一个脚本文件, 里含的JSON对象存储了学校的信息, 格式为:

复制代码 代码如下:

var schoolList=[
{
"id":1, //省份id
"school": [
{
"id": 1001, //学校id
"name": "\u6e05\u534e\u5927\u5b66" //学校名称
}
/....
], //这个省的学校
"name": "\u5317\u4eac"
},
//...
];

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. DEMO及下载
http://demo.jb51.net/js/2012/jquery_school/
下载:jquery_school.rar
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn