jQuery deferredを使い、javascriptの confirm をカスタマイズ 4

jQuery deferredを使い、javascriptの confirm をカスタマイズ 3の続編です。

使っていたjsのmixinにバグがあったので、素直に、$.extend を使うように変更しました。また、optionのdefaultの構造も変更しました。

DEMO

confirm

alert

textarea

プラグイン

confirmDialog.js

alertDialog.js

使い方

$(function(){
  //
  // confirm
  //
  var hoge = new confirmDialog();
  var huga = new confirmDialog({
    addedClass     : 'huga',
    title          : 'タイトル',
    contents       : '「決定」か「キャンセル」でお答え下さい',
    bottomContents : '<div>テキストを表示出来ます。</div>',
    buttonNoText   : 'キャンセル',
    buttonYesText  : '決定',
    afterClickYes : function(){
      $('#demo textarea').val($('#demo textarea').val()+'#confirm2 clickYes (Option)\n');
    },
    afterClickNo  : function(){
      $('#demo textarea').val($('#demo textarea').val()+'#confirm2 clickNo (Option)\n');
    },
    afterOpen   : function(self){
      $('#demo textarea').val($('#demo textarea').val()+'#confirm2 after open (Option)\n');
    },
    beforeClose : function(self){
      $('#demo textarea').val($('#demo textarea').val()+'#confirm2 before close (Option)\n');
    }
  });
  $('#confirm1').on('click',function() {
    $('#demo textarea').val($('#demo textarea').val()+'#confirm1 before open\n');
    hoge.open().then(function(){
      $('#demo textarea').val($('#demo textarea').val()+'#confirm1 after close Yes\n');
    },function(){
      $('#demo textarea').val($('#demo textarea').val()+'#confirm1 after close No\n');
    });
  });
  $('#confirm2').on('click',function() {
    $('#demo textarea').val($('#demo textarea').val()+'#confirm2 before open\n');
    huga.open().then(function(){
      $('#demo textarea').val($('#demo textarea').val()+'#confirm2 after close Yes\n');
    },function(){
      $('#demo textarea').val($('#demo textarea').val()+'#confirm2 after close No\n');
    });
  });

  //
  // alert
  //
  var neko = new alertDialog();
  var inu = new alertDialog({
    addedClass     : 'huga',
    title          : 'タイトル',
    contents       : 'コンテンツテキスト',
    bottomContents : '<div>テキストを表示出来ます。</div>',
    buttonOkText   : '確認',
    afterClickOk  : function(){
      $('#demo textarea').val($('#demo textarea').val()+'#alert2 clickOk (Option)\n');
    },
    afterOpen   : function(self){
      $('#demo textarea').val($('#demo textarea').val()+'#alert2 after open (Option)\n');
    },
    beforeClose : function(self){
      $('#demo textarea').val($('#demo textarea').val()+'#alert2 close (Option)\n');
    }
  });
  $('#alert1').on('click',function() {
    $('#demo textarea').val($('#demo textarea').val()+'#alert1 before open\n');
    neko.open().then(function(){
      $('#demo textarea').val($('#demo textarea').val()+'#alert1 after close\n');
    });
  });
  $('#alert2').on('click',function() {
    $('#demo textarea').val($('#demo textarea').val()+'#alert2 before open\n');
    inu.open().then(function(){
      $('#demo textarea').val($('#demo textarea').val()+'#alert2 after close Ok\n');
    });
  });
});

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。


  1. KATOON.NET
  2. WEB
  3. jQuery deferredを使い、javascriptの confirm をカスタマイズ 4