>웹 프론트엔드 >JS 튜토리얼 >jQuery 기반의 메시지 플러그인은 오른쪽 하단에 팝업 메시지 상자를 구현합니다_jquery

jQuery 기반의 메시지 플러그인은 오른쪽 하단에 팝업 메시지 상자를 구현합니다_jquery

WBOY
WBOY원래의
2016-05-16 18:12:251280검색

1.$.messager.lays(너비, 높이);

이 방법은 주로 팝업창의 너비와 높이를 정의하는 데 사용됩니다.

2.$.messager.anim(유형,속도);

이 방법은 주로 창이 표시되는 방식과 속도를 정의합니다.

$.messager.anim("fade",1000) //fadeIn 애니메이션에 표시

$.messager.anim("show",1000) //쇼 애니메이션에 표시

3.$.messager.show(제목,텍스트,시간);

이 방법은 주로 창에 표시되는 내용과 창이 숨겨지기 전까지 표시되는 시간을 정의합니다.

기본 제목을 사용할 경우 제목을 0으로 설정하세요. 또한 제목과 텍스트를 html 콘텐츠로 설정하여 표시할 수도 있습니다. 사용자가 팝업 창의 닫기 버튼을 클릭하여 메시지 상자를 닫게 하려면 시간을 0으로 설정하면 됩니다.

$.messager.show(0, "이것은 프롬프트 상자입니다.",5000);

$.messager.show("프롬프트 메시지","",3000);

메시지 플러그인의 각 메소드의 역할을 이해하고 나면 구체적인 사용법은 다음과 같습니다.

1. jquery.js 및 jquery.messager.js 파일을 페이지에 도입합니다.

2. 페이지가 로드되면 메시지 플러그인의 함수를 호출하여 창 크기, 표시 효과, 표시 내용을 설정합니다.

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

$(function () {
$.messager .lays(200, 200);
$.messager.anim('fade', 1000)
$.messager.show("프롬프트 메시지", "Script Home",5000);
});

3. 최종 표시되는 효과는 아래와 같습니다.
jQuery 기반의 메시지 플러그인은 오른쪽 하단에 팝업 메시지 상자를 구현합니다_jquery
온라인 데모 주소http://demo.jb51.net/js/jquery.messager/index.html
플러그인 다운로드: jquery.message.js 패키지 다운로드 주소http://www.jb51.net/jiaoben/22351.html

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.