jquery mobile 实现自定义confirm确认框效果的简单实例
投稿：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+swiper组件实现时间轴滑动年份tab切换效果
2021-05-05
jQuery实现全部购物车功能实例
2021-05-05
jQuery解决添加元素后不执行原有事件的方法
2021-05-05
详解jQuery的拷贝对象
2021-05-05
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版
-
返回首页
2006-2024 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
