Menu
I have recently built an app using framework7 and cordova. My app consists of a single html file which has all the views in it. To navigate between the views, a back button is present at the top on each child view.
If a person presses the back button on the device, the app will be closed.
How can I use the back button to get to the main page when I'm in the child pages?
I have read the router API on the framework7 website but it is really confusing and does not seem to work. Here is what I'm trying:
<html>
<head>...</head>
<body>
...
<!-- Views -->
<div class="views">
<!-- View -->
<div class="view view-main">
<!-- Pages -->
<div class="pages">
<!-- Home page -->
<div class="page" data-page="index">
<div class="page-content">
<p>Home page</p>
</div>
</div>
<!-- About page -->
<div class="page cached" data-page="about">
<div class="page-content">
<p>About page</p>
</div>
</div>
<!-- Services page -->
<div class="page cached" data-page="services">
<div class="page-content">
<p>Services page</p>
</div>
</div>
</div>
</div>
</div>
...
</body>
</html>
// Initialize App
var myApp = new Framework7();
// Initialize View
var mainView = myApp.addView('.view-main')
// Load about page:
mainView.router.load({pageName: 'about'});
Please note that I want to use the physical button found on the device to navigate to the main view when I'm in another div.
Please help.
401
Thanks to @sjkushwaha21, I have modified code for Framework7 V2. Used in methods of Framework7 object it is called by
onDeviceReady: function() {
document.addEventListener("backbutton", myApp.methods.onBackKeyDown, false);
},
... and here is the method:
var myApp = new Framework7({
....,
methods: {
onBackKeyDown: function() {
var leftp = myApp.panel.left && myApp.panel.left.opened;
var rightp = myApp.panel.right && myApp.panel.right.opened;
if ( leftp || rightp ) {
myApp.panel.close();
return false;
} else if ($$('.modal-in').length > 0) {
myApp.dialog.close();
return false;
} else if (myApp.views.main.router.url == '/') {
myApp.dialog.confirm('Are you sure you want to exit?', 'Exit MyApp', function() {
navigator.app.exitApp();
},
function() {
});
} else {
mainView.router.back();
}
}, ...
Hello fellow developers,
I know everyone is so annoyed with the Android hardware back button issue in framework7, and finding a solution is also very tedious as I have struggled myself. So here I have code snippet which will help you manage all hardware back button issue (popup, modals, popovers, side panel and app exit) on android devices. please go through the code and drop query if any confusion.
Device Ready Function
function onDeviceReady() {
document.addEventListener('backbutton', onBackKeyDown, false);
}
function onBackKeyDown() {
var cpage = mainView.activePage;
var cpagename = cpage.name;
console.log(cpagename);
if (($$('#leftpanel').hasClass('active')) || ($$('#rightpanel').hasClass('active'))) { // #leftpanel and #rightpanel are id of both panels.
myApp.closePanel();
return false;
} else if ($$('.modal-in').length > 0) {
myApp.closeModal();
return false;
} else if (cpagename == 'index') {
myApp.confirm('Are you sure you want to exit?', function() {
// var deviceType = device.platform;
// if(deviceType == “Android” || deviceType == “android”){
navigator.app.exitApp();
// }
},
function() {
});
} else {
mainView.router.back();
}
}
If you just want to navigate to back pages,Use pushState : true in app initialization,You will be able to go back using hardware back button in framework7.
If you want to open a specific page,mainView.router.load is a function in framework7.
You can put a validation on router to check if page is your mainView page.By doing that you can control exiting app.when back page loads it calls the router and router gives you details about page ie: page.name,page.query.
Hope this helps
8
To navigate back, go to Step 1. my-app.js step2. Paste the following:
// Initialize your app
var myApp = new Framework7({pushState: true,});
Run your app again. Hope this helps
4
Put below code in on Device ready function
document.addEventListener("backbutton", yourCallbackFunction, false);
create below function
function yourCallbackFunction(){
alert(window.location);
}
you can do anything if you get that event once. you can navigate using different page Id's to different view.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
