jquery 팝업 레이어 등록 페이지 등 (asp.net background)_jquery

[1] 요구사항은 다음과 같습니다.
1: 등록해도 새 페이지가 열리지 않고 팝업 레이어로 변경됩니다.
2: 신규 사용자 설문조사' 집을 사고 싶은 경우
3: 사용자 이름 추천 사용자 이름이 자동으로 검색됩니다.
4: 생년월일 사용자 입력이 컨트롤 선택으로 변경됩니다.
5: 사용자 경험을 개선하고 사용자의 등록을 유도하기 위해 최선을 다하십시오.
【2】사진이 없으면 진실도 없습니다.

1: 단순화된 페이지:

2: 팝업 텍스트 프롬프트 및 둥근 테두리:

3: 지지 투표(비동기 제출)

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

5: 데이터 유효성 검증

6: 달력

7: 드래그 지원

8: 밀어서 표시

9：끝

[3] 코드 분석
1. 팝업 레이어 제작,
a. 먼저 다음 세 가지를 인용하세요.

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

b. 팝업을 구현하려면 $.prompt 메소드를 호출하세요.

2. 텍스트 팝업
a. 먼저 다음 두 가지를 인용하세요.

코드를 복사하세요. 코드는 다음과 같습니다.

;script src= "jquery.tooltip.min.js" type="text/javascript" 언어="javascript">

b. :
코드

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

$("# 제안2").tooltip({bodyHandler : function() {return "사용자 이름은 문자로 시작해야 합니다.";},showURL: false});
$("#cemail").tooltip({bodyHandler: function() {return "시나 게임즈 사용을 권장합니다" ;},showURL: false})
$("#Text1").tooltip({bodyHandler: function() {return "미성년자는 등록하지 마세요";} ,showURL: false});

3. 투표
a. 먼저 다음 두 가지를 인용하세요.

코드는 다음과 같습니다.

>


b. .rater('Handler1.ashx') 투표 구현

4. 추천 사용자 이름 자동 검색(자동 완성)
a. 먼저 다음 두 가지를 인용하세요

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

b. $("#suggest2").focus().autocomplete(cities)를 호출하여 자동 검색을 구현합니다(localdata.js의 로컬 테스트 데이터 사용)

5. >a. 먼저 이
를 인용한 후 다음 CSS를 작성하세요.

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

(commentForm은 양식의 ID입니다)

b. 확인 클래스와 일부를 구현하려면 이 $("#commentForm").validate()를 호출하세요. OK 형식의 속성 구성은 모든 검증이 완전 자동입니다.
예: 이메일

6. 캘린더
이런 말을 하기가 부끄럽습니다! JQuery 캘린더 플러그인을 사용하기 시작했는데 나중에 팝업 상자 상단에 배치할 수 없어서 다른 플러그인으로 전환했습니다.
a. 먼저 이 두 가지를 인용하세요

코드를 복사하세요 코드는 다음과 같습니다.

< script src="calendar2008.js" type="text/javascript" 언어="javascript">

b. 그리고 다음 코드를 작성하세요

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

var c = new Calendar("c");

document.write(c)
//다음 두 가지는 위치 미세 조정에 사용
c .offsetTop =22;
c.offsetLeft = 25

html 코드:

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

보시다시피 it class="required dateISO"는 시간 형식을 자동으로 확인합니다
7. 드래그
a. 먼저 다음을 인용하세요.
b. 드래그를 구현하려면 다음을 작성하세요.

8. 다음을 표시합니다.
in은 확장 기능을 제공합니다:

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

$( document).ready(function() {

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



call$ .prompt("mes",{show:'dropIn'} 은 슬라이딩을 달성할 수 있습니다.

9. 둥근 테두리.
a. 먼저 이 를 인용하세요. b. ").corner("cc:#d1c7b7");
c. 참고: 네 모서리의 누락된 부분의 색상도 설정할 수 있으며 일반적으로 배경 색상과 일치합니다.

[4] 요약
일반적으로 명명된 플러그인의 CSS 및 스크립트 이름 지정은 매우 표준화되어 있어 충돌이 거의 발생하지 않습니다. CSS와 Js가 충돌하지 않는 한, 부담 없이, 무작위로 안심하고 사용할 수 있습니다.

[5] 도움말(해결됨)
원래는 JQuery 플러그인을 모두 사용하고 싶었으나 JQuery 캘린더 플러그인이 팝업 레이어 위로 떠오를 수 없어 다른 캘린더로 변경했습니다. 제어. 저는 너무 화가 나서 z-index를 10000000000000000으로 설정했습니다. 결과는 여러분이 상상할 수 있는 대로입니다. 여전히 떠오를 수 없습니다. CSS가 충돌하는 부분을 찾을 수 없습니다. 발견하면 알려주세요.




코드 복사

코드는 다음과 같습니다. table.jCalendar { border: 1px 단색

배경: #aaa;

테두리 간격: 2px;
해결책:
방법 1:
페이지에서 다음 스타일 정의 시작
.ui-datepicker {z-index:1200;}

대화 상자를 호출할 때 다음을 사용하세요. code
jQuery("#midialog").dialog({zIndex:900});


방법 2:

[code]
.datepicker ({
beforeShow: function (i, e) {
var z = jQuery(i).closest(".ui-dialog").css("z-index")
dpDiv.css; ('z-index', z);
}
})
코드 패키지 다운로드
저자: Zhang Lei(zhanglei의 블로그)