,,基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
基于jquery选了一个中国大学的弹匣，有需要的朋友可以参考一下。
1.数据共包含中国3049所大学，复制自Renren.com(仅供学习交流，请勿用于商业项目)。这是一个脚本文件，其中包含的JSON对象存储了大学的信息。格式为：复制代码code如下：var schoolList=[ {'id':1，//省id '学校':[{'id': 1001，//学校id '名称':' \ u6e 05 \ U534E \ u 5927 \ u5b 66 '//学校名称}/.]，//本省学校'名称':' \ 2。Step 2.1项目符号框架的结构和弹出方式目前项目符号框架分为iframe和div两种形式。在这个例子中，我选择使用div作为项目符号框架。框的结构如下：复制代码如下：Div id=' choose-box-wrapper ' Div id=' choose-box ' Div id=' choose-box-title ' span Select School/span/Div Div id=' choose-a-province '/Div id=' choose-a-School '/Div Div id=' choose-box-bottom ' input type=' bottom ' onclick=' hide()' value=' close '/Div/Div/Div子弹框在初始状态下是隐藏的(显示：none)。为了用户体验，在用户触发打开子弹框的时间后，子弹框应该显示在页面中央。使用下面的代码可以实现中心效果：复制代码如下：function make center(){ $(' # choose-box-wrapper ')。CSS ('display '，' block') $('#choose-box-wrapper ')。css('位置'，'绝对')；$('#choose-box-wrapper ')。css('top '，Math.max(0，($(window))。height()-$(' # choose-box-wrapper ')。outerHeight())/2) $(窗口)。scroll top())' px ')；$('#choose-box-wrapper ')。css('left '，Math.max(0，($(window))。width() - $('#choose-box-wrapper ')。outerWidth())/2) $(窗口)。scroll left())' px ')；} 2.2加载省份和学校列表第一次弹出框时默认为列表中的第一个省份。这个省的列表全部加载后，每一项都需要绑定一个点击函数，用户点击后，就会更新用户选择的省内高校列表。更新本省高校列表后，每一项还会绑定一个点击功能。用户选择大学后可以进行相应的操作。(例如，填写文本框、重定向页面等。)复制代码如下：函数initProvince() {//清空原省份列表$('#choose-a-province ')。html(“”)；for(I=0；ischoolList.lengthi ) { $('#choose-a-province ')。append(' a class=' province-item ' province-id=' ' school list[I].id ''' schoolList[i]。名称'/a ')；}//添加点击事件$('。省-项目)。bind ('click '，function(){ var item=$(this)；var省=item.attr('省-id ')；var choosenItem=item.parent()。查找('。choosen’)；if(choosenItem) $(choosenItem)。remove class(' chosen ')；item . addclass(' choosen ')；//更新initSchool(省)的大学列表；} );}函数init school(provideid){//清空原来的学校列表$('#choose-a-school ')。html(“”)；var schools=school list[province id-1]。学校；for(I=0；ischools.lengthi ) { $('#choose-a-school ')。append(' a class=' school-item ' school-id=' ' schools[I].id ' ' '学校[i]。名称'/a ')；}//添加点击事件$('。学校项目)。bind ('click '，function(){ var item=$(this)；var school=item . attr(' school-id ')；//更新值$ ('# school-name ')。选择大学文本框中的val(item . text())；//关闭弹出窗口hide()；} );} 2.3弹出和隐藏窗口本例中，用户点击一个需要学校输入的文本框，页面从弹出框中弹出。弹出框包含关闭按钮，可以关闭弹出框。复制代码如下：//弹出窗口函数pop(){ //居中窗口make Center()；//初始化省份列表init province()；//默认情况下，添加选择的样式$ ('[province-id=' 1']')。将class(' chosen ')添加到第一个省；//初始化initSchool(1)中的大学列表；}//隐藏窗口function Hide(){ $(' # choose-box-wrapper ')。CSS('显示'，'无')；} 3.演示下载http://demo.jb51.net/js/2012/jquery_school/下载：jquery_school.rar
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。