jQuery 프롬프트 효과 코드 Sharing_jquery-JS 튜토리얼-php.cn

jQuery 프롬프트 효과 코드 Sharing_jquery

WBOY

풀어 주다： 2016-05-16 16:30:55

원래의

1466명이 탐색했습니다.

코드 1:

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

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

$(함수(){

               $(".tooltip").mouseenter(function(e){

This.mytitle=this.title

This.title=""

              var a="" this.mytitle "
"

                  $("body").append(a);

                   $("div").css({

"top": (e.pageY y) "px",

"왼쪽": (e.pageX x) "px"

                   }).show("빠름")

               }).mouseout(function(){

This.title=this.mytitle;

                   $("div").remove();

             });

})

학습 경험:

큰 편차가 발생하므로 p 태그 아래에 div 요소를 추가하지 마십시오!

것으로 밝혀졌습니다! 위의
인 경우 this와 $("this") 사이에는 차이가 있습니다. this.title을 $("this").attr("title")로 다시 작성하면 다음 mouseout 이벤트로 인해 저장된 제목에 액세스할 수 없게 됩니다

코드 2:

CSS 인용: jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css

js 인용: jqueryui/js/jquery-ui-1.8.18.custom.min.js

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

$( "#dialog:ui-dialog" ).dialog( "파괴" );

$( "#dialog-메시지" ).dialog({

키: 120,
          너비: 220,
        모달: true,
버튼: {
"아니요": function() {
                       //뭔가를 하세요
$ (이것) .dialog ("닫기")
            },
"예": function() {
                       //뭔가를 하세요
$( this ).dialog( "닫기" );
            }
}
});

코드 3:

자바스크립트 팝업 레이어 구성요소 easyDialog 사용

일정 기간 동안 easyDialog를 사용한 후, 사용 중에 발생한 몇 가지 문제를 요약했습니다. 최근에는 원래 코드를 재구성하고 최적화하는 데 시간을 투자했으며 몇 가지 새로운 기능을 추가했습니다. 원래 버전은 단순한 팝업 레이어의 기본 기능을 구현하는 것뿐이었지만, 프로젝트 관점에서 어떻게 하면 프로젝트를 빠르게 완성할 수 있는지에 대한 내용이었습니다. 팝업 레이어를 더 좋고 효율적으로 프로젝트에 적용할 수 있습니다.
easyDialog v2.0의 새로운 기능:

1. 기본 팝업 레이어 콘텐츠 템플릿을 추가했습니다. 단순한 애플리케이션인 경우 팝업 레이어 콘텐츠의 구조를 작성할 필요가 없으며 몇 가지 간단한 매개변수만 전달하면 됩니다. 원래 사용 방법:

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

easyDialog.open({

컨테이너 : 'demoBox'

});

기본 콘텐츠 템플릿을 사용하면 컨테이너 매개변수를 다음과 같이 사용할 수 있습니다.

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

easyDialog.open({

컨테이너 : {

헤더: '팝업 레이어 제목',

내용: 'easyDialog에 오신 것을 환영합니다 : )',

yesFn : btnFn,

NoFn: 참

}

});

표시되는 효과는 아래와 같습니다.

기본 콘텐츠 템플릿의 스타일을 수정하려면 다운로드한 문서에서 easydialog.css 파일을 수정하여 원하는 스타일을 얻을 수 있습니다.
2. 팝업 레이어에 더 나은 사용자 경험을 제공하기 위해 드래그 앤 드롭 효과를 추가했으며, 드래그 앤 드롭 효과를 쉽게 얻을 수 있도록 팝업 레이어의 콘텐츠를 사용자 정의할 수 있습니다.
3. 내부적으로 캐싱 시스템과 마이크로 이벤트 처리 시스템이 추가되었으며, 팝업 레이어 콘텐츠도 캐싱되어 팝업 레이어의 성능이 향상되었습니다.
또한, 원래의 isOverlay를 오버레이로 이름을 바꾸었고, 원본 팝업 레이어의 각 요소의 ID도 최대한 충돌을 피하기 위해 이름을 바꿨습니다.

위의 3가지 유형의 프롬프트 효과는 제가 주로 사용하는 것으로, 자신의 프로젝트 필요에 따라 자유롭게 사용하시면 됩니다