jquery mobile 实现自定义confirm确认框效果的简单实例


Posted in Javascript onJune 17, 2016

类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js

if(confirm('确定删除吗?'))

{

//执行代码

}

这种效果比较丑,使用jquery mobile优化一下

需要引用的文件:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Scripts/Mobile/jquery.mobile-1.4.0.min.css" rel="stylesheet" />
<script src="~/Scripts/Mobile/jquery.mobile-1.4.0.min.js"></script>

效果如下:

jquery mobile 实现自定义confirm确认框效果的简单实例

function UpdateStatus() {
  var popupDialogId = 'popupDialog';
  $('<div data-role="popup" id="' + popupDialogId + '" data-confirmed="no" data-transition="pop" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="min-width:216px;max-width:500px;"> \
          \
          <div role="main" class="ui-content">\
            <h3 class="ui-title" style="color:#fff; text-align:center;margin-bottom:15px">确认关闭任务吗?</h3>\
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionConfirm" data-rel="back" style="background: #1784fd;width: 33%;border-radius: 5px;height: 30px;line-height: 30px;padding: 0;font-size: .9em;margin: 0 0 0 12%;font-weight: 100;">确定</a>\
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b optionCancel" data-rel="back" data-transition="flow" style="background: #DBDBDB;width: 33%;border-radius: 5px;height: 30px;line-height: 30px;padding: 0;font-size: .9em;margin: 0 0 0 5%;font-weight: 100;color: #333;text-shadow: none;">取消</a>\
          </div>\
        </div>')
    .appendTo($.mobile.pageContainer);
  var popupDialogObj = $('#' + popupDialogId);
  popupDialogObj.trigger('create');
  popupDialogObj.popup({
    afterclose: function (event, ui) {
      popupDialogObj.find(".optionConfirm").first().off('click');
      var isConfirmed = popupDialogObj.attr('data-confirmed') === 'yes' ? true : false;
      $(event.target).remove();
      if (isConfirmed) {
        //这里执行确认需要执行的代码
      }
    }
  });
  popupDialogObj.popup('open');
  popupDialogObj.find(".optionConfirm").first().on('click', function () {
    popupDialogObj.attr('data-confirmed', 'yes');
  });
}

以上就是小编为大家带来的jquery mobile 实现自定义confirm确认框效果的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
聊一聊JS中this的指向问题
Jun 17 #Javascript
json实现添加、遍历与删除属性的方法
Jun 17 #Javascript
confirm确认对话框的实现方法总结
Jun 17 #Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 #Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 #Javascript
基于JQuery实现分隔条的功能
Jun 17 #Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 #Javascript
You might like
PHP实现获取域名的方法小结
2014/11/05 PHP
php实现Mysql简易操作类
2015/10/11 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python @classmethod 的使用场合详解
2019/08/23 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
银行介绍信范文
2014/01/10 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
毕业酒会致辞
2015/07/29 职场文书
队名及霸气口号大全
2015/12/25 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
如何使用python包中的sched事件调度器
2022/04/30 Python