JQueryのAlertプラグインの紹介

17105 ワード

JQueryのAlertプラグインの紹介
元のalertのスタイルに飽きたかどうか、いつも感嘆符です.UEが悪い場合があります.今日はJquery Alertプラグインを使用して、Jscriptのalert、confirm、promptを置き換えてJSファイルをダウンロードしてpageに参照することができます.次のコードがあります.

1:

   2:  <script src="/path/to/jquery.js" type="text/javascript">script>

   3:  "/path/to/jquery.ui.draggable.js"</span> type=<span class="str">"text/javascript"</span>>

4:

   5:  "/path/to/jquery.alerts.js"</span> type=<span class="str">"text/javascript"</span>><span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span></pre> 
   <pre><span class="lnum">   6:  </span><span class="kwrd"><</span><span class="html">link</span> <span class="attr">href</span><span class="kwrd">="/path/to/jquery.alerts.css"</span> <span class="attr">rel</span><span class="kwrd">="stylesheet"</span> <span class="attr">type</span><span class="kwrd">="text/css"</span> <span class="attr">media</span><span class="kwrd">="screen"</span> <span class="kwrd">/></span></pre> 
  </div> 
  <div id="cnblogs_post_body"> 
   <p><span style="font-family:'Courier New';">    draggable        ，              。      Jquery1.42     ：</span></p> 
   <div class="csharpcode"> 
    <pre class="alt"><script src=<span class="str">"Scripts/jquery-1.4.2.min.js"</span> type=<span class="str">"text/javascript"</span>>

"Scripts/jquery-ui-1.8.5.custom.min.js"</span> type=<span class="str">"text/javascript"</span>>

"Scripts/jquery.alerts.js"</span> type=<span class="str">"text/javascript"</span>>

"Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />

主な方法は次のとおりです.

jAlert(message,[title,callback])alert

を作成する

jConfirm(message,[title,callback])確認allertを作成し、callback

をサポートする

jPrompt(message,[value,title,callback])ユーザーに値を入力させるプロンプトボックスを作成し、

を提供する場合はcallbackをサポートします.
次の例Codeを参照してください.

1:

   2:  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   3:  <html xmlns="http://www.w3.org/1999/xhtml">

   4:  <head id="Head1" runat="server">

   5:      <title>title>

   6:      <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript">script>

   7:      "Scripts/jquery-ui-1.8.5.custom.min.js"</span> type=<span class="str">"text/javascript"</span>>

   8:      "Scripts/jquery.alerts.js"</span> type=<span class="str">"text/javascript"</span>>

   9:      "Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />

  10:      "text/javascript"</span>></pre> 
    <pre class="alt"><span class="lnum">  11:  </span>        $(document).ready(<span class="kwrd">function</span> () {</pre> 
    <pre><span class="lnum">  12:  </span>            $(<span class="str">"#btnAlert"</span>).click(<span class="kwrd">function</span> ()</pre> 
    <pre class="alt"><span class="lnum">  13:  </span>            { jAlert(<span class="str">'Pushed the alert button'</span>, <span class="str">'Alert Dialog'</span>); });</pre> 
    <pre><span class="lnum">  14:  </span>            $(<span class="str">"#btnPrompt"</span>).click(<span class="kwrd">function</span> () {</pre> 
    <pre class="alt"><span class="lnum">  15:  </span>                jPrompt(<span class="str">'Type some value:'</span>, <span class="str">''</span>, <span class="str">'Prompt Dialog'</span>, <span class="kwrd">function</span> (typedValue) {</pre> 
    <pre><span class="lnum">  16:  </span>                    <span class="kwrd">if</span> (typedValue) {</pre> 
    <pre class="alt"><span class="lnum">  17:  </span>                        jAlert(<span class="str">'You typed the following '</span> + typedValue);</pre> 
    <pre><span class="lnum">  18:  </span>                    }</pre> 
    <pre class="alt"><span class="lnum">  19:  </span>                });</pre> 
    <pre><span class="lnum">  20:  </span>            });</pre> 
    <pre class="alt"><span class="lnum">  21:  </span>        });   </pre> 
    <pre><span class="lnum">  22:  </span>         <span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span></pre> 
    <pre class="alt"><span class="lnum">  23:  </span><span class="kwrd"></</span><span class="html">head</span><span class="kwrd">></span></pre> 
    <pre><span class="lnum">  24:  </span><span class="kwrd"><</span><span class="html">body</span><span class="kwrd">></span></pre> 
    <pre class="alt"><span class="lnum">  25:  </span>    <span class="kwrd"><</span><span class="html">form</span> <span class="attr">id</span><span class="kwrd">="form1"</span> <span class="attr">runat</span><span class="kwrd">="server"</span><span class="kwrd">></span></pre> 
    <pre><span class="lnum">  26:  </span>    <span class="kwrd"><</span><span class="html">div</span><span class="kwrd">></span></pre> 
    <pre class="alt"><span class="lnum">  27:  </span>        <span class="kwrd"><</span><span class="html">input</span> <span class="attr">type</span><span class="kwrd">="button"</span> <span class="attr">value</span><span class="kwrd">="Alert Me"</span> <span class="attr">id</span><span class="kwrd">="btnAlert"</span> <span class="kwrd">/></span></pre> 
    <pre><span class="lnum">  28:  </span>        <span class="kwrd"><</span><span class="html">input</span> <span class="attr">type</span><span class="kwrd">="button"</span> <span class="attr">value</span><span class="kwrd">="Prompt Me"</span> <span class="attr">id</span><span class="kwrd">="btnPrompt"</span> <span class="kwrd">/></span></pre> 
    <pre class="alt"><span class="lnum">  29:  </span>    <span class="kwrd"></</span><span class="html">div</span><span class="kwrd">></span></pre> 
    <pre><span class="lnum">  30:  </span>    <span class="kwrd"></</span><span class="html">form</span><span class="kwrd">></span></pre> 
    <pre class="alt"><span class="lnum">  31:  </span><span class="kwrd"></</span><span class="html">body</span><span class="kwrd">></span></pre> 
    <pre><span class="lnum">  32:  </span><span class="kwrd"></</span><span class="html">html</span><span class="kwrd">></span></pre> 
   </div> 
   <p>  alert   ：</p> 
   <p><a href="https://img.  .com/image/info8/910493399b6244ddb9af2ad2a1283382.png" target="_blank"><img title="image" alt="JQuery Alert    _ 1   " src="https://img.  .com/image/info8/910493399b6244ddb9af2ad2a1283382.png" height="122" width="329" style="border-width:0px;display:inline;;border:1px solid black;"></a></p> 
   <p><br></p> 
   <p>    ：http://www.cnblogs.com/wintersun/archive/2010/10/08/1845970.html</p> 
  </div> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1290862550057033728"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">

興味があるかもしれません

JAvaデジタル署名の3つの方法
知了ing
java jdk

Hibernate学習ノート
caoyong
Hibernate

デザインモードのデコレータモードDecorator(構造型)
剣客を一人さすらう
Decorator

ディスクファイルtxtを読み込み、Stringを入力
一発でガレージに送り返す
String

js 3段連動ドロップダウンボックス
3213213333332132
さんだんれんどう

Erlangのparse_Transformコンパイルオプションの適用
616050468
parse_transform ゲームサーバ属性の同期 abstract_code

JAVA JSONの解析
darkranger
java

POJ-1273-Drainage Ditches
aijuans
ACM_POJ

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号