Question

我使用 X-Editable 对我的数据进行内联编辑 - http://vitalets.github.io/x-editable/docs.html

这一切都运行正常 - 但现在我想做到这一点，所以它在较小的屏幕上反应更好。使用＆＃34; 内嵌＆＃34;，任何宽度低至600px的东西看起来都不错。但是，只要你低于它 - 它开始移动其他列。解决此问题的唯一方法是从＆＃34; 内嵌＆＃34;更改它到＆＃34; 弹出＆＃34;。我想出了：

$(document).ready( function() { 

    $.fn.editable.defaults.mode = 'inline';

    if ($(window).width() < 600) {
        console.log("Changing to popup");
        $.fn.editable.defaults.mode = 'popup';
    }

    $('.text-editor-num').editable( {
        type: 'number',
        url: '/cgi-bin/links/booking/admin.cgi',
        params: { action: "reservation_edit_item" }
    }); 

    $(window).resize(function() { 
        if ($(window).width() < 600) {
            console.log("Changing to popup");
            $.fn.editable.defaults.mode = 'popup';
        } else {
            console.log("Changing to inline");
            $.fn.editable.defaults.mode = 'inline';
        }
    });

});

初始加载部分（第3到8行）工作正常。但是，如果您调整窗口大小（即在移动设备上，从纵向更改为横向），这会使其混乱。我试图通过以下方式解决这个问题：

    $(window).resize(function() { 
        if ($(window).width() < 600) {
            console.log("Changing to popup");
            $.fn.editable.defaults.mode = 'popup';
        } else {
            console.log("Changing to inline");
            $.fn.editable.defaults.mode = 'inline';
        }
    });

..然后会更新我们显示X-editable位的方式。但是，只是保持原始设置。从我收集的内容来看，我需要重新调整editable()对象 - 但我不确定如何做到这一点。任何建议都非常感谢！

我也尝试过这种方法：

  $('.text-editor-num').editable('option','mode','popup');

......但无济于事

谢谢！

Answer 1

您需要首先删除x-editable。将您调整大小的功能更改为：

 $(window).resize(function() { 
    if ($(window).width() < 600) {
        console.log("Changing to popup");
        $('.text-editor-num').editable('destroy');
        $('.text-editor-num').editable({
            mode: 'popup',
        });
    } else {
        console.log("Changing to inline");
        $('.text-editor-num').editable('destroy');
        $('.text-editor-num').editable({
            mode: 'inline',
        });
    }
});

X-editable，响应式地从弹出窗口更改为内联

1 个答案: