Jeditableプラグインの開発

Question

Jqueryプラグインを使用するJeditableを使用してフォームを作成する。私はcharcountプラグインとカスタムデモページからの自動拡張を組み合わせようとしています：http://www.appelsiini.net/projects/jeditable/custom.htmlをハッキングしています。私はそれを理解するためにjqueryプラグインで十分に巧妙ではない。私は単純に複数のプラグインを持つことができないのか、実際にコードをマージする方法を見つけ出す必要があるのか​​分かりません。すべてのポインタ？

Answer 1

あなたはjedtable-charcounter（http://www.appelsiini.net/projects/jeditable/jquery.jeditable.charcounter.js）とjeditable-自動拡張（HTTPの両方のソースコードを見てみると：// WWW。 appelsiini.net/projects/jeditable/jquery.jeditable.autogrow.js）、それらが基本的に同じであることがわかります。

私はあなたがこのように組み合わせることができると思います。

$.editable.addInputType('hybrid', { 
     element : function(settings, original) { 
      var textarea = $('<textarea />'); 
      if (settings.rows) { 
       textarea.attr('rows', settings.rows); 
      } else { 
       textarea.height(settings.height); 
      } 
      if (settings.cols) { 
       textarea.attr('cols', settings.cols); 
      } else { 
       textarea.width(settings.width); 
      } 
      $(this).append(textarea); 
      return(textarea); 
     }, 
     plugin : function(settings, original) { 
      $('textarea', this).charCounter(settings.charcounter.characters, settings.charcounter); 
      $('textarea', this).autogrow(settings.autogrow); 
     } 
    }); 

あなたは両方のプラグインを参照していることを確認します。

次に、あなたは、このようにjQueryを呼び出すことができます。

$(document).ready(function() { 
    $(".hybrid").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", { 
     type  : "hybrid", 
     submit : 'OK', 
     tooltip : "Click to edit...", 
     onblur : "ignore", 
     charcounter : { 
     characters : 60 
     }, 
     autogrow : { 
      lineHeight : 16, 
      minHeight : 32 
     } 
    });