怎么用javascript制作一个选择大学的弹框

这篇文章主要介绍“怎么用javascript制作一个选择大学的弹框”,在日常操作中,相信很多人在怎么用javascript制作一个选择大学的弹框问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用javascript制作一个选择大学的弹框”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联从2013年开始,先为峡江等服务建站,峡江等地企业,进行企业商务咨询服务。为峡江企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

1. 数据

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

数据地址:http://files.cnblogs.com/technology/school.js. 这是一个脚本文件, 里含的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'+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'+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");   }

到此,关于“怎么用javascript制作一个选择大学的弹框”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站标题:怎么用javascript制作一个选择大学的弹框
新闻来源:http://pwwzsj.com/article/gihjjc.html

其他资讯