>웹 프론트엔드 >JS 튜토리얼 >jquery 플러그인 hiAlert는 웹 페이지 대화 상자를 구현합니다.

jquery 플러그인 hiAlert는 웹 페이지 대화 상자를 구현합니다.

WBOY
WBOY원래의
2016-05-16 16:01:311420검색

무서운 '붐' 소리와 함께 뭔가 나쁜 일이 일어날 것 같은 느낌을 주는 IE 브라우저의 경고창에 지쳤습니다. 요즘에는 웹 페이지의 팝업 경고 상자(alert), 확인 대화 상자(confirm), 입력 상자(prompt)에 다양한 표시 효과가 있습니다. 이 기사에서는 대화 상자를 통합하기 위해 hiAlert 플러그인을 사용합니다. 당신을 위한 웹페이지 스타일.

hiAlert 플러그인은 jquery.alerts를 기반으로 개선되었습니다. 여기에는 일반적으로 사용되는 여러 프롬프트 상자가 포함되어 있으며 그라데이션 프롬프트 막대 효과 및 팝업 웹 페이지 레이어 효과도 제공합니다. 현재 모든 주류 브라우저와 호환됩니다.

사용방법

hiAlert는 5가지 사용 방법을 제공합니다.

1. 안녕하세요

hiAlert(콘텐츠, 제목, 콜백)
hiAlert 메소드는 3개의 매개변수를 제공합니다. 내용: 내용, 제목: 대화 상자 제목, 콜백: 콜백 함수, 없으면 쓰지 마세요. 예:

hiAlert("欢迎来到helloweba.com","提示"); 

2. 안녕하세요확인

hiConfirm(콘텐츠,제목,콜백)
hiConfirm 메소드는 3개의 매개변수를 제공합니다. 내용: 내용, 제목: 대화 상자 제목, 콜백: 콜백 함수, 없으면 쓰지 마세요. 예:

hiConfirm('你确认此操作吗?','确认框',function(r){ 
  hiOverAlert('你的反馈是: ' + r); 
}); 

3.안녕하세요

hiPrompt(content,deinput,title,callback)
hiConfirm 메소드는 4개의 매개변수를 제공합니다. content: content, deinput: 입력 상자의 기본값, title: 대화 상자 제목, callback: 콜백 함수, 없으면 쓰지 않음, 예:

hiPrompt('请填写:','默认值','输入框',function(r){ 
  if(r) hiOverAlert('你填入的内容是“' + r+'”'); 
}); 

4. 하이박스

hiBox(obj,title,w,h,submit,cancel,callback)
hiBox 메소드는 7개의 매개변수를 제공합니다. obj: 열리도록 지정된 객체(유일한 객체), 즉 대화 상자에 표시되는 내용과 관련된 객체, title: title, w: 너비, h: 높이, submit: 설정할 수 있는 콘텐츠의 객체는 "제출"입니다. 콜백이 있는 경우 콜백 동작으로 돌아가려면 여기를 클릭하세요. 취소: 대화 상자의 취소 또는 닫기 버튼 객체, 콜백: 다음과 같은 콜백 함수:

hiBox('#showbox', '标题',400,'','','.a_close'); 

5. hiOverAlert

hiOverAlert(content,timeout)
hiOverAlert는 이 사이트의 기사에 있는 효과와 유사한 정보 프롬프트 표시줄의 효과를 표시하는 데 사용됩니다. 내용: 프롬프트 내용, 시간 초과: 프롬프트 시간, 기본값은 3000(3초)입니다. 예:

hiOverAlert('操作提示条信息',1500); 

사용 시 반드시 jQuery 라이브러리와 hiAlert 플러그인, 해당 CSS 스타일을 로드하세요. CSS를 수정하여 대화 상자를 더욱 아름답게 만들 수도 있습니다. 또한 대화 상자 효과를 드래그해야 하는 경우 jquery.ui.draggable.js를 로드해야 자세한 내용을 확인할 수 있습니다.

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

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