使用jeditable和autogrow时出现的问题

我没有看到在任何浏览器中使用Autogrow和Jeditable有任何问题,但是这里是一个使用Jeditable的Growfield的实现。它的工作原理与Jeditable的Autogrow插件的工作原理大致相同。您为jeditable创建了一个特殊的输入类型,只需对其应用.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
    });
})

骑士杀手 :什么意思?Autogrow只适用于Firefox?我刚刚测试了FF3,FF2,Safari,IE7和Chrome。对他们都很好。我没有歌剧。

亚历克斯 :您的growfield jeditable自定义输入是否有下载链接?我想从我的博客链接它。真是太棒了!

米卡图波拉 :如果您对我修改过的jeditable(添加了两个回调事件)感兴趣,可以 get it here . 如果你能以官方版本的Jeditable提供这些活动,那就太好了!

这是我的(简化的)集成代码。我更多地使用事件,而不仅仅是用于悬停效果。这只是一个用例。

$('.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
  }
});

谢谢你,亚历克斯! 您的Growfield插件工作正常。 与此同时,我设法解决了另一个问题。我带走了另一个 Scroll-Library 并将一个回调事件入侵到可编辑的插件中。不像我想的那么难…