jquery jConfirm

chen_miao

浏览: 209500 次
性别:
来自: 绍兴

最近访客更多访客>>

u012363178

xmgcoffee

chongyunle

tdp17923

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery
js

jquery jConfirm jquery js confirm

这个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>

dialogs.rar (30.7 KB)
下载次数: 46

分享到：

Kindeditor4.0 for Rails3 . 基于jquery | jQuery Confirm 确认提示框插件

2012-06-09 08:57
浏览 3005
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery jConfirm

这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有

一：首先在<head></head>导入JQuery,jquery.ui.draggable

和jquery.alerts的 css、js文件。

二：使用

三：兼容性：

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery jConfirm

这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有

一：首先在<head></head>导入JQuery,jquery.ui.draggable

和jquery.alerts的 css、js文件。

二：使用

三：兼容性：

评论

发表评论

相关推荐

淘宝开源编辑器KISSY Editor

jquery获得select option的值 和对select option的操作

js 彷excel 键盘上下左右移动

jquery 图表插件highcharts & highstock

jQuery Confirm 确认提示框插件

jQuery操作checkbox选择

jQuery获取元素位置以及高度与宽度

jquery 预加载图片

jquery 表格排序插件

jquery如何获得页面元素的坐标值

ruby(rails)+jquery.ajax 登录和注册

jquery 鼠标经过显示大图

ruby js 导出表格为excel,word

jquery 条形码插件

simple jQuery date-picker plugin 使用

最近访客更多访客>>

jquery获得select option的值和对select option的操作