这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这款弹出框插件是本人自己模仿 IOS 原生弹出框写的一个自定义插件,包括 Alert 弹出框和 Confirm 确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,本文给大家介绍了 jQuery 仿 IOS 弹出框插件, 需要的朋友可以参考下
这款弹出框插件是本人自己模仿 IOS 原生弹出框写的一个自定义插件,包括 Alert 弹出框和 Confirm 确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,可以进行扩展,下面是插件使用方法,一看就懂:
首先导入 jquery 库和插件库以及 CSS 文件
- <script src="./jquery-1.8.3.min.js">
- </script>
- <script src="./jquery.confirm-1.1.js">
- </script>
- <link href="./jquery.confirm-1.1.css" rel="external nofollow" rel='stylesheet'
- type='text/css' />
Alert 弹出框快速使用
- $.alert('Are you sure to continue?'); --内容支持html代码
- $.alert({
- title: 'Alert弹出框!', --标题 默认标题(温馨提示)
- content: 'Are you sure to continue?', --内容
- });
Alert 回调弹出框使用
- $.alert({
- title: 'Alert回调弹出框!',
- content: 'alert带回调函数,点击确定按钮触发回调函数',
- buttons: {
- ok: {
- text: '好', --按钮标题
- action: function () { --回调事件
- alert("按钮回调函数被执行");
- }
- }
- }
- });
Confirm 确认框使用
- $.confirm('Are you sure to continue?');
- $.confirm({
- title: 'Confirm确认框!',
- content: 'Are you sure to continue?',
- });
Confirm 回调确认框使用
- $.alert({
- title: 'Confirm回调确认框!',
- content: 'Confirm确认框,点击按钮触发回调函数',
- buttons: {
- ok: { --确定按钮
- text: '确定',
- action: function () {
- alert("确定按钮回调函数被执行");
- }
- },
- close: { --关闭按钮
- text: '关闭',
- action: function () {
- alert("关闭按钮回调函数被执行");
- }
- }
- }
- });
确认框按钮可以放置多个
效果展示
是不是使用起来非常简单 -_-
下载链接:https://pan.baidu.com/s/1pLJJky3
以上所述是小编给大家介绍的 jQuery 仿 IOS 弹出框插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0609/327521.html