與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按鈕

回答

相關問題