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定义函数的方法
Dec 06 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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日历
2015/11/17 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python字符串格式化输出代码实例
2019/11/22 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
关键字throw与throws的用法差异
2016/11/22 面试题
库房主管岗位职责
2013/12/31 职场文书
创建文明学校实施方案
2014/03/11 职场文书
我爱我家教学反思
2014/05/01 职场文书
主持人演讲稿
2014/05/13 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
创先争优活动个人总结
2015/03/04 职场文书
创业计划书之面包店
2019/09/17 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android