富贵资源网 Design By www.hznty.com
类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js
if(confirm('确定删除吗?')) { //执行代码 }
这种效果比较丑,使用jquery mobile优化一下
需要引用的文件:
<script src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">
<link href="~/Scripts/Mobile/jquery.mobile-1.4.0.min.css" rel="stylesheet" />
<script src="/UploadFiles/2021-04-02/jquery.mobile-1.4.0.min.js">
效果如下:
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' ".optionConfirm").first().on('click', function () { popupDialogObj.attr('data-confirmed', 'yes'); }); }
以上就是小编为大家带来的jquery mobile 实现自定义confirm确认框效果的简单实例全部内容了,希望大家多多支持~
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...