1

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

在此处输入图像描述

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

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

在尝试了诸如“Block UI”（http://www.malsup.com/jquery/block/）之类的插件之后，我们无法实现这一目标。使用“阻止 UI”，我们只能“模糊”整个 UI 并显示模式消息......

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

本质上，当用户在给定的 DIV 中编辑表单详细信息时，在用户保存或放弃更改之前，所有其他外部元素都不得“可点击”。（最好像右边的窗口）

对实现此类功能的最佳方式有什么建议吗？

4

3 回答 3

3

jQuery 工具暴露应该做你需要的：http://jquerytools.github.io/demos/toolbox/expose/index.html

在下载页面上，你可以选择仅暴露，它是 0.6 Kb gzipped。

于 2013-04-26T14:29:01.997 回答
1

您可以按预期覆盖 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
});

这是一个示例小提琴。

于 2013-04-26T14:55:57.827 回答
0

注意：这篇文章假设你想使用 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 的样式，你可以用这个对象作为参数来削弱它，调用blockand unblock：

{message:null,overlayCSS:{opacity:0,cursor:'default'}}
于 2013-04-26T16:26:00.883 回答