jquery jConfirm
这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有如下这些特点：
1：这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。
2：允许你自定义对话框的标题。
3：在ＩＥ７中，可以使你避免使用JavaScript 的prompt（）函数带来的页面重新加载。
4：这些方法都模拟了Windows的模式对话框。在你改变改变浏览器窗口大小时候，它能够自适应用户
窗口的调整。
5：如果你引入了jQuery UI Draggable plugin插件，那这个插件也可以被自由拖动。
先在这里说插件的下载地址，以供有需之人下载:
http://labs.abeautifulsite.net/projects/js/jquery/alerts/jquery.alerts-1.1.zip
一：首先在<head></head>导入JQuery,jquery.ui.draggable
和jquery.alerts的 css、js文件。
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
为了在iE中正确的使用alert插件，你还得在Page中加入何时DTD：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
二：使用
我们可以用下列方式来使用这个Jquery插件。
jAlert(message, )
jConfirm(message, )
jPrompt(message, )注：不同于Javascript标准函数，我们可以在message中使用HTML参数显示你的提示信息。
三：兼容性：
alert插件要求我们必须使用JQuery1.2.6或以上的jQuery包。
已经被测试能够在IE6、IE7、FF2、FF3、Safari 3 、Chrome 、Opera 9浏览器上很好的运行。
四：用例
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JQuery插件:alert、confirm、prompt对话框插件 - 分享JavaScript-sharejs.com</title><style type="text/css">BODY,HTML {padding: 0px;margin: 0px;}BODY {font-family: Arial, Helvetica, sans-serif;font-size: 12px;background: #FFF;padding: 15px;}H1 {font-size: 20px;font-weight: normal;}H2 {font-size: 16px;font-weight: normal;}FIELDSET {border: solid 1px #CCC;-moz-border-radius: 16px;-webkit-border-radius: 16px;border-radius: 16px;padding: 1em 2em;margin: 1em 0em;}LEGEND {color: #666;font-size: 16px;padding: 0em .5em;}PRE {font-family: "Courier New", monospace;font-size: 11px;color: #666;background: #F8F8F8;padding: 1em;-moz-border-radius: 8px;-webkit-border-radius: 8px;border-radius: 8px;}/* Custom dialog styles */#popup_container.style_1 {font-family: Georgia, serif;color: #A4C6E2;background: #005294;border-color: #113F66;}#popup_container.style_1 #popup_title {color: #FFF;font-weight: normal;text-align: left;background: #76A5CC;border: solid 1px #005294;padding-left: 1em;}#popup_container.style_1 #popup_content {background: none;}#popup_container.style_1 #popup_message {padding-left: 0em;}#popup_container.style_1 INPUT {border: outset 2px #76A5CC;color: #A4C6E2;background: #3778AE;}</style><!-- 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" media="screen" /><!-- Example script --><script type="text/javascript">$(document).ready( function() {$("#alert_button").click( function() {jAlert('This is a custom alert box', 'Alert Dialog');});$("#confirm_button").click( function() {jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {if (r){jAlert('Confirmed: ' + r, 'Confirmation Results');}});});$("#prompt_button").click( function() {jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {if( r ) alert('You entered ' + r);});});$("#alert_button_with_html").click( function() {jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');});$(".alert_style_example").click( function() {$.alerts.dialogClass = $(this).attr('id'); // set custom style classjAlert('This is the custom class called &ldquo;style_1&rdquo;', 'Custom Styles', function() {$.alerts.dialogClass = null; // reset to default});});});</script></head><body><h1>&laquo; jQuery Alert Dialogs (Alert, Confirm, &amp; Prompt Replacements)</h1><h2>基本范例</h2><fieldset><legend>Alert</legend><pre>jAlert('This is a custom alert box', 'Alert Dialog');</pre><p><input id="alert_button" type="button" value="Show Alert" /></p></fieldset><fieldset><legend>Confirm</legend><pre>jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) { if (r){jAlert('Confirmed: ' + r, 'Confirmation Results');}});</pre><p><input id="confirm_button" type="button" value="Show Confirm" /></p></fieldset><fieldset><legend>Prompt</legend><pre>jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) { if( r ) alert('You entered ' + r);});</pre><p><input id="prompt_button" type="button" value="Show Prompt" /></p></fieldset><h2>高级范例</h2><fieldset><legend>对话框带HTML代码</legend><pre>jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');</pre><p><input id="alert_button_with_html" type="button" value="Show Alert" /></p></fieldset><fieldset><legend>Alternate Styles</legend><p>By changing the value of the <samp>$.alerts.dialogClass</samp> property (and creatingyour own CSS class), you can changes the style of your dialogs:</p><p><input id="style_1" class="alert_style_example" type="button" value="Style 1" /></p><p>View the plugin source for additional properties that can be modifed at runtime.</p></fieldset><p><a href="http://www.sharejs.com">Back to the project page</a></p><br><br><div align="center">获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a></div></body></html>
页:
[1]