Как добиться того же, что и сегментированная кнопка с переключателем (sugg), перейти к следующему нажатию - PullRequest
Новая
       8

Как добиться того же, что и сегментированная кнопка с переключателем (sugg), перейти к следующему нажатию

0 голосов
/ 23 октября 2019

Как выяснилось из моего предыдущего вопроса ( как поменять сегментированную кнопку на следующую при нажатии ), я использовал сегментированную кнопку, чтобы сделать так:

enter image description here

Мои ожидаемые результаты были такими:

  1. при нажатии Next INDICATOR2 должно быть активным и при втором нажатии INDICATOR3 должно быть активным.

  2. при включении INDICATOR2, если нажата Предыдущая, должны быть активны и INDICATOR2, и INDICATOR1 (текущая).

Как IЯ использую сегментированную кнопку здесь, 2) не может быть достигнута, а также было предложено использовать кнопку переключения вместо сегментированной кнопки.

, поэтому я попробовал как, 

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

enter image description here

Для этого

Как мне написать код JS такой, что:

  1. при нажатии Next BUTTON2 должно быть активным, а при втором нажатии BUTTON3 должно быть активным.

  2. при включении BUTTON2 при нажатии Previous и BUTTON2 и BUTTON1 (который является текущим)должен быть активным.

  3. Как установить ширину этих кнопок переключения на целую страницу (попытка счастья display: block; width=100% в CSS, но не сработала)

У меня нет знаний о JS, по крайней мере, чтобы попробовать, помочь, чтобы я прошел через это и учился, TIA

1 Ответ

1 голос
/ 23 октября 2019

Вот пример использования трех ToggleButton s как одного SegmentedButton. Я кеширую список кнопок в локальной переменной, так как есть только одна группа кнопок. Вы можете адаптировать его для поддержки нескольких таких групп, если необходимо, либо добавляя больше локальных переменных, либо каждый раз получая соответствующий список кнопок.

Если нажата следующая , она переходит кследующая кнопка. Если нажата предыдущая , активируются все предыдущие кнопки. Если кнопка переключателя нажата, она отключает все остальные, подобно SegmentedButton.

Что касается размера, вам нужно установить несколько свойств, связанных с flexbox. fitContainer на HBox, так что он растягивается на 100% и growFactor=1 на кнопках переключения, чтобы они фактически использовали все это пространство. Даже тогда кажется, что сами кнопки не любят сильно растягиваться, поэтому я установил дополнительный стиль CSS, чтобы заставить их. 

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