快捷導航

jquery mobile 實現(xiàn)自定義confirm確認框效果的簡單實例

更新時間：2016年06月17日 10:51:29 投稿：jingxian

下面小編就為大家?guī)硪黄猨query mobile 實現(xiàn)自定義confirm確認框效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

類似刪除的效果，在執(zhí)行之前，一般需要添加確認對話框，點確認的話執(zhí)行，取消按鈕就不執(zhí)行，傳統(tǒng)的js

if(confirm('確定刪除嗎？'))

{

//執(zhí)行代碼

}

這種效果比較丑，使用jquery mobile優(yōu)化一下

需要引用的文件：

效果如下：

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">確認關(guān)閉任務(wù)嗎？</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) {
        //這里執(zhí)行確認需要執(zhí)行的代碼
      }
    }
  });
  popupDialogObj.popup('open');
  popupDialogObj.find(".optionConfirm").first().on('click', function () {
    popupDialogObj.attr('data-confirmed', 'yes');
  });
}

以上就是小編為大家?guī)淼膉query mobile 實現(xiàn)自定義confirm確認框效果的簡單實例全部內(nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: