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

 更新时间:2015年12月22日 09:22:19   作者:黄聪  
这篇文章介绍了插件jquery.confirm弹出确认消息的实现方法,感兴趣的小伙伴们可以参考一下

本文为大家介绍了插件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程序设计有所帮助。

相关文章

  • 基于JS实现蜘蛛侠动作游戏的示例代码

    基于JS实现蜘蛛侠动作游戏的示例代码

    这篇文章主要介绍了如何利用JavaScript实现简单的蜘蛛侠动作游戏,文中的示例代码讲解详细,对我们学习JavaScript游戏开发有一定的帮助,需要的可以参考一下
    2022-06-06
  • es6新特性之 class 基本用法解析

    es6新特性之 class 基本用法解析

    这篇文章主要介绍了es6新特性之 class 基本用法 ,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • JavaScript中常用的字符串方法函数操作方法总结

    JavaScript中常用的字符串方法函数操作方法总结

    这篇文章主要介绍了JavaScript中所有的字符串函数操作方法整理汇总,包括字符串的长度、连接、查找、截取、替换、分隔、转换等处理方法,以及网址中获取文件名等等,需要的朋友可以参考下
    2023-12-12
  • js select实现省市区联动选择

    js select实现省市区联动选择

    这篇文章主要为大家详细介绍了js select实现省市区联动选择效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • javascript如何实现create方法

    javascript如何实现create方法

    这篇文章主要介绍了javascript如何实现create方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • 用JavaScript玩转游戏物理(一)运动学模拟与粒子系统

    用JavaScript玩转游戏物理(一)运动学模拟与粒子系统

    也许,三百年前的艾萨克·牛顿爵士(Sir Issac Newton, 1643-1727)并没幻想过,物理学广泛地应用在今天许多游戏、动画中。
    2010-06-06
  • javascript浏览器用户代理检测脚本实现方法

    javascript浏览器用户代理检测脚本实现方法

    下面小编就为大家带来一篇javascript浏览器用户代理检测脚本实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 前端实现(excel)xlsx文件预览的详细步骤

    前端实现(excel)xlsx文件预览的详细步骤

    excel的预览库有不少,也都很强大,但是能很简单实现,下面这篇文章主要给大家介绍了关于前端实现(excel)xlsx文件预览的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • 小程序开发之云函数的使用教程详解

    小程序开发之云函数的使用教程详解

    云函数是部署在云端的函数,他和小程序本地的函数存在很大的区别。本文将通过示例详细为大家介绍如何在小程序开发中使用云函数,需要的可以参考一下
    2022-03-03
  • js监听键盘事件示例代码

    js监听键盘事件示例代码

    本文为大家详细介绍下使用js如何监听键盘事件,具体实现代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-07-07

最新评论