집 >웹 프론트엔드 >JS 튜토리얼 >jquery를 기반으로 중국 대학을 선택하는 팝업 상자(데이터, 단계, 코드)_jquery

jquery를 기반으로 중국 대학을 선택하는 팝업 상자(데이터, 단계, 코드)_jquery

WBOY원래의: 2016-05-16 17:51:321152검색

1.
데이터는 전국 총 3049개 대학을 포함하고 있습니다. Renren에서 복사한 것입니다. (학습 및 교환용으로만 사용하십시오. 상업적인 프로젝트에는 사용하지 마십시오.) 에 포함된 JSON 개체입니다. 학교 정보를 저장합니다. 형식은

코드 복사 코드는 다음과 같습니다.

 
var schoolList=[ 
{ 
"id":1, //지방 ID 
"school": [ 
{ 
"id": 1001, //학교 ID 
"name": "u6e05u534eu5927u5b66" // 학교 이름 
} 
/.... 
], //이 지역의 학교 
"name": "u5317u4eac" 
}, 
//... 
] 

2. 단계
2.1 팝업 프레임의 구조 및 팝업 방식
현재 팝업 프레임은 iframe과 div의 두 가지 형태로 나뉩니다. 이 예에서는 팝업 프레임으로 div를 사용하기로 선택했으며 팝업 프레임의 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

="choose-box">

학교 선택

;div id="choose-a-province">

;div id="choose-box-bottom">

사용자 경험을 위해 팝업 상자는 처음에는 숨겨집니다(display:none). 팝업 상자를 열면 팝업 상자가 페이지 중앙에 표시되어야 합니다. 중앙 정렬 효과를 얻으려면 다음 코드를 사용하세요.

복사 code

코드는 다음과 같습니다. function makeCenter() { $('#choose-box-wrapper').css( "표시","차단");

$('#choose-box-wrapper').css("위치","절대")

$('#choose-box-wrapper'); css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) $(window).scrollTop() ) "px"); 
$('#choose-box-wrapper').css("왼쪽", Math.max(0, (($(window).width() - $('#choose- box-wrapper').outerWidth()) / 2) $(window).scrollLeft()) "px"); 
} 

 
2.2 지방 목록 및 학교 목록 로드
 팝업 상자가 처음 팝업되면 목록의 첫 번째 지역이 기본값으로 설정됩니다. 이 지역의 모든 목록을 로드한 후 사용자가 클릭한 후 사용자의 항목에 클릭 기능을 연결해야 합니다. 
도내 대학 목록을 업데이트한 후 각 항목에 클릭 기능도 결합해야 합니다(예: 텍스트 상자에 값 입력, 페이지 리디렉션 등) 

코드 복사

코드는 다음과 같습니다. function initProvince( ) { //원래 주 목록 지우기

$('#choose-a-province').html('') for(i =0;i{
$('#choose-a-province').append('');
}
//도 목록 항목 클릭 이벤트 추가
$('. 지방 항목').bind('클릭 ', function(){
var item=$(this);
var 지방 = item.attr('province-id');
var choosenItem = item.parent().find('.choosen');
if(choosenItem)
$(choosenItem).removeClass('choosen')
item.addClass('choosen'); >//대학 목록 업데이트
initSchool(주)
}
)
}
function initSchool(provinceID)
{
//원래 학교 목록 지우기
$('#choose-a- school').html('');
var Schools = schoolList[provinceID-1].school
for(i=0;i{
$ ('#choose-a-school').append(' 'schools[i].name'< /a>');
}
//대학 목록 항목 클릭 이벤트 추가
$('.school-item').bind(' click', function(){
var item =$(this);
var school = item.attr('school-id')
//선택 대학 텍스트 상자의 값 업데이트
$('#학교명').val (item.text());
//팝업창 닫기
hide()
}
); >}

2.3 팝업창과 숨김창
이 예에서는 사용자가 학교를 입력해야 하는 텍스트 상자를 클릭하면 팝업 상자가 팝업됩니다. 페이지에는 팝업 상자를 닫을 수 있는 닫기 버튼이 포함되어 있습니다.

코드를 복사하세요.

다음과 같습니다:

 
//팝업 창
function pop(){ 
//창 중앙 정렬
makeCenter() 
//지방 목록 초기화
initProvince() ; 
//기본적으로 첫 번째 지방에 선택한 스타일을 추가합니다
$('[province-id="1"]').addClass('choosen') 
//대학 초기화 list
initSchool(1) 
} 
//창 숨기기
function hide() 
{ 
$('#choose-box-wrapper').css("display "," 없음"); 
} 

3. 데모 및 다운로드
http://demo.jb51.net/js/2012/jquery_school/
다운로드: jquery_school.rar

성명：

jquery를 기반으로 중국 대학을 선택하는 팝업 상자(데이터, 단계, 코드)_jquery

관련 기사