1

我在我的 CSS 中使用了“@media only screen”来根据用户的屏幕大小确定应该如何以及应该显示哪些信息。我有一个名为 panelContainer 的类,它设置为在屏幕大于 767px 时显示,还有一个名为 mobileContainer 的类,它在屏幕小于 767 像素时显示。

我有几个自定义控件,一个包含标准表单布局,另一个包含移动设备表单布局。最初我用适当的 styleClass 在每个周围放置了一个 div。这种方式的问题是,虽然只有一个表单可见,但它们都已加载,因此导致保存问题。

<xp:div id="panelContainer" styleClass="panelContainer">
    <xc:content_sCompany></xc:content_sCompany>
</xp:div>
<xp:div id="mobileContainer" styleClass="mobileContainer">
    <xc:content_iCompany></xc:content_iCompany>
</xp:div>

我已经使用 panelContainer 的 styleClass 在我的 Xpage 中添加了一个 div,然后我添加了返回 div 的 style.display 的 onLoad 和 onResize 事件,然后这些应该将结果写入 viewScope。但我发现它只会写 onLoad 并且虽然该函数被调用 onResize 它不会改变 viewScope 变量。

<xp:scriptBlock id="scriptBlock1" type="text/javascript">
    <xp:this.value>
        <![CDATA[var init = function() {
            obj=document.getElementById('formType');
            if(getStyleDisplay(obj)=="none"){
                formType='#{javascript:viewScope.put("formFormat","mobile");}';
            }else{ 
                formType='#{javascript:viewScope.put("formFormat","standard")}';
           }
        }

        dojo.addOnLoad(init);
        dojo.connect(window,"onresize",init);

        function getStyleDisplay(obj) {
            if(obj.currentStyle) { // IE – Opera
                return obj.currentStyle.display;
            } else { // firefox
                return getComputedStyle(obj,'').getPropertyValue('display');
            }
        }]]>
    </xp:this.value>
</xp:scriptBlock>
<div id="formType" class="panelContainer"></div>

.....这个 viewScope 变量然后以下列方式使用:

<xc:content_Company xp:key="ContentControl">
    <xp:this.facets>
        <xc:content_sCompany id="content_sCompany"
            xp:key="standard">
        </xc:content_sCompany>
        <xc:content_iCompany id="content_iCompany"
             xp:key="mobile">
        </xc:content_iCompany>
    </xp:this.facets>
</xc:content_Company>

......从 content_Company 中提取......

<xp:callback facetName="#{viewScope.formFormat}" id="cbkCompanyFormContent">
</xp:callback>

我觉得这是实现我需要的结果的更好方法,因为当我手动尝试它时,它只加载一个表单并且它们按预期工作。

我看不出为什么 viewScope 没有被正确设置,它总是被设置为“标准”,即使我在加载页面之前缩小了我的页面。我确实尝试将值写入隐藏输入,这有效,但是每当我尝试使用 getComponent("hiddenInput1").getValue() 访问该值时,它都会返回 null,即使我可以在查看时看到该值已设置萤火虫。

4

1 回答 1

1

好的,您可以通过一些 console.log("") 检查(或告诉我您是否已经拥有) onResize 正在被调用,并且正确的显示正在被下拉等。

接下来它可能会触发 onResize 但您是否正在部分刷新正在使用 viewScope 的区域?

代码示例:(将 controlID 替换为您的)

XSP.partialRefreshGet("controlID", {
    onError: function() { console.log('Error'); }
});

我对使用 onResize 的目的有点困惑?如果是决定在移动屏幕还是普通屏幕上显示什么,有更有效的方法可以做到这一点。

  1. 在 openNTF 上的 ExtLib 的最新版本中使用新的重定向控件。它完全按照名称所暗示的那样做,并根据某些表达式进行重定向。让您将其放在页面上,并说是否移动(或其他)重定向到此页面。

  2. 有一个虚拟的默认加载页面,它检查用户代理字符串以查看要加载的页面(具有单独的移动/全屏页面)。这就是 ExtLib 附带的 teamroom 模板应用程序对其 main.xsp 所做的事情,然后将其设置为默认启动选项。

或者,如果您尝试处理手机/平板电脑是横向还是纵向,您应该使用 onOrientationChange 事件而不是 onResize。看看这个例子(不是问题中的代码也是我向你指出的,他在让它在 webview 中工作时遇到了问题):

如何处理uiwebview中的javascript onorientationchange事件

于 2012-06-29T15:05:59.010 回答