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

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

WBOY
풀어 주다: 2016-05-16 17:51:32
원래의
1151명이 탐색했습니다.

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
관련 라벨:
원천:php.cn
이전 기사:시작부터 측면까지의 JavaScript for 루프(효율성 최적화, 이상한 사용법)_javascript 기술 다음 기사:JavaScript 디자인 패턴 캡슐화 및 정보 은닉(1부)_Javascript 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
관련 주제
더>
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿