jquery 도구 시리즈 오버레이 learning_jquery
- PHP中文网원래의
- 2016-05-16 18:47:041264검색
지난번 스크롤 가능에 대한 연구에 이어 오늘은 jquery 도구의 6가지 주요 기능 중 네 번째 기능인 오버레이에 대한 연구를 계속합니다.
스크롤 가능한 학습의 경우 먼저 작업의 html 대상 코드를 제공합니다.
여기 있습니다 오버레이
$$$$$$$$$
& lt;/p & gt;
& lt; P & GT;
Class Aptent Taciti Sociosqu Ad Litora Torquent Per Conubia Nostra,
Per Inceptos Himenaeos,
ImperDiet A, Posuere nec, ante. Quisque mattis Massa id metus. style="margin:10px 0" >여기에 또 다른 오버레이가 있습니다
Class aptent taciti socialsqu ad litora talknt per conubia nostra,
per inceptos Himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante.
>close
이 기능은 jqueryObject.overlay를 통해 구현됩니다. () 메서드, 여기서 오버레이 메서드는 다음 두 가지 메서드를 제공합니다.
1. $("button[rel]").overlay()//이 메서드는 기본 메서드를 사용하여 프롬프트 오버레이를 표시할 수 있습니다.
2 . $("button[rel]" ).overlay({config object}) //이 메서드는 구성 개체를 통해 오버레이 표시를 사용자 정의합니다. 다음 코드는 두 번째 메소드의 구성 매개변수 구현입니다(jquery의 Ready 메소드에 구현을 넣기만 하면 됩니다).
코드 복사
코드는 다음과 같습니다. :
$("#overlay").overlay({api:true}).load();//오버레이 자동 표시(트리거할 필요 없음, 페이지가 로드되면 자동으로 트리거됨)
$ ("button[rel]").overlay({
시작:{
너비: 300,
절대: false
},
끝:{
상단 :10,
왼쪽:400,
절대:false
},
속도:3000,
fadeInSpeed:3000,
closeOn 클릭: false,
oneInstance:false,
닫기: '#overlayClose',//닫기 버튼 사용자 지정
~ 기능 구성 항목 모드 설정
:function(){
//alert(this .getTr igger().attr("rel ") ":onBeforeLoad");//오버레이 프롬프트 상자의 트리거 rel 속성 값 표시 (this.getTrigger().attr("rel") ":onLoad");
},
onBeforeClose: function(){
Alert(this.getTrigger().attr("rel") ":onBeforeClose");
return false ;
>
속성
또한 툴팁은 오버레이 객체를 얻기 위한 일련의 방법을 제공합니다. 구체적인 사용 방법은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
var overlayObj=$("#overlay").overlay({api:true});
overlayObj.load();//자동으로 오버레이를 표시합니다. (트리거할 필요가 없습니다. 페이지에 로드됩니다. 완료되면 자동으로 트리거됩니다.)
setTimeout(function(){overlayObj.close();},2000);//2초 후 자동으로 로드됩니다(나타남). 프롬프트 상자가 숨겨집니다
$("#overlayInfo") .append("
overlay is open:" overlayObj.isOpened() "
");//오버레이가 있는지 확인 이때 표시되는 메시지 상자> ;
$("#overlayInfo").append("
overlay content:" overlayObj.getContent().html() "
"); OnbeforeLoad = Function () {경고 (this.getContent ().Atr ("ID");
}
다음은 Overlay 객체 설명에 대한 설명입니다.
| 기본값 | 설명 | |
| load() | 오버레이 | 오버레이 프롬프트 상자를 여는 또 다른 방법입니다. 이 방법으로는 다음을 수행할 수 없습니다. pass 페이지 이벤트가 발생하고 js 스크립트를 통해 오버레이 프롬프트 상자가 직접 열립니다. |
| close() | 오버레이 | (js 스크립트에서 이 메소드 호출을 통해) 팝업 오버레이 프롬프트 상자를 닫습니다. |
| isOpened() | 부울 | 현재 오버레이 프롬프트 상자가 열려 있는지 확인합니다. 현재 오버레이 프롬프트 상자가 열려 있으면 true를 반환합니다. |
| getBackgroundImage() | jQuery | 현재 오버레이 프롬프트 상자의 배경 이미지를 jquery 객체로 반환합니다. |
| getContent() | jQuery | 오버레이 팝업 상자의 콘텐츠를 jquery 객체로 반환합니다. |
| getTrigger() | jQuery | 오버레이 팝업 상자를 실행하는 요소는 jquery 개체로 반환됩니다. |
| getConf() | 객체 | 팝업박스가 초기화되면 overlay의 구성 객체를 가져옵니다. |
| api | 거짓 | 구성 객체의 api와 동일합니다. |
| onBeforeLoad(fn) | API | 구성 파일의 onBeforeLoad 속성과 동일합니다. |
| onLoad(fn) | API | 동일한 구성 파일 onLoad 속성에서. |
| onBeforeClose(fn) | API | 동일한 구성 파일 onBeforeClose 속성에서. |
| onClose(fn) | API | 동일한 구성 파일 onClose 속성에서. |
마지막으로 전체 샘플 코드가 제공됩니다.
코드 복사 코드는 다음과 같습니다.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">
여기 내 오버레이가 있습니다
$$$$$$$$$$
Class aptent taciti socialsqu ad litora talknt per conubia nostra,
per inceptos Himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis Massa id metus.
여기 또 다른 오버레이가 있습니다
Class aptent taciti socialsqu ad litora talknt per conubia nostra,
per inceptos Himenaeos. Donec lorem ligula, elementum vitae,
imperdiet a, posuere nec, ante. Quisque mattis Massa id metus.