カスタムアラートボックスを作るのjQueryを使用してください

Webページをやって、多くの場合、我々は、このようなデータベースの更新など、いくつかのバックグラウンド処理を終了し、ユーザーにメッセージを与える必要があり、その後、他のページになったとき、つまり、このような要求に直面しています。

通常、我々はそれを行う方法？JSはalertboxがそれを使用来ますか？単純すぎること、またはページをshowModelDialogをアップでしょうか？その遅すぎる、あまりにも醜いです。たぶん誰かがJSを使用します。

いくつかの特殊効果を行うために、私はフレームワークを導入するためにここにいる、今日は簡単にはJQueryの方法を使用して行うことができます。

まず、あなたは、最新のJQeruyフレームワークと、この例のCSSファイルとJSプラグインを使用する必要性、ダウンロードすることができ、ここで著者をダウンロードする必要があり/Files/davidgu/JQuery.zip

さて、次のように私たちは、基本的なaspxページをやらせます。

1 <％ @ページ言語 = " C＃の " AutoEventWireup属性 = " 真の " 分離コード = " JAlertBox.aspx.cs " 継承 = " BlogNet.JQuery.JAlertBox " ％> 2 3

<！ DOCTYPE用HTML PUBLIC " - // W3C // DTD XHTML 1.0過渡// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 4 5

< HTML のxmlns = "http://www.w3.org/1999/xhtml" > 6
< ヘッドにrunat = "サーバー" > 7 < タイトル> jQueryのAlertBox </ タイトル> 8 < リンクのrel = "スタイルシート" メディア= "すべて" タイプ= "テキスト/ cssの" のhref = "../ CSS / JPrompt.css" /> 9 10



</ ヘッド > 11
< 本体 > 12 < フォーム ID = "Form1の" にrunat = "サーバー" > 13 < DIV > 14 < ASP：ボタン ID = "btnAlert" にrunat = "サーバー" テキスト= "マイAlertBox" クリック時= "btnAlert_Click" /> 15 </ DIV > 16 </ フォーム> 17





</ ボディ > 18
</ HTML >

その後、我々は次のように将来の管理を容易にするために、我々は、中JAlertBox.jsと呼ばれるファイルに書き込むことができ、カスタムJS関数のAlertBoxを記述する必要があります。

1 機能 JAlertBox（）{
2     strHtml = " <IMG SRC = '.. /画像/ my_logo.gif'国境= 'なし'> <BR> <Pスタイル= 'フォントファミリ：ゴシック;フォントサイズ：13pt;フォント重量：太字;色：＃408AB8; '>ここにあなたのタイトルは<P>！" 3 + " <Pスタイル='フォントファミリ：ゴシック;フォントサイズ：13pt;フォント重量：太字;色：＃999999; ">ここにテキストがある</ P> " ; 4 5 関数 transferLink（）{ 6         LOCATION.HREF = ' JAlertBox2.aspx ' 。




        {
12             コールバック：transferLink、
13             接頭辞： ' cleanblue ' 、
14個の             ボタン：{OK： ' OK ' }
15         }）;
16 }

ボタンのClickイベントで、全体に非常に：

1 保護ボイド btnAlert_Click（オブジェクト送信者、のEventArgs e）の 2         { 3 列のMyScript = @」 4                 <スクリプトタイプ= 'テキスト/ javascriptの' SRC =」.. / JsLib / jqueryの-1.3.2.min.js'> </スクリプト> 5                 <スクリプトタイプ= 'テキスト/ javascriptの' SRC = '.. / JsLib / jqueryの-impromptu.2.5.min.js '> </ SCRIPT> 6                 <スクリプトタイプ='テキスト/ javascriptの' SRC =」.. /JS/JAlertBox.js '> </ SCRIPT> 7                 <スクリプトタイプ='テキスト/ javascriptの'> 8つの                    $（ドキュメント）。レディ（関数（）{ 9                         JAlertBox（）; 10



                    }）;
11                 </ SCRIPT> " ;
12 13             のResponse.Write（のMyScript）; 14 15         }

あなたが任意の書き込み1を所有できるようにページコードが見え回します。

どれだけ実行し、以下を参照してください。

次のようにAlertBoxの効果は次のとおりです。

これは、ページをめくるです。

ます。https：//www.cnblogs.com/davidgu/archive/2009/06/19/1506792.htmlで再現

カスタムアラートボックスを作るのjQueryを使用してください

おすすめ