CODEWITHSUNDEEP
jquery-mobilehtml-framework-7
Sahil Khanna
Sahil Khanna

Reputation: 4382

Multi-page app in Framework7

I've developed several multipage applications using jQuery Mobile (JQM) and am planning to use Framework7.

In JQM I create several HTML pages along with their respective JS files

login.html
login.js

home.html
home.js

payment.html
payment.js

All js files are linked in their respective html pages

<div data-role="page">
    <script src="js/login.js"></script>
</div>

When a page is opened using $.mobile.changepage, page events (pageinit, pageshow etc) in the respective js get triggered. All control events are handled as $('#element').on('click', function(e){});

I'm, however, unable to implement this functionality in Framework7. Need guidance on this. I tried adding JS to HTML files but it did not get added.

Upvotes: 0

Views: 1961

Answers (2)

Lokesh G
Lokesh G

Reputation: 881

mainView.router.loadPage('ur_page.html');

Will solve your page navigation in your app/site.

Upvotes: 0

Mahen
Mahen

Reputation: 302

First thing to notice,Framework7 needs initialization before running any script.So you need to add framework7 js first in html page.And for framework7 application the approach for pages is little different than jQM. There are two types of pages you can create in F7.
1) you can create all pages inside single html file.
2) multiple html pages.
F7 has specific View definitions which are important while creating a html page.So main View is required in F7.And after initialization of f7 you need to initialize main-view as well.
To navigate between pages you need to use router api.For ie: 

mainView.router.load(selector) // selector can be data-page/html file name

Mainview is object of View which needs to init after F7 init. 

var myApp = new Framework7({
  // ...
});   

/* Initialize views */
var mainView = myApp.addView('.view-main', {
  dynamicNavbar: true
})
var anotherView = myApp.addView('.another-view');

Download the F7 master from Git and check the example folder.It will give you good idea about all the view and pages.
Hope this helps

Upvotes: 1

Related Questions