编辑数据时阻挡UI元素的最佳方式

我想就如何在编辑过程中最好地处理“模糊化”非关键UI元素提出一些建议。为了解释这个更清楚我自己制作的示意图：编辑数据时阻挡UI元素的最佳方式

enter image description here

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

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

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

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

基本上，在用户正在编辑给定DIV中的表格细节时，除非用户保存或放弃更改，否则所有其他外部元素都不能“可点击”。（理想情况下，右边的窗口）

有没有关于实现此类功能的最佳方式的建议？

来源

2013-04-26 Dal

最简单的方法是只有一个元素（半 - 透明背景）覆盖整个页面（固定位置，或移动设备的绝对位置） - 并且要将其中一个部分放置在最上面，同时将其定位（相对）并为其提供更高的z -指数。 – CBroe 2013-04-26 14:31:01

我认为你正在寻找的想法是这样的：http://jquerytools.org/demos/toolbox/expose/form.html但只是在jQuery中做，或者你想使用jquerytools库 – Andrew 2013-04-26 14:33:23

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

在download page，您可以选择只公开，这是0.6 KB gzip压缩。

来源

2013-04-26 14:29:01 Mooseman

似乎是什么OP寻找 – 2013-04-26 14:32:41

由于其简单性，我首选此解决方案，谢谢！ – Dal 2013-04-29 13:00:06

“jQuery Tools公开”链接脱机 – 2014-08-18 23:28:13

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

来源

2013-04-26 14:55:57 LeonardChallis

注意：这篇文章假设你想使用块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; 
    } 
}();

这种方式，采取了一切，除了在计算器上的帖子编辑器就变成了：

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

请记住，你需要使用unblockRest在事后收拾它。

如果你不喜欢的造型BlockUI应用，你可以用这个对象作为参数被nerf它的调用block和unblock：

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

来源

2013-04-26 16:26:00 Barney

编辑数据时阻挡UI元素的最佳方式

回答

相关问题