我在我的 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,即使我可以在查看时看到该值已设置萤火虫。