制作一个选择中国大学的弹框

开发 前端
弹框初始状态下为隐藏状态(display:none), 为了用户体验, 在用户触发打开弹框时间后, 弹框应该在页面中呈居中显示, 使用下面一段代码可以实现居中效果:

图1: 效果

1. 数据

一共包含了全国3049所大学, 从人人网拷贝的 (仅供学习交流, 请勿用于商业项目)。

数据地址:http://files.cnblogs.com/technology/school.js. 这是一个脚本文件, 里含的JSON对象存储了学校的信息, 格式为:

  1. var schoolList=[   
  2.     {   
  3.         "id":1, //省份id   
  4.         "school": [   
  5.             {   
  6.                 "id": 1001, //学校id   
  7.                 "name""\u6e05\u534e\u5927\u5b66" //学校名称   
  8.             }   
  9.             /....   
  10.             ], //这个省的学校   
  11.         "name""\u5317\u4eac" 
  12.     },   
  13.     //...   
  14. ]; 

2. 步骤

2.1 弹框的构造及弹出方式

目前弹框分为iframe和div两种形式, 在本例中我选择使用div作为弹框, 弹框的结构如下:

  1. <div id="choose-box-wrapper">   
  2.   <div id="choose-box">   
  3.     <div id="choose-box-title">   
  4.         <span>选择学校</span>   
  5.     </div>   
  6.     <div id="choose-a-province">   
  7.     </div>   
  8.     <div id="choose-a-school">   
  9.     </div>   
  10.     <div id="choose-box-bottom">   
  11.         <input type="botton" onclick="hide()" value="关闭" />   
  12.     </div>   
  13.   </div>   
  14. </div> 

弹框初始状态下为隐藏状态(display:none), 为了用户体验, 在用户触发打开弹框时间后, 弹框应该在页面中呈居中显示, 使用下面一段代码可以实现居中效果:

  1. function makeCenter()   
  2. {   
  3.     $('#choose-box-wrapper').css("display","block");   
  4.     $('#choose-box-wrapper').css("position","absolute");   
  5.     $('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px");   
  6.     $('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px");   

2.2 加载省份列表和学校列表

在***次跳出弹框时, 默认为列表中的***个省份. 加载完这个省份所有的名单后, 给每一项都需要绑定一个click函数, 用户在发生单击后, 更新用户选择省份下的大学列表.

更新完该省的大学列表后, 同样要给每一项都绑定一个click函数, 用户在选择该大学后可以执行相应的操作. (比如给某个文本框填值, 页面重定向etc.)

  1. function initProvince()   
  2. {   
  3.     //原先的省份列表清空   
  4.     $('#choose-a-province').html('');   
  5.     for(i=0;i<schoolList.length;i++)   
  6.     {   
  7.         $('#choose-a-province').append('<a class="province-item" province-id="'+schoolList[i].id+'">'+schoolList[i].name+'</a>');   
  8.     }   
  9.     //添加省份列表项的click事件   
  10.     $('.province-item').bind('click', function(){   
  11.             var item=$(this);   
  12.             var province = item.attr('province-id');   
  13.             var choosenItem = item.parent().find('.choosen');   
  14.             if(choosenItem)   
  15.                 $(choosenItem).removeClass('choosen');   
  16.             item.addClass('choosen');   
  17.             //更新大学列表   
  18.             initSchool(province);   
  19.         }   
  20.     );   
  21. }   
  22.     
  23. function initSchool(provinceID)   
  24. {   
  25.     //原先的学校列表清空   
  26.     $('#choose-a-school').html('');   
  27.     var schools = schoolList[provinceID-1].school;   
  28.     for(i=0;i<schools.length;i++)   
  29.     {   
  30.         $('#choose-a-school').append('<a class="school-item" school-id="'+schools[i].id+'">'+schools[i].name+'</a>');   
  31.     }   
  32.     //添加大学列表项的click事件   
  33.     $('.school-item').bind('click', function(){   
  34.             var item=$(this);   
  35.             var school = item.attr('school-id');   
  36.             //更新选择大学文本框中的值   
  37.             $('#school-name').val(item.text());   
  38.             //关闭弹窗   
  39.             hide();   
  40.         }   
  41.     );   

2.3 弹出及隐藏窗口

在本例中, 用户点击一个要求输入学校的文本框, 页面跳出弹框. 弹框中含有关闭按钮, 可以关闭弹框.

  1. //弹出窗口   
  2. function pop(){   
  3.     //将窗口居中   
  4.     makeCenter();   
  5.     
  6.     //初始化省份列表   
  7.     initProvince();   
  8.     
  9.     //默认情况下, 给***个省份添加choosen样式   
  10.     $('[province-id="1"]').addClass('choosen');   
  11.     
  12.     //初始化大学列表   
  13.     initSchool(1);   
  14. }   
  15. //隐藏窗口   
  16. function hide()   
  17. {   
  18.     $('#choose-box-wrapper').css("display","none");   

3. 下载

[[86488]]

原文链接:http://www.cnblogs.com/technology/archive/2012/07/25/2607560.html

责任编辑:张伟 来源: Create Chen的博客
相关推荐

2010-08-09 13:48:14

微软最佳雇主

2009-06-15 16:48:20

中国大学毕业生就业报告

2012-03-20 16:52:24

超算大赛超级计算机

2010-03-29 09:26:23

大学生创业李开复

2013-08-07 13:58:21

Android应用图标

2009-08-19 15:01:24

百度框计算

2017-01-05 13:38:56

华为ICT

2015-07-13 14:15:19

SDN

2012-08-23 10:03:48

2020-07-20 14:04:34

Excel下拉菜单数据

2023-12-05 07:19:43

CAP定理分布式

2012-03-23 16:00:59

超算大赛

2011-06-16 15:36:56

Qt Quick Symbian

2009-09-11 09:11:09

2012-03-16 17:07:07

超级计算机

2011-06-02 10:37:02

Android 对话框

2013-05-13 09:31:29

Web App开发WebApp

2009-09-15 09:23:35

初级linuxLinuxlinu操作系统x后门

2011-04-14 15:55:35

WPF.NET

2018-06-05 14:40:35

Linux树莓派绘图仪
点赞
收藏

51CTO技术栈公众号