时间戳

首页 > 解决方案 > 如何通过代码跳转到移动设备上的另一个拆分窗格？

sapui5 - 如何通过代码跳转到移动设备上的另一个拆分窗格？

问题描述

我有一个sap.ui.layout.ResponsiveSplitter，如下所示：

在此处输入图像描述

目标是，当我按下跳转按钮时，它应该跳转到第二个拆分窗格：

在此处输入图像描述

观点是：

<mvc:View controllerName="sap.ui.layout.sample.ResponsiveSplitter.C" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core" xmlns:m="sap.m" height="100%">
    <l:ResponsiveSplitter defaultPane="Detail">
        <l:PaneContainer>
            <l:SplitPane requiredParentWidth="500" id="Selection">
                <m:Panel height="100%">
                    <m:Label text="Selection"/>
                    <m:Button text="Jump" press="onPress"/>
                </m:Panel>
                <l:layoutData>
                    <l:SplitterLayoutData size="20%"/>
                </l:layoutData>
            </l:SplitPane>
            <l:SplitPane requiredParentWidth="500" id="Detail">
                <m:Panel height="100%">
                    <m:Label text="Detail"/>
                </m:Panel>
            </l:SplitPane>
        </l:PaneContainer>
    </l:ResponsiveSplitter>
</mvc:View>

和 JavaScript 代码：

sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel'
    ], function(jQuery, Controller, JSONModel) {
    "use strict";

    var ResponsiveSplitterController = Controller.extend("sap.ui.layout.sample.ResponsiveSplitter.C", {

        onInit : function () {
        },

        onPress: function() {

        }

    });

    return ResponsiveSplitterController;

});

我怎么才能得到它？

标签： sapui5

解决方案

没有公开的方法可以做你想做的事。

但是，在 ResponsiveSplitter 控件中有一个私有方法：

/**
 * Sets the indexed page to visible and changes the selected button in the paginator
 * @param {int} iPageIndex
 * @private
 */
ResponsiveSplitter.prototype._activatePage = function (iPageIndex) {
    var $PaginatorButtons = this.$().find(".sapUiResponsiveSplitterPaginatorButton"),
        $OldSelectedButton = this.$().find(".sapUiResponsiveSplitterPaginatorSelectedButton"),
        iOldActivePage = $PaginatorButtons.index($OldSelectedButton),
        aPages = this.getAggregation("_pages") || [];

    aPages[iOldActivePage] && aPages[iOldActivePage].setVisible(false);
    aPages[iPageIndex] && aPages[iPageIndex].setVisible(true);
    $OldSelectedButton.removeClass("sapUiResponsiveSplitterPaginatorSelectedButton");
    $PaginatorButtons.eq(iPageIndex).addClass("sapUiResponsiveSplitterPaginatorSelectedButton");
    $OldSelectedButton.attr("aria-checked", false);
    $PaginatorButtons.eq(iPageIndex).attr("aria-checked", true);
};

通常，我们不应该调用内部方法，因为这些方法不能保证在整个框架版本中保持一致。

推荐阅读