怎么用javascript制作一個選擇大學(xué)的彈框
這篇文章主要介紹“怎么用javascript制作一個選擇大學(xué)的彈框”，在日常操作中，相信很多人在怎么用javascript制作一個選擇大學(xué)的彈框問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用javascript制作一個選擇大學(xué)的彈框”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
成都創(chuàng)新互聯(lián)從2013年開始，先為峽江等服務(wù)建站，峽江等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為峽江企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
1. 數(shù)據(jù)
一共包含了全國3049所大學(xué), 從人人網(wǎng)拷貝的 (僅供學(xué)習(xí)交流, 請勿用于商業(yè)項目)。
數(shù)據(jù)地址:http://files.cnblogs.com/technology/school.js. 這是一個腳本文件, 里含的JSON對象存儲了學(xué)校的信息, 格式為:
var schoolList=[ { "id":1, //省份id "school": [ { "id": 1001, //學(xué)校id "name": "\u6e05\u534e\u5927\u5b66" //學(xué)校名稱 } /.... ], //這個省的學(xué)校 "name": "\u5317\u4eac" }, //... ];2. 步驟
2.1 彈框的構(gòu)造及彈出方式
目前彈框分為iframe和div兩種形式, 在本例中我選擇使用div作為彈框, 彈框的結(jié)構(gòu)如下:
<div id="choose-box-wrapper"> <div id="choose-box"> <div id="choose-box-title"> <span>選擇學(xué)校</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="關(guān)閉" /> </div> </div> </div>
彈框初始狀態(tài)下為隱藏狀態(tài)(display:none), 為了用戶體驗, 在用戶觸發(fā)打開彈框時間后, 彈框應(yīng)該在頁面中呈居中顯示, 使用下面一段代碼可以實現(xiàn)居中效果:
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 加載省份列表和學(xué)校列表
在***次跳出彈框時, 默認為列表中的***個省份. 加載完這個省份所有的名單后, 給每一項都需要綁定一個click函數(shù), 用戶在發(fā)生單擊后, 更新用戶選擇省份下的大學(xué)列表.
更新完該省的大學(xué)列表后, 同樣要給每一項都綁定一個click函數(shù), 用戶在選擇該大學(xué)后可以執(zhí)行相應(yīng)的操作. (比如給某個文本框填值, 頁面重定向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'); //更新大學(xué)列表 initSchool(province); } ); } function initSchool(provinceID) { //原先的學(xué)校列表清空 $('#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>'); } //添加大學(xué)列表項的click事件 $('.school-item').bind('click', function(){ var item=$(this); var school = item.attr('school-id'); //更新選擇大學(xué)文本框中的值 $('#school-name').val(item.text()); //關(guān)閉彈窗 hide(); } ); }2.3 彈出及隱藏窗口
在本例中, 用戶點擊一個要求輸入學(xué)校的文本框, 頁面跳出彈框. 彈框中含有關(guān)閉按鈕, 可以關(guān)閉彈框.
//彈出窗口 function pop(){ //將窗口居中 makeCenter(); //初始化省份列表 initProvince(); //默認情況下, 給***個省份添加choosen樣式 $('[province-id="1"]').addClass('choosen'); //初始化大學(xué)列表 initSchool(1); } //隱藏窗口 function hide() { $('#choose-box-wrapper').css("display","none"); }到此，關(guān)于“怎么用javascript制作一個選擇大學(xué)的彈框”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
新聞名稱：怎么用javascript制作一個選擇大學(xué)的彈框
網(wǎng)站網(wǎng)址：http://bm7419.com/article22/gihjjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、微信小程序、網(wǎng)站內(nèi)鏈、定制開發(fā)、云服務(wù)器、網(wǎng)站營銷
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
