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 相关文章推荐
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
Javascript文本框脚本实现方法解析
Oct 30 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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
世界上第一台立体声收音机
2021/03/01 无线电
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python hook监听事件详解
2018/10/25 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
销售人员自我评价怎么写
2013/09/19 职场文书
社会调查研究计划书
2014/05/01 职场文书
python实现层次聚类的方法
2021/11/01 Python