Is this a viable design/strategy for page management in a mobile single-page application?

I'm working on a medium-sized mobile single-page app implemented using the usual html5 suspects and some mobile and JS frameworks (Cordova/PhoneGap, jQuery, knockout and iScroll being the most prominent of the bunch). Up until recently I was using jQuery-Mobile, but finally got too frustrated with it and have decided that it needs to get the boot. In my markup I still have all pages as div-tags directly beneath the body tag, and now I'm looking for a strategy on how to manage pages and transitions between them. The idea I'm looking for feedback on is to position all pages absolutely inside the body, and adjust the left/right position depending on the direction I need to slide in. In CSS terms this would look something like this: body { position:relative; top:0; left:0; right:0; bottom:0; } body > div { position:absolute; top:0; left:320px; /* this is page/viewport width, will be calculated and set on app start */ } body > div.current-page { left:0; } My expectation is that this structure would make it easy to add page transitions using CSS3 transforms. - Has anybody tried this already? - Is something like this going to work across browsers on the various mobile platforms? - Any traps or things to look out for? - Any suggestions for libraries to use for the actual page transitions? - Will this play nicely with iScroll? I already have my eyes on a router library/implementation, but am open to recommendations in this area as well. In case you were wondering about why I'm discarding jquery-mobile, here are my top reasons: - all the DOM rewriting from data-tags doesn't play nicely with knockout, and so using it's widgets was more pain than gain - having to write much of your css as "patches" to jqm's own styles was unproductive - it's router doesn't support page/hash parameters - it's not designed to deal with any kind of asynchrony in its event chain, such as delaying page transition until something has been read from device local storage Thanks for reading this far! :)
I agree that jQuery-Mobile sometimes conflicts with other add-ons, but still I find it useful and time safer. Anyway, you can use specific JQM widgets jquerymobile.com/download-builder

以上就是Is this a viable design/strategy for page management in a mobile single-page application?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏