隐藏和显示winjs . ui . pivotiitem

Hide and Show WinJS.UI.PivotItem

本文关键字：ui pivotiitem winjs 显示 隐藏      更新时间：2023-09-26

我需要隐藏Windows Phone 8.1应用程序的WinJS.UI.PivotItem，然后在满足某些标准后再次显示它。

我认为这将是简单的使用CSS来显示和隐藏WinJS.UI.PivotItem，但它隐藏了.win-pivot-item元素，而不是.win-pivot-header ?

如何以编程方式显示和隐藏WinJS.UI.PivotItem在WinJS.UI.Pivot控件?

<div id="divContent" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'Details', selectedIndex: 0}">
    <div id="divSelected" style="display: none;" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Currently Selected'}">
        <!-- Content - Hide this until we need it -->
    </div>
    <div id="divSelections" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Selections'}">
        <!-- Content -->
    </div>
    <div id="divInformation" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Other Information'}">
        <!-- Content -->
    </div>
    <div id="divHistory" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'History'}">
        <!-- Content -->
    </div>
    <div id="divDetails" data-win-control="WinJS.UI.PivotItem" data-win-options="{'header': 'Details'}">
        <!-- Content -->
    </div>
</div>

目前还没有一个直接的API来显示/隐藏WinJS.UI.Pivot控件上的WinJS.UI.PivotItems。

根据您期望的UX和显示/隐藏的标准，您可以通过编程从WinJS.UI.Pivot控件上的Pivot.items属性返回的PivotItems列表中添加/删除PivotItem。

例如:

    function createPivotElement() {
        // Use document.createElement("div") to build up the DOM for the Pivot Item
        // Or you could render a page using the WinJS.UI.Pages API
        // Return a DOM element
        return document.createElement('div');
    }
    // When criteria is met...
    // Find the pivot in the DOM
    var p = document.querySelector(".myPivot");
    var pivot = p.winControl;

    var element = createPivotElement();
    var pivotItem = new WinJS.UI.PivotItem(element, { header: 'New PivotItem' });
    // Add new PivotItem
    // You could use other things like splice to add it to a specific index etc.
    pivot.items.push(pivotItem);

您还可以查看Pivot示例或http://try.buildwinjs.com/#pivot以获取更多使用示例

相关文章：