相关内容

返回首页

可拖拽的RichFaces面板或非模态面板

由 发布    |       JSF Rich Faces Seam

今天我想分享一个非常简单的解决方案，这个方案经常在 RichFaces 用户论坛 的帖子中询问。这个解决方案可以解决两个问题

  • RichFaces 弹出组件可以是非模态的吗？
  • rich:panel 组件可以拖拽/可调整大小吗？

正如你所猜到的，我将使用 rich:modalPanel 组件来回答这两个问题，解决方案非常简单，依赖于 RichFaces 特殊的 rich CSS 类。

标准模态面板外观和感觉

首先，我们应该打开 RichFaces 开发者指南 并查看模态面板的 皮肤可定制性部分。在那里我们可以找到应用于所有模态面板页面遮挡 div 元素的 rich-mpnl-mask-div 样式类。

现在我们只需将以下内容添加到我们希望为 非模态 的 rich:modalPanel 组件中

styleClass="noMaskClass"
到页面使用的样式表中添加下一个简单的 CSS 选择器
.noMaskClass .rich-mpnl-mask-div{
    display:none;
}
所以 richfaces-demo 模态面板示例（第二个）代码更改为
<style>
    .noMaskClass .rich-mpnl-mask-div{
        display:none;
    }
</style>
<rich:modalPanel  id="mp" minHeight="200" minWidth="450" styleClass="noMaskClass"
    height="200" width="500">
        //Panel Content
</rich:modalPanel>
移除页面遮挡 div 的模态面板

因此，如果第一个示例中的面板以模态方式打开，第二个示例中的面板以非模态方式打开。所以我们有了具有可调整大小、自动调整大小、移动、显示/隐藏 API 等等功能的面板..

到目前为止一切顺利.. 但经过简单的测试后，我们发现该代码在所有 Windows 环境的浏览器中工作正常 除了 IE（出现 Js 错误）和在 FF 中 在 Linux 环境下 输入受限。

经过简短调查后，我发现我们忽略了用于控制焦点和标签键导航的模态面板客户端方法。（使用标签键导航访问父页面控件被这些方法所限制。）但如果我们不需要模态面板，我们就不需要调用这些方法。因此，我们应该只是用空方法覆盖它们，以便正常工作。

这是获取模态面板JS对象并覆盖所需方法的函数代码

function removeTabHandlingFromPanel(modalPanelComponent){
     modalPanelComponent.lastOnfocus = function(event){};
     modalPanelComponent.firstOnfocus = function(event){};
     modalPanelComponent.processAllFocusElements = function(event){};
     modalPanelComponent.processTabindexes = function(event){};
     modalPanelComponent.restoreTabindexes = function(event){};
     modalPanelComponent.preventFocus = function(event){};
     modalPanelComponent.restoreFocus = function(event){};
}
现在我们将为标记为无遮罩样式类“noMask”的非模态面板调用此函数
removeTabHandlingFromPanel(#{rich:component('mp')});
因此，最终解决方案已经完成，并在所有支持RichFaces的浏览器中正常工作。
回到顶部