基于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 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
关于微信小程序bug记录与解决方法
Aug 15 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
js实现随机点名器精简版
Jun 29 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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 危险函数全解析
2009/09/09 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
python tornado使用流生成图片的例子
2019/11/18 Python
基于Python实现扑克牌面试题
2019/12/11 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
值传递还是引用传递
2015/02/08 面试题
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
大学军训的体会
2014/11/08 职场文书
整脏治乱工作简报
2015/07/21 职场文书
《猴王出世》教学反思
2016/02/23 职场文书