jQueryベースのポップアップ警告ダイアログボックス美化プラグイン(警告、確認、プロンプト)_jquery

このプラグインを少し前に公式サイトで見かけたので、今日時間があるときに見てみましたのでシェアさせていただきます。

をすでにご存知かもしれませんが、そうであれば、馬鹿にしないで読み飛ばしてください。

この Jquery プラグインの目的は、JavaScript の標準関数alert()、confirm()、prompt()を置き換えることです。このプラグインには、

次の機能があります:

1: このプラグインを使用すると、独自の CSS 定式化をサポートできます。あなたのウェブサイトをよりプロフェッショナルな外観にしましょう。

2: ダイアログ ボックスのタイトルをカスタマイズできます。

3: IE7 では、JavaScript のプロンプト() 関数を使用することによって発生するページのリロードを回避できます。

4: これらのメソッドはすべて Windows モーダル ダイアログ ボックスをシミュレートします。ブラウザウィンドウのサイズを変更すると、ユーザーの

ウィンドウの調整に適応できます。

5: jQuery UI Draggable プラグインを導入すると、このプラグインも自由にドラッグできるようになります。

まず、必要な人のためにプラグインのダウンロード アドレスを示します:

http://labs.abeautysite.net/projects/js/jquery/alerts/jquery。 alerts -1.1.zip

1: まず、JQuery、jquery.ui.draggable
、および jquery.alerts の css ファイルと js ファイルを にインポートします。







IE でアラート プラグインを正しく使用するには、DTD をページに追加する必要があります:


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

2:
の使用この 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'、
'アラート ダイアログ');

テスト確認

コードをコピー コードは次のとおりです:

jconfirm('確認できますか?

この例は Polang ブログからのものです',
'確認ダイアログ', function(r) {
jAlert('確認済み: ' r, '確認結果') ;
});

テスト プロンプト

コードをコピー コードは次のとおりです:

jPrompt('何かを入力してください:<
a href="http://www.cnblogs.com/whitewolf/">
この例は、Breaking Waves Blog' 、
'WhiteWolf'、'Prompt Dialog'、function(r) {
if( r ) alter('You enter ' r); からのものです。 >});

jconfirm ポストバック ソリューションについて
今日少し時間があったので考えてみました。昨年の冬に ASP.NET のポストバックの問題についてこの質問があったと思います。これは主に jconfirm が CallBack コールバックであるためです。 は同期ではなく非同期です。
そこで、イベントがバブリングしないようにし、選択が true の場合は自動的にポストバックするようにしました。 LinkBut​​ton でテストします (ボタンはこのソリューションとは異なり、後で説明します)
LinkBut​​ton のコード デモを投稿します:
jconfirm return デモについて

コピーコード コードは次のとおりです:

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

LinkBut​​ton

LinkBut​​ton1 ボタン CODE をクリック

复制代代码如下:

protected void Button1_Click(object sender, EventArgs e)

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


主に先のイベント阻止のための冒険泡event.stopPropagation();event.preventDefault(); jconfirm のコールバック回帰関数で回帰が必要かどうかを判断します。

<%= Page.ClientScript.GetPostBackClientHyperlink(LinkBut​​ton1,"") %>;;
点击LinkBut​​ton1 の結果:


点击キャンセル時候不会回传，当ok時候就会発生回回更新時間间：

我们的LinkBut​​tonの实现在出的客端Html代コード有自筆回送，而ボタンこれは HTML 元素送信，提交， 故にこの二つの区别下にある，LinkBut​​ton 就多了几处javascript 代：

处制代码 代码如下:

および input Hidden

复制代码代码如下:

上の発言の意思は結果が必要なボタンの例、我们必须保证我的出客端末的代码有此回送注册、还有就是回送以

< ;%=Page.ClientScript.GetPostBackEventReference(Button1,"") %>。したがって、LinkBut​​ton をより適切に使用できるようになりました。