Jeditable插件开发

发布于 2024-12-12 23:03:41 字数 288 浏览 3 评论 0原文

使用 Jquery 插件 Jeditable 创建表单。我一直在尝试将 charcount 插件和自定义演示页面中的自动增长结合起来: http://www.appelsiini.net/projects/jeditable/custom.html。我对 jquery 插件不够聪明,无法弄清楚。我不确定我是否可以简单地拥有多个插件,或者我实际上是否需要找出合并代码的方法?有什么指点吗?

Using Jquery plugin Jeditable to create a form. I have been hacking around trying to combine the charcount plugin and the autogrow from the custom demo page here: http://www.appelsiini.net/projects/jeditable/custom.html. I'm not clever enough with jquery plugins to figure it out. I am not sure if I can simply have multiple plugins or do I actually need to figure out a way to merge the code? Any pointers?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

西瑶 2024-12-19 23:04:46

如果您查看 jedtable-charcounter (http://www.appelsiini.net/projects/jeditable/jquery.jeditable.charcounter.js) 和 jeditable-autogrow (http://www.appelsiini.net/ items/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
        }
  });

If you look at the source code for both jedtable-charcounter (http://www.appelsiini.net/projects/jeditable/jquery.jeditable.charcounter.js) and jeditable-autogrow (http://www.appelsiini.net/projects/jeditable/jquery.jeditable.autogrow.js), you can see that they're basically the same.

I think you can combine like this:

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

Make sure you reference both plugins.

Then you can call the jQuery like this:

$(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
        }
  });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文