基于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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
基于JavaScript实现表格隔行换色
May 08 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
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
工程业务员工作职责
2013/12/07 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
学生会个人总结范文
2015/02/15 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
小学生读书笔记
2015/07/01 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
Python 语言实现六大查找算法
2021/06/30 Python
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android