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

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

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  : '決定',
    callbakcs      :{
      clickYes : function(){
        $('#demo textarea').val($('#demo textarea').val()+'#confirm2 clickYes (Option)\n');
      },
      clickNo  : 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');
      console.log('');
    },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   : '確認',
    callbakcs      :{
      clickOk  : 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 before 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');
    });
  });
});

注意

バグがありましたので、jQuery deferredを使い、javascriptの confirm をカスタマイズ 4を参照してください。

コメント

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

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

同じカテゴリの前後の記事


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