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

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

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

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>

Answer 2

我认为您会创建onclick之类的事件并更改或添加样式类，例如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删除活动类别，然后将active类别附加到下一个指标

<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 3

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

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

如何在单击时将分段按钮更改为下一步

3 个答案: