jQuery 기반 팝업 경고 대화 상자 미화 플러그인(경고, 확인 및 프롬프트)_jquery

얼마 전 공식 홈페이지에서 이 플러그인을 보고 오늘 시간이 나면 살펴보고 공유하게 되었습니다. 이미

알고 계실 수도 있으니, 그렇다면 건너뛰고 바보짓하지 마세요.

이 Jquery 플러그인의 목적은 JavaScript의 표준 기능인 경고(), 확인() 및 프롬프트()를 대체하는 것입니다. 이 플러그인에는

다음 기능이 있습니다.

1: 이 플러그인을 사용하면 자신만의 CSS 공식을 지원할 수 있습니다. 귀하의 웹사이트를 더욱 전문적으로 보이게 만드세요.

2: 대화 상자 제목을 사용자 정의할 수 있습니다.

3: IE7에서는 JavaScript의 프롬프트() 기능을 사용하여 페이지가 다시 로드되는 것을 방지할 수 있습니다.

4: 이 방법은 모두 Windows 모달 대화 상자를 시뮬레이션합니다. 브라우저 창의 크기를 변경할 때 사용자

창의 조정에 맞게 조정할 수 있습니다.

5: jQuery UI Draggable 플러그인을 도입하면 이 플러그인도 자유롭게 드래그할 수 있습니다.

먼저 플러그인이 필요한 분들을 위한 다운로드 주소는 다음과 같습니다.

http://labs.abeautifulsite.net/projects/js/jquery/alerts/jquery. Alerts -1.1.zip

1: 먼저 에서 JQuery의 css 및 js 파일, jquery.ui.draggable
및 jquery.alerts를 가져옵니다.







iE에서 경고 플러그인을 올바르게 사용하려면 페이지에 DTD를 추가해야 합니다:


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

둘:
사용 이 Jquery 플러그인을 사용하려면 다음 방법을 사용할 수 있습니다.

jAlert(메시지, [제목, 콜백])
jConfirm(메시지, [제목, 콜백])
jPrompt(메시지, [값, 제목, 콜백])
참고: 다름 Javascript 표준 기능의 경우 메시지의 HTML 매개변수를 사용하여 프롬프트 정보를 표시할 수 있습니다.

3: 호환성:
경고 플러그인을 사용하려면 JQuery1.2.6 이상의 jQuery 패키지를 사용해야 합니다.

IE6, IE7, FF2, FF3, Safari 3, Chrome, Opera 9 브라우저에서 잘 실행되는 것으로 테스트되었습니다.

4: 데모: 참고: Dragonable 플러그인은 데모에 도입되어 드래그할 수 없습니다.
테스트 알림

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

jAlert('사용자 정의 경고 상자입니다.
이 예는 Breaking Waves Blog',
'Alert Dialog');

테스트 확인

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

jConfirm('확인할 수 있나요?

이 예는 Polang Blog',
'확인 대화 상자', function(r) {
jAlert(' 확인됨: ' r, '확인 결과') ;
})

테스트 프롬프트

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

jPrompt('뭔가를 입력하세요:<
a href="http://www.cnblogs.com/whitewolf/">
이 예는 Breaking Waves Blog' ,
'WhiteWolf', 'Prompt Dialog', function(r) {
if( r ) Alert(' 입력했습니다.
});

jConfirm 포스트백 솔루션 소개
오늘 시간을 내어 생각해 보았습니다. 지난겨울에 ASP.NET의 포스트백 문제에 관해 이 질문을 한 것 같습니다. 이는 주로 jConfirm이 콜백 콜백이기 때문입니다. 동기식이 아니라 비동기식입니다.
그래서 이벤트가 버블링되는 것을 방지하려고 노력했고 선택이 true가 되면 자동으로 다시 게시됩니다. LinkButton으로 테스트(버튼은 이 솔루션과 다르며 나중에 설명됩니다)
이제 LinkButton의 코드 데모를 게시하세요:
jConfirm return DEMO 정보

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



<제목>




<본문>

LinkButton

LinkButton1 버튼 클릭 CODE

复代码 代码如下:

protected void Button1_Click(객체 전송자, EventArgs e)

{
this.Label1.Text = DateTime.Now.ToString();
}


主要为先阻止事件的冒泡event.stopPropagation();event.preventDefault(); 재jConfirm의 콜백回调函数中判断是否需要回传，

<%= Page.ClientScript.GetPostBackClientHyperlink(LinkButton1,"") %>;;
点击LinkButton1是效果为：


点击취소 时候就不会回传，当ok时候就会发生回传更new时间：

对于我们的LinkButton的实现是在输客户端Html代码有脚本自动回传，而Button这是HTML元素submit，提交， 所以在这两个的区别下，LinkButton就多了几处javascript 代码：

复∨代码 代码如下:

와 입력 숨김

复代码 代码如下:

상위 화면의 의미 있는 의미는 다음과 같은 버튼으로 표시됩니다.注册，还有就是回传为

< ;%=Page.ClientScript.GetPostBackEventReference(Button1,"") %>