jquery 팝 업 층 등록 페이지 등(asp.net 배경)

【1】수 요 는 다음 과 같 습 니 다.1:새로 페이지 를 열지 않 고 팝 업 층 으로 바 꿉 니 다.2:신규 사용자 의 주택 구입 욕구 조사,3:사용자 이름 은 추천 하 는 사용자 이름 을 자동 으로 검색 합 니 다.4:생년월일 사용자 입력 은 컨트롤 선택 으로 바 꿉 니 다.5:사용자 체험 을 향상 시 키 고 사용자 의 등록 을 유도 합 니 다.【2]진실 을 추구 하지 않 는 다.
1:간소 화 된 페이지:

2:텍스트 알림 과 원 각 테두리 띄 우기:


3:여론 조사 지지(비동기 제출)

4:추천 사용자 이름 자동 검색(테스트 데이터)

5:데이터 유효성 검증

6:달력


7:드래그 지원

8:화면 에 미 끄 러 짐

9：over

【3】코드 분석 1.팝 업 층 의 제작,a.먼저 이 세 가 지 를 참조:

 
<script src="jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script> 
<script src="jquery-impromptu.3.1.min.js" type="text/javascript" language="javascript"></script> 
<link rel="stylesheet" media="all" type="text/css" href="examples.css" /> 

b.이 방법$.prompt 를 호출 하여 팝 업 을 실현 합 니 다.2.띄 우기 문자 a.먼저 이 두 개 를 인용 합 니 다:

 
<link rel="stylesheet" media="all" type="text/css" href="jquery.tooltip.css" /> 
<script src="jquery.tooltip.min.js" type="text/javascript" language="javascript"></script> 

b.아래 코드 를 호출 하여 띄 우기:코드

 
$("#suggest2").tooltip({bodyHandler: function() {return "          ";},showURL: false}); 
$("#cemail").tooltip({bodyHandler: function() {return "        ";},showURL: false}); 
$("#Text1").tooltip({bodyHandler: function() {return "         ";},showURL: false}); 

3.투표 a.먼저 아래 두 개 를 참조 합 니 다:

 
<script type="text/javascript" src="jquery.rater.js"></script> 
<link rel="stylesheet" type="text/css" href="rater.css" media="screen" /> 

b.$('#demo 2').rater('Handler 1.ashx')를 호출 하여 투 표를 실현 합 니 다.추천 사용자 이름 자동 검색(자동 완성)a.아래 두 개

 
<script src="jquery.autocomplete.min.js" type="text/javascript" language="javascript"></script> 
<link rel="stylesheet" media="all" type="text/css" href="jquery.autocomplete.css" /> 
<script src="localdata.js" type="text/javascript" language="javascript"></script> 

b 를 참조 하여$('\#suggest 2').focus().autocomplete(cit).ies);자동 검색 을 실현 합 니 다.(localdata.js 에 있 는 로 컬 테스트 데이터 사용)5.데이터 검증 a.이을 참조 하고 다음 과 같은 CSS:

 
<style type="text/css"> 
#commentForm { width: 500px; } 
#commentForm label { width: 500px; } 
#commentForm label.error, #commentForm input.submit { margin-left: 0px;color: red; } 
</style> 

(commentForm 을 form 으로 하 는 ID)b.이$("\#commentForm")를 호출 합 니 다.vaidate()를 사용 하여 검증 합 니 다.form 에 있 는 class 와 일부 속성 이 설정 되 어 있 습 니 다.모든 인증 은 자동 입 니 다.예 를 들 어 메 일6.달력 이 부 끄 럽 습 니 다!처음 사용 한 JQuery 달력 플러그 인 은 나중에 탄 상자 위 에 놓 을 수 없 기 때문에 다른 것 으로 바 꾸 었 습 니 다.a.먼저 이 두 개의

 
<script src="calendar2008.js" type="text/javascript" language="javascript"></script> 
<link rel="stylesheet" media="all" type="text/css" href="rightbar.css" /> 

b 를 인용 한 다음 에 다음 코드

 
var c = new Calendar("c"); 
document.write(c); 
//           
c.offsetTop =22; 
c.offsetLeft = 25; 

html 코드 를 쓰 십시오.

 
<input class="required dateISO" name="begintime" type="text" id="Text1" size="21" onfocus="c.showMoreDay = false;c.show(this);" value=""/> 

은 그의 class="required dateISO"자동 검증 시간 형식 7.드래그 a.먼저 이것 을 참조 하 십시오.b.이$("xxx").draggable()을 쓰 십시오.드래그 8.슬라이드 디 스 플레이 구현:플러그 인 은 확장 을 제공 합 니 다:

 
$(document).ready(function() { 
$.fn.extend({ 
dropIn: function(speed, callback){ 
var $t = $(this); 
if($t.css("display") == "none"){ 
eltop = $t.css('top'); 
elouterHeight = $t.outerHeight(true); 
$t.css({ top: -elouterHeight, display: 'block' }) 
.animate({ top: eltop },speed,'swing', callback); 
} 
} 
}); 
}); 

호출$.prompt("mes",{show:dropin"}을 사용 하면 슬라이드 를 실현 할 수 있 습 니 다.9.원 각 테두리.a.이b.호출$.("xxx").corner("cc:\#d1c7b 7");c.주의사항:네 개의 뿔 이 부족 한 곳 의 색상 도 설정 할 수 있 고 보통 배경 색 과 일치 합 니 다.[4]일반적인 이름 플러그 인의 CSS 와 스 크 립 트 이름 을 정리 하 는 것 이 규범 적 이기 때문에 충돌 하기 어렵다.CSS 와 Js 가 충돌 하지 않 는 한 안심 하고 사용 할 수 있 고 마음대로 사용 할 수 있 으 며 함부로 사용 할 수 있 습 니 다.[5]도움말(해 결 됨)일색 의 JQuery 플러그 인 을 찾 으 려 고 했 는데 JQuery 달력 플러그 인 이 팝 업 층 위로 떠 오 르 지 않 아 다른 달력 컨트롤 을 바 꾸 었 습 니 다.화가 나 서 나 는 z-index 를 100000000000000000 으로 설 정 했 는데 결 과 는 짐작 할 수 있다.-여전히 떠 오 르 지 않 는 다.CSS 충돌 이 있 는 곳 을 찾 을 수 없습니다.발견 한 사람 이 있 으 면 알려 주세요.

 
table.jCalendar { 
border: 1px solid #000; 
background: #aaa; 
border-collapse: separate; 
border-spacing: 2px; 
z-index: 100000000000000000000000000000000; 
position:absolute; 
} 

해결 방법:방법 1:페이지 에서 아래 스타일 을 정의 하기 시작 합 니 다.ui-datepicker{z-index:1200;}dialog 를 호출 할 때 아래 코드 jQuery("\#midialog").dialog({zIndex:900})를 사용 합 니 다.방법 2:[code].datepicker({beforeshow:function(i,e){var z=jQuery(i).closest(".ui-dialog").css("z-index")+4;e.dpDiv.css('z-index', z); } }) 코드 패키지 다운로드 저자:장 레이(zhanglei's Blog)