jquery插件jquery.confirm弹出确认消息


Posted in Javascript onDecember 22, 2015

本文为大家介绍了插件jquery.confirm弹出确认消息的实现方法,具有一定的参考价值,特分享给大家供大家参考,具体内容如下

实现效果:

jquery插件jquery.confirm弹出确认消息

具体代码:

1、插件默认参数

// 默认参数
$.confirm.defaults = {
 // 样式
 css: "http://static.qianduanblog.com/css/jquery.confirm/default.min.css?v=" + Math.ceil(new Date() / 86400000),
 // 确认框内容
 content: "确认吗?",
 // 确认按钮文字
 sureButton: "确认",
 // 取消按钮文字
 cancelButton: "取消",
 // 位置
 position: {},
 // 自动打开
 autoOpen: false,
 // 动画持续时间
 duration: 123,
 // 打开确认框回调
 onopen: emptyFn,
 // 单击了确认或者取消回调
 onclick: emptyFn,
 // 确认回调
 onsure: emptyFn,
 // 取消回调
 oncancel: emptyFn,
 // 关闭确认框回调
 onclose: emptyFn
}

2、插件结构与样式
jquery.confirm的dom结构为:

<div class="jquery_confirm____" style="display:none">
 <div class="jquery_confirm____body">确认框消息</div>
 <div class="jquery_confirm____footer">
  <button class="button button-primary jquery_confirm____sure">确认</button>
  <button class="button button-error jquery_confirm____cancel">取消</button>
 </div>
</div>

默认的插件样式基于css.3,默认的插件样式地址为default,插件样式只渲染一次,不会多次渲染,以第一次使用插件的样式为准。

3、使用方法

// 打开确认框
$.confirm({
 content: "确认要查看吗?",
 onopen: function() {
  alert("确认框打开了!");
 },
 onclose: function() {
  alert("确认框关闭了!");
 },
 onsure: function() {
  alert("你单击了确认按钮!");
 },
 oncancel: function() {
  alert("你单击了取消按钮!");
 },
 onclick: function(s) {
  if (s) {
   alert("你单击了确认按钮!");
  } else {
   alert("你单击了取消按钮!");
  }
 }
});
 
$.confirm("确认吗?", function(s) {
 if (s) {
  alert("你单击了确认按钮!");
 } else {
  alert("你单击了取消按钮!");
 }
});

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
Javascript实现关闭广告效果
Jan 29 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 #Javascript
Javascript实现Array和String互转换的方法
Dec 21 #Javascript
图解Sublime Text3使用技巧
Dec 21 #Javascript
七个不允许错过的jQuery小技巧
Dec 21 #Javascript
jQuery焦点图插件SaySlide
Dec 21 #Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 #Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 #Javascript
You might like
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python检测是文件还是目录的方法
2015/07/03 Python
python装饰器与递归算法详解
2016/02/18 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python实现移位加密和解密
2019/03/22 Python
wxPython实现绘图小例子
2019/11/19 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Django如何批量创建Model
2020/09/01 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
flask框架中的cookie和session使用
2021/01/31 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
绘画专业自荐信范文
2014/02/23 职场文书
可口可乐广告词
2014/03/20 职场文书
触电现场处置方案
2014/05/14 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
公司给客户的感谢信
2015/01/23 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
生日赠语
2015/06/23 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript