- 浏览: 214999 次
- 性别:
- 来自: 绍兴
文章分类
最新评论
-
112703013:
你好, 想问个问题 就是我这边上传一个zip文件 大概有100 ...
rails文件上传下载和删除 . -
chen_miao:
qplovechinese 写道 很好!
3q
simple jQuery date-picker plugin 使用 -
qplovechinese:
很好!
simple jQuery date-picker plugin 使用
这个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插件。
注:不同于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 “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>对话框带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
发表评论
-
淘宝开源编辑器KISSY Editor
2013-01-04 16:46 2374KISSY Editor 是开源项目 KISSY ... -
jquery获得select option的值 和对select option的操作
2012-09-25 21:19 1256jQuery获取Select元素,并选择的Te ... -
js 彷excel 键盘上下左右移动
2012-09-03 19:11 3030思路假设初始坐标为(0,0)首先要算出表格的最大最小坐标 即( ... -
jquery 图表插件highcharts & highstock
2012-08-23 14:43 11189Highcharts是纯JavaScript编写的图表库,提 ... -
jQuery Confirm 确认提示框插件
2012-06-08 19:50 9271jQuery Confirm是一个用于显示confirm确认提 ... -
jQuery操作checkbox选择
2012-06-07 14:05 944<!DOCTYPE ... -
jQuery获取元素位置以及高度与宽度
2012-04-28 14:05 3962form:http://apps.hi.baidu.com/s ... -
jquery 预加载图片
2012-04-24 14:39 1540from:http://dreamerslab.com/blo ... -
jquery 表格排序插件
2012-04-12 19:52 1627jquery 表格内容排序插件,插件来源:http://www ... -
jquery如何获得页面元素的坐标值
2012-04-10 21:15 1181jquery如何获得页面元素的坐标值 jquery如何获 ... -
ruby(rails)+jquery.ajax 登录和注册
2012-03-31 18:02 3428写一个简单ajax登录和注册方法,缩简写法 以注册为例!!! ... -
jquery 鼠标经过显示大图
2012-03-27 21:17 3043以下推存一下代码 <!DOCTYPE html PUB ... -
ruby js 导出表格为excel,word
2012-02-25 11:53 1428因为项目需要,所以在 ... -
jquery 条形码插件
2012-01-13 14:34 3913因为工作需求,项目简单化,所以rails3中使用jquery ... -
simple jQuery date-picker plugin 使用
2011-10-30 19:57 4380simple jQuery date-picker plugi ...
相关推荐
"jquery封装的漂亮弹窗confirm"是一个利用jQuery实现的对话框插件,它为开发者提供了一个美观且功能丰富的确认对话框替代原生JavaScript的`confirm()`函数。这个组件的主要目标是增强用户体验,同时保持代码的简洁和...
`jQuery.alerts` 是一个基于 jQuery 的插件,它提供了自定义样式的对话框功能,包括警告、确认和提示(alert、confirm 和 prompt)三种基本类型。这个插件旨在替代浏览器默认的简单对话框,为用户提供更加美观和交互...
`jQuery.dialog.js`是基于jQuery库的一个经典弹出框插件,它为网页开发者提供了方便、灵活的对话框功能。这个插件使得在网页中创建模态或非模态的对话框变得轻而易举,无需复杂的HTML和CSS布局,大大简化了前端交互...
jQuery确认工具提示插件。 易于使用和出色的响应式布局(在演示页面上,尝试调整屏幕大小!)。 产品特点 背景(黑色,白色,模糊) 主题(黑色,白色,引导程序4,引导程序4白色) 尺寸(小,小,中,大) 响应...
使用时,开发者可以通过调用特定的jQuery方法,如`.jAlert()`、`.jConfirm()`和`.jPrompt()`,来代替原生的`alert()`, `confirm()`, `prompt()`函数,轻松创建自定义对话框。 总的来说,"JQuery alert confirm ...
jQuery MsgBox Plugin 提供四个插件方法: jmask 遮罩层 junmask 关闭遮罩层 jalert 基于div的消息提醒框 jconfirm 基于div的消息确认框 具体使用请查看博文 http://blog.csdn.net/oxcow/article/details/7649614
jQuery-Alert-Dialogs-Plugin 这是来自 Cory SN LaViska, A Beautiful Site ( ) 的 jQuery 警报的修改版本。 双重许可为 GPL 和 MIT。... jConfirm 确认对话框jConfirm('你能确认一下吗?', '确认对话框',
要使用这个插件,我们需要在页面中引入JQuery库、JQuery UI库以及JQuery Alert插件自身的JS和CSS文件。例如,可以使用以下代码来引入这些必要的文件: ```html <script src="/path/to/jquery.js" type="text/...
jConfirm('你确定要删除吗?', '确认对话框', function(r) { if (r) { console.log('用户点击了确定'); } else { console.log('用户点击了取消'); } }); jPrompt('请输入你的名字:', '', function(r) { ...
//jQuery Alert Dialogs ... // jConfirm( message, [title, callback] ) // jPrompt( message, [value, title, callback] ) 1.新加一个multicheckbox 的公共方法: // Public methods multicheckb
本文介绍了一款基于jQuery的弹出警告对话框美化插件,该插件的主要功能是美化和增强标准JavaScript函数alert(), confirm() 和 prompt() 的功能。这些原生JavaScript函数通常用于显示基本的警告信息、询问用户是否...
**jQuery Confirm Mailto 插件详解** 在网页设计中,我们常常会遇到使用 `mailto:` 链接来创建一个可以直接触发用户默认邮件客户端发送邮件的功能。然而,有时候可能需要在用户点击这样的链接前进行一些确认操作,...
`jConfirm`是一个自定义的、高度可配置的确认对话框插件,它来自jQuery UI或其他类似的库,例如SweetAlert2。`jConfirm`允许开发者自定义对话框的文本、样式、按钮行为等,提供了更加灵活的用户体验。在给出的代码...
可以直接调用,操作方便,调用代码如下: jConfirm('Can you confirm this,<span am red.</span>?', 'Confirmation Dialog', function(r) { });