使用它可以用来替换JScript中的alert,confirm,prompt
<!-- Dependencies --> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.ui.draggable.js" type="text/javascript"></script> <!-- Core files --> <script src="jquery.alerts.js" type="text/javascript"></script> <link href="jquery.alerts.css" rel="stylesheet" type="text/css" />
注意其中jquery.ui.draggable.js是用来实现拖拉的,如不需要这个功能不就不用引用。在目前最近的Jquery1.42下应用引用:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script> <script src="Scripts/jquery.alerts.js" type="text/javascript"></script> <link href="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:
JS部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>test</title> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.ui.draggable.js" type="text/javascript"></script> <script src="jquery.alerts.js" type="text/javascript"></script> <link href="jquery.alerts.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function () { $("#btnAlert").click(function () { jAlert('Pushed the alert button', 'Alert Dialog'); }); $("#btnPrompt").click(function () { jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) { if (typedValue) { jAlert('You typed the following ' + typedValue); } }); }); $("#confirm_button").click( function() { jConfirm('上传完成,是否继续上传', '操作提示', function(r) { if (r==false){ jAlert('请完善文档相关资料', '操作提示',function(s) { if (s==true){ top.location = "/Member-Users-Mydoc-T-C.html"; } }) } }); }); }); </script> </head>
HTML部分:
<body> <div> <form id="form1" runat="server"> <input type="button" value="Alert Me" id="btnAlert" /> <input type="button" value="Prompt Me" id="btnPrompt" /> <input type="button" value="Pss" id="confirm_button" /> </form> </div> </body> </html>
有3个范例,其中一个alert效果图如下:
实例demo:
http://help.mudbest.com/jquery/jquery-alert/index_demo1.html
http://help.mudbest.com/jquery/jquery-alert/index_demo2.html
插件完整包:
jquery-alert