html-framework-7

Framework7 Toggle with confirmation before change


I want to create a toggle with Framework7, where the user should confirm before the toggle is turned off (and only when turned off, not when turned on - maybe this is relevant). My toggle is created like this:

var toggle = app.toggle.create({
  el: '#myToggle',
  on: {
    change: function() {
      if (toggle.checked) {
        // let user confirm to uncheck toggle before
      } else {
        // check toggle and do something
      }
    }
  }
});

Any help appreciated :)


Solution

  • Since it's not possible to add a confirm to toggles, I just created two segmented buttons that kinda look like a toggle:

    <div class="list no-hairlines">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">My Toggle</div>
            <div class="segmented segmented-strong toggle-buttons">
              <button id="btn-toggle-off" class="button button-small">off</button>
              <button id="btn-toggle-on" class="button button-small button-active">on</button>
              <span class="segmented-highlight"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    

    And then inside the click event I just call a confirm:

    $$('#btn-toggle-off').on('click', function(evt) {
      app.dialog.confirm(text, title, callbackOk, callbackCancel);
    }
    

    And inside callbackOk, I switch the button-active class:

    $$('#btn-toggle-off').addClass('button-active');
    $$('#btn-toggle-on').removeClass('button-active');