javascript - Phonegap and jQuery Mobile architecturally problems -
iam building first mobile application far , have no clue if solution or not.
i used 1 single template(html file) 1 data-role="page". each content element div gets hidden or shown via javascript. please check next code create clear. entry point of application.
$(document).delegate("#index", "pageinit", function(event, ui) { initrotation(); initnavigation(); initimpressum(); initservice(); cookie = null; ...... isloggedin(); //returns cookie = true || false if (cookie == null) { $('#login').show(); $('#home, #foot, #service').hide(); initregistration(); } else { $('#login, #service').hide(); $('#foot, #home').show(); $('#navihome').addclass("ui-btn-active"); // ui-state-persist?! createhomecontentfromserver(); } }); i have several problems now.
the app kind of slow. pageinit event gets fired often. can prevent it? the code not readable 3rd persons since got 100 external javascript files. (every time user ~500 divs gets hidden , 10 shown) do have total illustration of app architecture?
your app slow because loading 1 big page each time. page init firing multiple times because reloading 1 big page each time click link.
in jqm, have many data-role="page", not one. below standard template dreamweaver cs6 produces. uses jq & jqm cdn's , formatted 4 pages. should give start:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery mobile web app</title> <link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>page one</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">page two</a></li> <li><a href="#page3">page three</a></li> <li><a href="#page4">page four</a></li> </ul> </div> <div data-role="footer"> <h4>page footer</h4> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>page two</h1> </div> <div data-role="content"> content </div> <div data-role="footer"> <h4>page footer</h4> </div> </div> <div data-role="page" id="page3"> <div data-role="header"> <h1>page three</h1> </div> <div data-role="content"> content </div> <div data-role="footer"> <h4>page footer</h4> </div> </div> <div data-role="page" id="page4"> <div data-role="header"> <h1>page four</h1> </div> <div data-role="content"> content </div> <div data-role="footer"> <h4>page footer</h4> </div>
javascript jquery cordova jquery-mobile
No comments:
Post a Comment