0

問題は、jEditable 要素内のボタンを jQuery UI ボタン​​にするにはどうすればよいかということです。理想的には$(':button').button()、jEditable フォーム要素が読み込まれた後に呼び出す必要があります。コードを見ると、文書化されていない 4 つのコールバック関数: onedit、onsubmit、が適切なタイミングでコールバックしonresetてonerrorいないようです。

どうすればこれを達成できますか？

編集：

コード例は次のとおりです: http://jsfiddle.net/EU8ce/1/

editable 要素のボタンを jQuery UI ボタン​​にしたいと思います。

4

2 に答える 2

3

jEditable ソースを簡単に見てみると (私はプラグインに詳しくありません)、この場合に役立つ唯一のフック (コールバック) はonedit、フォームがレンダリングされる前に呼び出される です。プラグインは、レンダリング前およびレンダリング後にonbeforeeditandonaftereditまたは something を実際にサポートする必要があります。しかし、そうではありません。

そのため、その機能を非常に簡単に追加できます。または、単純なクリック ハンドラで回避します。

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

最初に呼び出すため、最初にクリック ハンドラーがバインドされるため、後続のハンドラーは後で実行されます。これはレンダリング後のコールバックの効果があり、そこでコードeditable()を実行できます。button()

于 2011-07-22T09:00:49.570 に答える
2

これは世界で最もクリーンなものではないかもしれませんが、うまくいきます: カスタムタイプを作成しました (標準タイプをミラーリングしますが、ボタンで button() を呼び出します)

$.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-22T09:08:45.767 に答える