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

 更新时间:2016年06月17日 10:51:29   投稿:jingxian  
下面小编就为大家带来一篇jquery mobile 实现自定义confirm确认框效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的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>

效果如下:

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确认框效果的简单实例全部内容了,希望大家多多支持脚本之家~

相关文章

  • 基于jquery的气泡提示效果

    基于jquery的气泡提示效果

    气泡默认出现在触发对象的正上方,当触发对象在边上时,气泡会有一部分出现在窗口外面
    2010-05-05
  • jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)

    jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)

    这篇文章主要介绍了jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果,具有穿越iframe的功能,涉及jQuery的EasyUI插件属性操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • jQuery+slidereveal实现的面板滑动侧边展出效果

    jQuery+slidereveal实现的面板滑动侧边展出效果

    WEB开发中有时需要在页面上设置一个控制面板,默认是不显示的,当用户有需要时可以通过按钮触发调用面板展示。常见的有页面侧边滑出面板效果。本文将使用jQuery插件并结合实例给大家介绍一下面板滑动展示效果。
    2015-03-03
  • 基于编写jQuery的无缝滚动插件

    基于编写jQuery的无缝滚动插件

    这篇文章主要介绍了基于编写jQuery的无缝滚动插件实现代码,需要的朋友可以参考下
    2014-08-08
  • jQuery实现可高亮显示的二级CSS菜单效果

    jQuery实现可高亮显示的二级CSS菜单效果

    这篇文章主要介绍了jQuery实现可高亮显示的二级CSS菜单效果,涉及基本的jquery鼠标事件及页面元素样式动态改变技巧,需要的朋友可以参考下
    2015-09-09
  • 前端jQuery复制文本到剪贴板功能实现

    前端jQuery复制文本到剪贴板功能实现

    这篇文章主要介绍了前端如何使用jQuery实现点击“复制”按钮时,获取并复制父级元素下子元素的文本HTML代码的功能,文中给出了实现的详细代码,需要的朋友可以参考下
    2025-01-01
  • 浅谈jQuery事件绑定原理

    浅谈jQuery事件绑定原理

    这篇文章主要介绍了浅谈jQuery事件绑定原理,并做了简单分析,然后用实例来展示,需要的朋友可以参考下
    2015-01-01
  • jquery实现简单的表单验证

    jquery实现简单的表单验证

    这篇文章主要介绍了jquery实现简单的表单验证,思路大概是先为每一个required添加必填的标记,用each()方法来实现,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jquery 简单导航实现代码

    jquery 简单导航实现代码

    jquery简单导航实现代码,需要的朋友可以参考下。
    2009-09-09
  • jquery 框架使用教程 AJAX篇

    jquery 框架使用教程 AJAX篇

    正好项目中准备使用thickbox,于是干脆抛弃prototype.js,看起jquery.js了。JQuery确实不错,体积比Prototype小了许多,而且使用起来更方便更灵活。有人说Prototype像JAVA,正统;而JQuery像Ruby,灵活,更趋于OOP。
    2009-10-10

最新评论