杩?涓?Jquery??浠剁?????????誇唬JavaScript???????芥??lert()锛?confirm锛?锛?锛??? prompt锛?锛???杩?涓???浠舵??
濡?涓?杩?浜??圭?癸?
? 1锛?杩?涓???浠跺??浠ヤ嬌浣???浠ユ????浣???宸辯??css?跺????浣誇???缃?绔???璧鋒?ユ?翠?涓???
?? 2锛???璁鎬???瀹?涔?瀵矽??妗?????棰???
? 3锛???緝锛ワ?涓?锛???浠ヤ嬌浣??垮??浣跨??avaScript ??prompt锛?锛??芥?闆甫?ョ??椤甸?㈤???闆??杞姐??
?? 4锛?杩?浜??規??芥ā??浜?Windows??妯″?瀵矽??妗????ㄤ??瑰???瑰??娴?瑙??ㄧ???ｅぇ灏??跺??锛?瀹??藉?????搴??ㄦ??
绐??ｇ??璋??淬??
?? 5锛?濡???浣?寮??ヤ?jQuery UI Draggable plugin??浠訛??ｈ?涓???浠朵???浠ヨ????辨???ㄣ??
???ㄨ???璇存??浠剁??涓?杞藉?闆??锛?浠ヤ?????涔?浜轟?杞?
http://labs.abeautifulsite.net/projects/js/jquery/alerts/jquery.alerts-1.1.zip
涓?锛?棣?????lt;head></head>瀵煎??Query,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"
/>
涓轟???E涓?姝ｇ‘??浣跨??lert??浠訛?浣?杩?寰???age涓????ヤ???TD锛?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
浜?锛?浣跨??/h3>
??浠???浠ョ?ㄤ????瑰??ヤ嬌?ㄨ?涓?Jquery??浠躲??
jAlert(message, [title, callback]) jConfirm(message, [title, callback]) jPrompt(message, [value, title, callback])
娉??涓???浜?Javascript?????芥?幫???浠???浠ュ??essage涓?浣跨??TML???版?劇ず浣?????绀轟俊????
涓?锛??煎?規?э?
alert??浠惰?姹???浠?蹇?椤諱嬌??Query1.2.6??浠ヤ???jQuery????
宸茬?琚?娴?璇??藉???E6??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[type='button'] {
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" target="_blank" rel="external nofollow" 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 class
jAlert('This is the custom class called “style_1”', 'Custom Styles', function() {
$.alerts.dialogClass = null; // reset to default
});
});
});
</script>
</head>
<body>
<h1>« jQuery Alert Dialogs (Alert, Confirm, & 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>瀵矽??妗?甯?TML浠ｇ??</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 creating
your 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Back to the project page</a>
</p>
<br><br>
<div align="center">
?峰???村?JavaScript浠ｇ??锛?璇風?誨?JavaScript??浜?缃? <a href="http://www.sharejs.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >http://www.sharejs.com</a>
</div>
</body>
</html>
![attachEvent 與addEventListener 差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)