G
Hi,
I have done this in my project before, to avoid user back accidentally.
"ons-back-button: is a component that shows the button and also the action “popPage()”, so we cannot use it. Instead of “<div class=“left”><ons-back-button>Page 1</ons-back-button></div>”, we use the following to draw the back-button.
<div class="back-button" style="display: inline-block;" onclick="showConfirm()">
<span class="back-button__icon">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ios-back-button-icon</title>
<g id="toolbar-back-button" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="ios" transform="translate(-34.000000, -30.000000)">
<polygon id="ios-back-button-icon" points="34 40.5 44.5 30 46.5 32 38 40.5 46.5 49 44.5 51"></polygon>
</g>
</g>
</svg>
</span>
<span class="back-button__label" style="">Page 1</span>
</div>
We have to write the back-button function by ourselves, we call it “showConfirm()”. Ask your confirmation before popPage().
var showConfirm = function() {
ons.notification.confirm({
message: 'Are you sure to exit?',
buttonLabels: ['Yes', 'No'],
primaryButtonIndex: 1,
callback: function(i) {
if (i === 0) {
document.querySelector('#myNavigator').popPage()
} else {
ons.notification.alert('You have cancelled back to page 1');
}
}
})
};
So when you press the back button, it will show a dialog to have your confirmation, if you press ‘yes’, then it will go back to page 1.
Best Regards
Gobi
