jquery jConfirm

最新推荐文章于 2021-08-05 15:19:35 发布

chenmiao_hero

最新推荐文章于 2021-08-05 15:19:35 发布

阅读量1.3k

点赞数 1

分类专栏： jquery js 文章标签： jquery jConfirm jquery js confirm ViewUI

本文链接：https://blog.csdn.net/chenmiao_hero/article/details/84231361

版权

jquery 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

这个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, [title, callback]) jConfirm(message, [title, callback]) jPrompt(message, [value, title, callback])

注：不同于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[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" 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 &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 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">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>

chenmiao_hero

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery jConfirm

这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有如下这些特点： 1：这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。 2：允许你自定义对话框的标题。 3：在ＩＥ７中，可以使你避免使用JavaScript 的prompt（）函数带来的页面重新加载。 4：这些方法都模拟...
复制链接

扫一扫