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


Posted in Javascript onJuly 26, 2012

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作为弹框, 弹框的结构如下:
<div id="choose-box-wrapper"> 
<div id="choose-box"> 
<div id="choose-box-title"> 
<span>选择学校</span> 
</div> 
<div id="choose-a-province"> 
</div> 
<div id="choose-a-school"> 
</div> 
<div id="choose-box-bottom"> 
<input type="botton" onclick="hide()" value="关闭" /> 
</div> 
</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<schoolList.length;i++) 
{ 
$('#choose-a-province').append('<a class="province-item" province-id="'+schoolList[i].id+'">'+schoolList[i].name+'</a>'); 
} 
//添加省份列表项的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<schools.length;i++) 
{ 
$('#choose-a-school').append('<a class="school-item" school-id="'+schools[i].id+'">'+schools[i].name+'</a>'); 
} 
//添加大学列表项的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.3water.com/js/2012/jquery_school/
下载:jquery_school.rar
Javascript 相关文章推荐
一个JQuery操作Table的代码分享
Mar 30 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 #Javascript
浅谈javascript的原型继承
Jul 25 #Javascript
基于jquery的多功能软键盘插件
Jul 25 #Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 #Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 #Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 #Javascript
原生js 秒表实现代码
Jul 24 #Javascript
You might like
用PHP实现的随机广告显示代码
2007/06/14 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php实现购物车功能(下)
2016/01/05 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
JavaScript中的私有成员
2006/09/18 Javascript
JavaScript表单常用验证集合
2008/01/16 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python输出带颜色的字符串实例
2017/10/10 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
物理教师自荐信范文
2013/12/28 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
生日答谢词
2015/01/05 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫