Home > Web Front-end > JS Tutorial > jquery plug-in jquery.confirm pops up confirmation message_javascript skills

jquery plug-in jquery.confirm pops up confirmation message_javascript skills

WBOY
Release: 2016-05-16 15:24:15
Original
1695 people have browsed it

This article introduces the implementation method of the plug-in jquery.confirm pop-up confirmation message. It has certain reference value and is specially shared with you for your reference. The specific content is as follows

Realization effect:

Specific code:

1. Plug-in default parameters

// 默认参数
$.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
}
Copy after login

2. Plug-in structure and style
The dom structure of jquery.confirm is:

<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>
Copy after login

The default plug-in style is based on css.3. The default plug-in style address is default. The plug-in style is only rendered once and will not be rendered multiple times. The style of the first time the plug-in is used shall prevail.

3. How to use

// 打开确认框
$.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("你单击了取消按钮!");
 }
});
Copy after login

I hope this article will be helpful to everyone learning jquery programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template