如何在点击时将分段按钮更改为下一个

Question

分段按钮如下：

<SegmentedButton width="98%">
    <items>
        <SegmentedButtonItem text="INDICATOR1" class="progress" id="before"/>
        <SegmentedButtonItem text="INDICATOR2" class="progress" id="present"/>
        <SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
    </items>
</SegmentedButton>

和“下一步”按钮为：

<Button text="Next" press="onPressNext" enabled="true"></Button>

上一个按钮为：

<Button text="Previous" press="onPressPrevious" enabled="true"></Button>

如何编写 JS 代码，以便在按下 Next 时 INDICATOR2 应该处于活动状态，而在第二次按下时 INDICATOR3 应该处于活动状态

并且在 INDICATOR2 上时，如果按下 Previous，INDICATOR2 和 INDICATOR1（当前的）都应该处于活动状态

我对 JS 一无所知，至少无法尝试，任何帮助我都可以通过它学习，TIA

Answer 1

我想你创建事件 onclick 并更改或添加样式 class 例如 active 属性

<items>
        <SegmentedButtonItem text="INDICATOR1" class="progress active" id="before"/>
        <SegmentedButtonItem text="INDICATOR2" class="progress" id="present"/>
        <SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>

当您单击下一步时，您必须从 INDICATOR1 中删除活动 class，然后将 active class 附加到下一个指标

<items>
        <SegmentedButtonItem text="INDICATOR1" class="progress" id="before"/>
        <SegmentedButtonItem text="INDICATOR2" class="progress active" id="present"/>
        <SegmentedButtonItem text="INDICATOR3" class="progress" id="after"/>
</items>

Answer 2

请为下一个按钮编写一个 onclick 函数，如下所示

function onNextClick(){
//Make the css of INDICATOR1 normal and INDICATOR2 || INDICATOR3 active
}

Answer 3

您可以从SegmentedButton中抓取项目列表，分别获取下一个或上一个项目，并将其设置为选中的项目。

（我在下面的示例中向 SegmentedButton 添加了一个 id）

sap.ui.define("myController", [
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("myController", {
    onPressNext: function() {
      var sb = this.byId("segmentButton1");
      var items = sb.getItems().map(function(itm) { return itm.getId() });
      var idx = items.indexOf(sb.getSelectedItem()) + 1;
      if(idx < items.length) {
        sb.setSelectedItem(items[idx]);
      }
    },
    
    onPressPrevious: function() {
      var sb = this.byId("segmentButton1");
      var items = sb.getItems().map(function(itm) { return itm.getId() });
      var idx = items.indexOf(sb.getSelectedItem()) - 1;
      if(idx > -1) {
        sb.setSelectedItem(items[idx]);
      }
    }
  });
});

sap.ui.require(["sap/ui/core/mvc/XMLView"], function(XMLView) {
  XMLView.create({
    definition: $('#myView').html()
  }).then(function(oView) {
    oView.placeAt('content');
  });
});

<html>

<head>
  <meta charset="utf-8">
  <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_fiori_3' data-sap-ui-libs='sap.m'></script>
  <script id="myView" type="sapui5/xmlview">
    <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController">

      <SegmentedButton width="98%" id="segmentButton1">
        <items>
          <SegmentedButtonItem text="INDICATOR1" class="progress" id="before" />
          <SegmentedButtonItem text="INDICATOR2" class="progress" id="present" />
          <SegmentedButtonItem text="INDICATOR3" class="progress" id="after" />
        </items>
      </SegmentedButton>

      <Button text="Previous" press="onPressPrevious" enabled="true" />

      <Button text="Next" press="onPressNext" enabled="true" />

    </mvc:View>
  </script>
</head>

<body class='sapUiBody'>
  <div id='content'></div>
</body>

</html>

如何在点击时将分段按钮更改为下一个

how to change segmented button to next on clicked

progress

sapui5