`

jquery jConfirm

阅读更多

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

如下这些特点:

  1:这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。

   2:允许你自定义对话框的标题。

  3:在IE7中,可以使你避免使用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>
    

     

    分享到:
    评论

    相关推荐

      jquery封装的漂亮弹窗confirm

      "jquery封装的漂亮弹窗confirm"是一个利用jQuery实现的对话框插件,它为开发者提供了一个美观且功能丰富的确认对话框替代原生JavaScript的`confirm()`函数。这个组件的主要目标是增强用户体验,同时保持代码的简洁和...

      jquery.alerts 弹出框

      `jQuery.alerts` 是一个基于 jQuery 的插件,它提供了自定义样式的对话框功能,包括警告、确认和提示(alert、confirm 和 prompt)三种基本类型。这个插件旨在替代浏览器默认的简单对话框,为用户提供更加美观和交互...

      jquery.dialog.js 经典弹出框附案例代码

      `jQuery.dialog.js`是基于jQuery库的一个经典弹出框插件,它为网页开发者提供了方便、灵活的对话框功能。这个插件使得在网页中创建模态或非模态的对话框变得轻而易举,无需复杂的HTML和CSS布局,大大简化了前端交互...

      jConfirm:jQuery确认插件

      jQuery确认工具提示插件。 易于使用和出色的响应式布局(在演示页面上,尝试调整屏幕大小!)。 产品特点 背景(黑色,白色,模糊) 主题(黑色,白色,引导程序4,引导程序4白色) 尺寸(小,小,中,大) 响应...

      JQuery alert confirm prompt 修改版

      使用时,开发者可以通过调用特定的jQuery方法,如`.jAlert()`、`.jConfirm()`和`.jPrompt()`,来代替原生的`alert()`, `confirm()`, `prompt()`函数,轻松创建自定义对话框。 总的来说,"JQuery alert confirm ...

      基于jQuery的自定义消息框插件

      jQuery MsgBox Plugin 提供四个插件方法: jmask 遮罩层 junmask 关闭遮罩层 jalert 基于div的消息提醒框 jconfirm 基于div的消息确认框 具体使用请查看博文 http://blog.csdn.net/oxcow/article/details/7649614

      jQuery-Alert-Dialogs-Plugin:自定义消息对话框

      jQuery-Alert-Dialogs-Plugin 这是来自 Cory SN LaViska, A Beautiful Site ( ) 的 jQuery 警报的修改版本。 双重许可为 GPL 和 MIT。... jConfirm 确认对话框jConfirm('你能确认一下吗?', '确认对话框',

      JQuery的Alert消息框插件使用介绍

      要使用这个插件,我们需要在页面中引入JQuery库、JQuery UI库以及JQuery Alert插件自身的JS和CSS文件。例如,可以使用以下代码来引入这些必要的文件: ```html &lt;script src="/path/to/jquery.js" type="text/...

      jQuery强大的模态对话框消息框Lightbox jAlert 插件

      jConfirm('你确定要删除吗?', '确认对话框', function(r) { if (r) { console.log('用户点击了确定'); } else { console.log('用户点击了取消'); } }); jPrompt('请输入你的名字:', '', function(r) { ...

      jquery.alert 弹出式复选框实现代码

      //jQuery Alert Dialogs ... // jConfirm&#40; message, [title, callback] &#41; // jPrompt&#40; message, [value, title, callback] &#41; 1.新加一个multicheckbox 的公共方法: // Public methods multicheckb

      基于jQuery的弹出警告对话框美化插件(警告,确认和提示)

      本文介绍了一款基于jQuery的弹出警告对话框美化插件,该插件的主要功能是美化和增强标准JavaScript函数alert(), confirm() 和 prompt() 的功能。这些原生JavaScript函数通常用于显示基本的警告信息、询问用户是否...

      jquery-confirm-mailto:在打开mailto链接之前确认的插件

      **jQuery Confirm Mailto 插件详解** 在网页设计中,我们常常会遇到使用 `mailto:` 链接来创建一个可以直接触发用户默认邮件客户端发送邮件的功能。然而,有时候可能需要在用户点击这样的链接前进行一些确认操作,...

      js模拟Confirm、alert弹框,可以修改文字颜色。

      可以直接调用,操作方便,调用代码如下: jConfirm('Can you confirm this,&lt;span am red.&lt;/span&gt;?', 'Confirmation Dialog', function(r) { });

      alert确认模拟框.rar

      `jConfirm`是一个自定义的、高度可配置的确认对话框插件,它来自jQuery UI或其他类似的库,例如SweetAlert2。`jConfirm`允许开发者自定义对话框的文本、样式、按钮行为等,提供了更加灵活的用户体验。在给出的代码...

    Global site tag (gtag.js) - Google Analytics