winjs应用程序中的导航问题

我正在面对winjs中单个页面导航模型中的问题。winjs应用程序中的导航问题

主要考虑页面是default.html中

我第一次加载的login.html到default.html中与CSS属性

html, body 
{ 
overflow-x:hidden; 
}

然后我用导航到WinJS.Navigation.navigate page2.html方法有它的CSS属性为

html, body 
{ 
overflow-x:visible; 
}

上单击后退和要回的login.html。正在为login.html启用page2.html中的overflow-x：visible，其中包括page2.html的DOM事件侦听器。在导航回login.html时，如何禁用/处置page2.html的css属性和DOM事件侦听器。

来源

2013-12-12 Amar Zeno

当您使用页面控件时，即使您在概念上想到在不同的HTML页面之间进行浏览，您仍然始终处于default.html的上下文中。因此，从default.html和任何页面控件的.html文件加载的所有CSS文件都是累积的。也就是说，它们都进入了应用的整个样式表。

如果您在多个CSS文件中具有相同的选择器（就像使用html，body一样），那么最近加载的样式表中的所有样式都将赢得并保持原样。这就是为什么您导航回页面后，page2.css样式会影响页面1。 CSS样式表不会在页面控制导航中卸载，因为实际上并不像浏览器那样导航：您只是在default.html中进行DOM替换。

要解决此问题，有两个选项。首先，您可以做更多的工作来替换元素中的元素。在每个页面控件的init方法中，删除任何要卸载的样式的元素，然后为要加载的样式表添加新元素。

另一种方法是使用页面特定的选择器来限定页面特定的样式规则。例如，在顶层div上设置“page1”和“page2”类，然后将选择器的范围设置为“.page1 .myClass”，以防止它们互相干扰。由于这个原因，我通常会避免对html和body进行样式设置，并且只使用顶级div作为根元素。

如果您想了解更多的细节，我会在我的免费电子书Programming Windows Store Apps in HTML, CSS, and JavaScript, Second Edition的第3章中讨论页面特定的样式。（电子书是免费的，所以没有风险:)）。你想看看题为“页面特定的样式”的部分。

来源

2013-12-12 16:54:30

只需将html正文内容封装到div中，然后将CSS应用到它。

第1页

<body> 
<div class="page1"> 
    //Your Page1 content 
</div> 
</body>

CSS

.page1{ 
overflow-x:hidden; 
}

页2

<body> 
<div class="page2"> 
    //Your Page2 content 
</div> 
</body>

CSS

.page2{ 
overflow-x:visible; 
}

来源

2013-12-21 06:58:57 ArchFever

winjs应用程序中的导航问题

回答

相关问题