How to achieve same like Segemented button with toggle button(sugg) ,change to next onclicked

问题

As learnt from previous question of mine(how to change segmented button to next on clicked) , I used a Segmented button to do so as:

My expected results were:

when Next is pressed INDICATOR2 should be active and on second press INDICATOR3 should be active.
when on INDICATOR2 if Previous is pressed both INDICATOR2 and INDICATOR1(which is current one) should be active.

As I am using segmented button here, the 2) can't be achieved ,and also was suggested using a toggle button would do instead a segmented button.

so I tried as,

<HBox id="toggleButton1">
    <ToggleButton text="BUTTON1" enabled="true" pressed="true" press="onPress">
    </ToggleButton>
    <ToggleButton text="BUTTON2" enabled="true" pressed="false" press="onPress">
    </ToggleButton>
    <ToggleButton text="BUTTON3" enabled="true" pressed="false" press="onPress">
    </ToggleButton>
</HBox>    
<Button text="Previous" press="onPressPrevious" enabled="true"> </Button>
<Button text="Next" press="onPressNext" enabled="true"> </Button>

For this ,

How can I write JS code such that :

when Next is pressed BUTTON2 should be active and on second press BUTTON3 should be active.
when on BUTTON2 if Previous is pressed both BUTTON2 and BUTTON1(which is current one) should be active.
How can I set these Toggle Buttons width set to whole page(tried my luck display: block; width=100% in CSS but couldn't work)

I have no knowledge on JS at least to give a try , any help so that I would go through it and learn so, TIA

回答1:

Here is a sample of using the three ToggleButtons as one SegmentedButton. I am caching the list of buttons in a local variable, since there is only one group of buttons. You could adapt it to support multiple such groups if needed, by either adding more local variables, or by getting the relevant list of buttons each time.

If next is pressed, it jumps to the next button. If previous is pressed, it enables all previous buttons. If a toggle button is pressed, it disables all others, much like a SegmentedButton.

As for the size, you need to set a few flexbox related properties. fitContainer on the HBox so it stretches 100% and growFactor=1 on the toggle buttons so they actually use all that space. Even then, it seems the buttons themselves don't like stretching much, so I set an additional CSS style to force them.

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

  var toggleButtons1;

  return Controller.extend("myController", {
    onInit: function() {
      toggleButtons1 = this.byId("toggleButtons1").getItems();
    },

    onPressNext: function(e) {
      for (var i = 0; i < toggleButtons1.length - 1; ++i) {
        if (toggleButtons1[i].getPressed()) {
          toggleButtons1[i].setPressed(false);
          toggleButtons1[i + 1].setPressed(true);
          break;
        }
      }
    },

    onPressPrevious: function() {
      for (var i = toggleButtons1.length - 1; i > 0; --i) {
        if (toggleButtons1[i].getPressed()) {
          toggleButtons1[i - 1].setPressed(true);
        }
      }
    },

    onPress: function(e) {
      var btn = e.getSource();
      if(!btn.getPressed()) {
        btn.setPressed(true);
        return;
      }
      for (var i = 0; i < toggleButtons1.length; ++i) {
        if (toggleButtons1[i] != btn) {
          toggleButtons1[i].setPressed(false);
        }
      }
    },
    
    onPress1: function(e) {
       this.onPress(e);
       alert("Do something here!");
    }
  });
});

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

.fullWidthButtons button {
  width: 100%;
}

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

      <HBox id="toggleButtons1" fitContainer="true" class="fullWidthButtons">
        <ToggleButton text="BUTTON1" enabled="true" pressed="true" press=".onPress1">
          <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </ToggleButton>
        <ToggleButton text="BUTTON2" enabled="true" pressed="false" press=".onPress">
          <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </ToggleButton>
        <ToggleButton text="BUTTON3" enabled="true" pressed="false" press=".onPress">
          <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </ToggleButton>
      </HBox>

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

来源：https://stackoverflow.com/questions/58516055/how-to-achieve-same-like-segemented-button-with-toggle-buttonsugg-change-to-n

标签

button

sapui5