0

jEditable プラグインと次のコードを使用して、ページ上の一連の設定のオンとオフを切り替えています。

$(document).ready(function() {
$('.editable_select').editable(''http://someexamplepage.com/save.php', { 
    indicator: '<img src="/images/spinner.gif">',
    data   : " {'&#x2713;':'&#x2713;','&#x2717;':'&#x2717;'} ",
    tooltip : 'Click to Edit',
    type   : 'select',
    onblur : 'submit',
    style  : 'inherit'
    });
});

そして、これをhtmlで：

<b class="editable_select" id="setting1" style="display:inline">&#x2713;</b>

オンを示すチェックマークをクリックすると、オンのチェックマークとオフの X が表示されたドロップダウン メニューが生成され、ユーザーはそれを選択できます。私が好むのは、チェック/Xをクリックしてドロップダウンを開くのではなく、現在のオンまたはオフの設定をsave.phpファイルに送信することです。次に、save.php ファイルを作成して反対の値を返すようにします。これにより、編集ウィンドウを開くことなく、クリックするだけで 2 つの値を切り替えることができます。次のコードを試しました：

$(document).ready(function() {
$('.editable_select').editable('http://someexamplepage.com/save.php', { 
    indicator: '<img src="/images/spinner.gif">',
    tooltip : 'Click to Edit',
    onclick : 'submit',
    style  : 'inherit'
});

});

しかし、テキストをクリックすると、まだ小さな編集ウィンドウが開きますが、これは望ましくありません。私はまだ JavaScript と jQuery に慣れていないので、どんな助けも大歓迎です!

4

1 に答える 1

0

これにはプラグインを使用しませんが、readyイベントで実行する非常に単純な jQuery を使用します。

現在の状態を DOM のデータ属性として含めるので、タグを次のように変更します。

<b class="editable_select" id="[ID FOR ITEM]" data-state="checked">&#2713;</b>

次に、次のようにします。

$(function(){
    var update_dom = function(data){
        var item_id = data.id;
        var state;
        data.state === 'checked' ? state = '✓' : state = '✗';
        $('#'+item_id).data('state', data.state).html(state);
    };

    var selected = function(evt){
        var item_id = $(this).attr('id');
        var state = $(this).data('state');
        $.ajax({
            url: PATH_TO_SCRIPT, 
            data: {id: item_id, state: state},
            type: "POST",
            success: update_dom
        });
    }

    $('.editable_select').click(selected);
});

clickこれにより、 のクラスを持つすべてのものにイベントがバインドされますeditable_select。それをクリックするとselected、DOM からデータを取得する関数が呼び出され、スクリプトが呼び出されます。スクリプトが完了すると、応答が返されます (ここでは JSON が適しています)。successハンドラーは DOM を更新し、状態をユーザーに表示します。

于 2013-01-15T19:37:04.660 に答える