jQuery 프롬프트 플러그인 알림 사용 가이드_jquery

1.알림 플러그인 기능

js에서 경고, 확인, 프롬프트를 대체하고 친숙한 프롬프트 상자를 표시하는 데 사용되는 프롬프트 기능을 주로 구현합니다.

2. 알림 사용 방법

1. 사용된 파일
프롬프트 상자의 스타일을 설정하려면 주로 3개의 파일과 2개의 CSS(alertify.core.css, Alertify.default.css)를 사용합니다. 프롬프트 상자의 기능을 구현하는 데 사용되는 js(alertify.min.js 또는 Alertify.js)입니다.

2. 프롬프트 박스 코드 구현
Alertify의 주요 단계는 다음과 같습니다: 초기화(alertify 초기화) -> 바인딩(바인딩 이벤트)

간단한 프롬프트박스, 확인박스, 프롬프트박스 구현 등

var
$ = function (id) {
  return document.getElementById(id);
},
//初始化操作
reset = function () {
  alertify.set({
    labels : {
      ok   : "确认",
      cancel : "取消"
    },
    delay : 5000,
    buttonReverse : false,
    buttonFocus  : "ok"
  });
};
//绑定
$("alert").onclick = function () {
   reset();
   alertify.alert("提示框");
   return false;
};
//绑定
$("confirm").onclick = function () {
   reset();
   alertify.confirm("确认框", function (e) {
     if (e) {
       alertify.success("点击确认");
     } else {
       alertify.error("点击取消");
     }
   });
   return false;
};
//绑定
$("prompt").onclick = function () {
  reset();
  alertify.prompt("提示输入框", function (e, str) {
    if (e) {
      alertify.success("点击确认，输入内容为: " + str);
    } else {
      alertify.error("点击取消");
    }
  }, "默认值");
  return false;
};

결과 표시(입력 프롬프트 상자):

4.알림 수정 스타일
주로 덮어쓸 수 있는 두 개의 CSS 파일(alertify.core.css, Alertify.default.css)을 수정합니다. 페이지에

을 추가하면

.alertify{
  width:350px;
  margin-left: -205px;
  border:2px solid #4ba9e6;
  background:#f3faff;
  border-radius:0;
}

수정 후 결과 표시:

사용 지침 알림

alertify는 html5 css3에서 개발된 플러그인이므로 html5 css3 브라우저를 완벽하게 지원합니다. 테스트 과정에서 Alertify의 표시 효과는 Chrome 및 Firefox 브라우저에서 완벽하지만 IE8에서는 둥근 모서리, 그림자, 애니메이션 특수 효과 등과 같은 표시 효과가 다릅니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.