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 :)
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');