与jEditables一起使用jQuery UI按钮

问题是，如何在jEditable元素中设置jQuery UI按钮？理想情况下，我想在加载jEditable表单元素后调用$(':button').button()。查看代码，4种无证回调函数：onedit,onsubmit,onreset,onerror似乎没有在正确的时间回拨。与jEditables一起使用jQuery UI按钮

任何想法，我可以如何实现这一目标？

编辑：

这里的示例代码：http://jsfiddle.net/EU8ce/1/

我想在可编辑元素的按钮是jQuery UI的按钮。

来源

2011-07-22 William Niu

您可以发布您的代码/小提琴到目前为止吗？ –

@尼科拉，请参阅包含jsfiddle的例子。 –

从jEditable源代码（我对插件不太熟悉）的简要介绍来看，在这种情况下唯一有用的钩子（回调函数）是onedit，它在表单呈现之前调用。该插件应该真的支持onbeforeedit和onafteredit什么的，用于预渲染和后渲染。但事实并非如此。

因此，您可以非常轻松地添加该功能。或用简单的点击处理程序解决方法是：

http://jsfiddle.net/EU8ce/3/

既然你叫editable()首先，它会先绑定单击处理程序，因此后续处理会后执行，这有是一个效果渲染后回调，你可以在那里执行你的代码button()。

来源

2011-07-22 09:00:49 davin

这是一个美好的解决方案，我的问题。谢谢！我有这个“为什么没有想到这种”感觉:) –

这可能不是世界上最干净的东西，但它的工作：我创建了一个自定义类型（这反映了标准型，但呼吁按钮按钮（）

$.editable.addInputType('example',{ 
    element : function(settings, original) { 
        var input = $('<input />'); 
        if (settings.width != 'none') { input.width(settings.width); } 
        if (settings.height != 'none') { input.height(settings.height); } 
         input.attr('autocomplete','off'); 
        $(this).append(input); 
        return(input); 
       }, 

    buttons : function(settings, original) { 
        var form = this; 
        if (settings.submit) { 
         /* if given html string use that */ 
         if (settings.submit.match(/>$/)) { 
          var submit = $(settings.submit).click(function() { 
           if (submit.attr("type") != "submit") { 
            form.submit(); 
           } 
          }); 
         /* otherwise use button with given string as text */ 
         } else { 
          var submit = $('<button type="submit" />').button(); 
          submit.html(settings.submit);        
         } 
         $(this).append(submit); 
        } 
        if (settings.cancel) { 
         /* if given html string use that */ 
         if (settings.cancel.match(/>$/)) { 
          var cancel = $(settings.cancel); 
         /* otherwise use button with given string as text */ 
         } else { 
          var cancel = $('<button type="cancel" />').button(); 
          cancel.html(settings.cancel); 
         } 
         $(this).append(cancel); 

         $(cancel).click(function(event) { 
          //original.reset(); 
          if ($.isFunction($.editable.types[settings.type].reset)) { 
           var reset = $.editable.types[settings.type].reset;                 
          } else { 
           var reset = $.editable.types['defaults'].reset;         
          } 
          reset.apply(form, [settings, original]); 
          return false; 
         }); 
        } 
       } 

}); 
$("#edit").editable("someurl", { 
    type: "example", 
    submit: "OK", 
    cancel: "Cancel" 
}); 


$('#button').button();

小提琴这里：http://jsfiddle.net/EU8ce/4/

来源

2011-07-22 09:08:45

感谢这！它的工作原理，但比我想要做的稍多一些代码：D –

与jEditables一起使用jQuery UI按钮

回答

相关问题