14

私はこのプラグインを気に入っていますが、現実には、ほとんどの人はテキストをクリックして編集できることに最初は気づきません。

理想的には、テキストの横にボタンを追加するか、ユーザーにははっきりと見えるが ajax 経由で送信されることのない単純な [編集] リンクを追加するとよいでしょう。

何か案は？

4

5 に答える 5

12

jEditable フィールドをクリックするボタンにイベントを追加するだけです。

<span class="jeditable">jEditable field</span>
<input type="button" class="jeditable-activate" value="Edit me!" />

そしてjQueryでは：

$('.jeditable-activate').click(function() {
    $(this).prev().click();
});

それはそれを行う必要があります。結局、それはユーザーが要素をクリックするのと同じことです。

于 2010-01-05T21:59:12.017 に答える
3

「編集」リンクには、

<a href="#" onclick="$('.editable_textarea').trigger('click');>edit</a>
于 2011-01-26T20:09:21.193 に答える
3

Sam3kのコメントは役に立ちますが、完璧ではありません。これにより、編集可能なフィールド/ボタンを非表示にする前に、編集ボタンが再表示されます。これを解決するために、代わりにカスタムのonCancelイベントを追加しました。

最初に、新しいイベントのデフォルトを$ .fn.editable.defaultsに追加しました（つまり、onCancel：{}）

次に、jquery.jeditable.jsの2つの場所に次のコードを追加しました：（1）エスケープを押すとき、および（2）キャンセルボタンを押すとき。

if ($.isFunction(settings.oncancel)) { settings.oncancel.apply(self); }

それでおしまい。

    $("#emailRow span").editable(url, {
        type: 'text',
        cancel: 'Cancel',
        submit: 'OK',
        onCancel: function() {
            $("#emailEditLink").show();
        }
    });
于 2010-05-05T18:50:36.857 に答える
0

オプションを jeditable に追加して、送信ボタンを表示することができます。

$('#editable_field).editable(url...,
{//options
         type: 'text',
         width: 230, /*input field width*/
         style: 'display: inline-block;width:260px', /*form width including input*/
         submit: '<span class="inlineEditSave"><img src="/beta/resource/images/icon/icon_save_check.png"/</span>',                      
...

保存アイコン付きの送信スパンが jeditable フォームに追加されます

于 2012-02-17T00:41:56.157 に答える
0

Jeditable 1.6.0onblurでは関数にすることができます:

            } else if ($.isFunction(settings.onblur)) {
                input.blur(function(e) {
                    settings.onblur.apply(self, [input.val(), settings]);
                });
            } else {

したがって、ユーザーが編集領域の外をクリックしたときに編集を非表示にする場合は、その機能をコールバックとして設定し、ユーザーがキャンセルを押したときにのみ非表示にする場合はonreset、コールバックで設定を設定します。

于 2013-10-30T10:47:20.230 に答える