使用jeditable和autogrow的問題

我使用jQuery和CakePHP在Web項目上工作。我使用jeditable作爲就地編輯插件。對於textareas，我使用autogrow plugin來擴展它。使用jeditable和autogrow的問題

嗯，我有兩個問題：

首先，自動增長不只是在Firefox上運行，而不是在IE，Safari瀏覽器，歌劇和鉻。
其次，我需要jeditable，當其完成後顯示編輯組件的回調事件，重新計算scrollbar

我不是那麼熟悉JavaScript，因此我不能擴展/糾正這種兩個庫我自己一個人。有沒有人使用另一個js庫進行就地編輯與自動生長textareas（沒有像TinyMCE完整的編輯器，我需要一個純文本解決方案）？

我還發現Growfield，它將適用於其他瀏覽器，但沒有jeditable整合...

（對不起，我的英語）

2008-09-30 Roman Ganz

使用自動增長與我沒有看到任何問題在任何瀏覽器中都可以使用，但這裏使用了可擴展的Growfield。它的工作原理與Autodesk的可插入插件相同。您可以創建一個特殊的可輸入類型，只需將.growfield（）應用於它。必要的javascript在下面，演示可以是found here。

<script type="text/javascript"> 
/* This is the growfield integration into jeditable 
    You can use almost any field plugin you'd like if you create an input type for it. 
    It just needs the "element" function (to create the editable field) and the "plugin" 
    function which applies the effect to the field. This is very close to the code in the 
    jquery.jeditable.autogrow.js input type that comes with jeditable. 
*/ 
$.editable.addInputType('growfield', { 
    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); 
     } 
     // will execute when textarea is rendered 
     textarea.ready(function() { 
      // implement your scroll pane code here 
     }); 
     $(this).append(textarea); 
     return(textarea); 
    }, 
    plugin : function(settings, original) { 
     // applies the growfield effect to the in-place edit field 
     $('textarea', this).growfield(settings.growfield); 
    } 
}); 

/* jeditable initialization */ 
$(function() { 
    $('.editable_textarea').editable('postto.html', { 
     type: "growfield", // tells jeditable to use your growfield input type from above 
     submit: 'OK', // this and below are optional 
     tooltip: "Click to edit...", 
     onblur: "ignore", 
     growfield: { } // use this to pass options to the growfield that gets created 
    }); 
})

來源

2008-09-30 18:38:19

謝謝亞歷克斯！ Your growfield-Plugin的作品。在此期間，我設法解決了另一個問題。我又拿了一個Scroll-Library，並將一個回調事件插入jeditable-plugin。這並不難，因爲我認爲...

來源

2008-10-01 10:33:55

knight_killer：你是什麼意思Autogrow只適用於FireFox？我剛剛測試過FF3，FF2，Safari，IE7和Chrome。對所有人都適用。我沒有Opera可用。

亞歷克斯：是否有下載鏈接爲您Growfield Jeditable自定義輸入？我想從我的博客鏈接它。這真的太棒了！

來源

2008-10-02 08:56:22

我不知道確切的錯誤是什麼......當我點擊應該可編輯的元素時，IE7中的自動增長庫中出現javascript-錯誤。 Texarea正在展示，但沒有自動增長。在其他瀏覽器上，我沒有收到錯誤信息... – 2008-10-03 13:26:32

Mika Tuupola：如果您對我的修改過的jeditable感興趣（添加了兩個回調事件），您可以get it here。如果您能夠在正式版本中提供這些活動，那將是非常棒的！

這是我的（簡化的）集成代碼。我將這些事件用於更多，然後僅用於懸停效果。這只是一個用例。

$('.edit_memo').editable('/cakephp/efforts/updateValue', { 
    id   : 'data[Effort][id]', 
    name   : 'data[Effort][value]', 
    type   : 'growfield', 
    cancel  : 'Abort', 
    submit  : 'Save', 
    tooltip  : 'click to edit', 
    indicator  : "<span class='save'>saving...</span>", 
    onblur  : 'ignore', 
    placeholder : '<span class="hint">&lt;click to edit&gt;</span>', 
    loadurl  : '/cakephp/efforts/getValue', 
    loadtype  : 'POST', 
    loadtext  : 'loading...', 
    width   : 447, 
    onreadytoedit : function(value){ 
    $(this).removeClass('edit_memo_hover'); //remove css hover effect 
    }, 
    onfinishededit : function(value){ 
    $(this).addClass('edit_memo_hover'); //add css hover effect 
    } 
});

來源

2008-10-03 13:46:54

使用jeditable和autogrow的問題

回答

相關問題