Question

我想了解如何在编辑过程中最好地处理'模糊'非必要的UI元素。为了更清楚地解释这一点，我制作了一个图表：

enter image description here

我们的Web应用程序使用JQuery对话框窗口来查看/编辑数据。我们的大多数数据都是在JQuery手风琴中分类的，这些手风琴位于可拖动的窗口内。

当用户点击手风琴标题的编辑按钮时，除了正在编辑的手风琴内容外，我们希望屏蔽页面上的所有内容。

尝试过像“阻止用户界面”（http://www.malsup.com/jquery/block/）这样的插件，我们无法实现这一点。使用“Block UI”，我们只能“模糊”整个UI并显示模态消息......

很明显，我们正在寻找的功能可能无法通过这种方式实现。

基本上，当用户在给定DIV中编辑表单详细信息时，在用户保存或放弃更改之前，所有其他外部元素都不能是“可单击的”。（理想情况下就像右边的窗口一样）

对于实施此类功能的最佳方式有任何建议吗？

Answer 1

jQuery Tools公开应该做你需要的：http://jquerytools.github.io/demos/toolbox/expose/index.html

在download page上，你只能选择公开，这是0.6 Kb gzip。

Answer 2

您可以按预期覆盖div，然后访问您想要激活的元素，并使用相对定位和z-index将它们移到前面。

假设您只想访问button元素：

$('<div />').css({
    background: '#000000',
    opacity: 0.5,
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    zIndex: '10'
}).appendTo('body');
$('button').css({
    position: 'relative',
    zIndex: 20
});

<强> Here's an example fiddle.

Answer 3

注意：这篇文章假设你想要使用Block UI，或者你至少可以从其防止所有用户交互（包括键盘导航）的关键能力中获益;你表达问题的方式（以及其他人似乎回答它的方式）就是你要阻止人们在其他地方点击。这是一个重要的区别！

您可以使用Block UI来阻止整个页面，除了您希望用户使用的部分，然后取消阻止您希望用户关注的部分。

void function blockRest(){
    function getRest(target){
        var andParent = target.add(target.parents());

        return andParent.siblings();
    }

    $.fn.blockRest   = function(){
        getRest(this).block();

        return this;
    }

    $.fn.unblockRest = function(){
        getRest(this).unblock();

        return this;
    }
}();

这样，取出除StackOverflow上的帖子编辑器以外的所有内容变为：

$('#post-editor').blockRest();

请记住，之后您需要使用unblockRest来清除它。

如果您不喜欢使用样式BlockUI，可以使用此对象作为调用block和unblock的参数来识别它：

{message:null,overlayCSS:{opacity:0,cursor:'default'}}

编辑数据时阻止UI元素的最佳方法

3 个答案: