I am new to jquery mobile . I am developing ipad app using phonegap and jquery mobile(1.0.1).
I need to add splitview for my application. I have searched in google and found "http://asyraf9.github.com/jquery-mobile/" .
But It doesn't work for me. My question. Is there any other tutorial for splitview or better way to add asyraf9 solution to my apps?
Thanks you very much.
I've also experimented with the solution from asyraf9 but it doesn't seem to work very well (and isn't that configurable either unless you want to poke around in it's source). It also hasn't been updated in many months by now.
I ended up using Sencha Touch instead which looked better and have a whole company behind it, not a single developer. It isn't a plugin for jQuery though so it doesn't use the familiar $-syntax but that also means that it probably will work fine if you want jquery for handling other stuff (like xhr). Check out a demo of their splitview and other mobile controls on the link below.
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/
Splitview was done for JQM <1.0. The way it's set up, it is difficult to integrate with JQM, because it basically disables the navigation and viewport and then sets up it's own. So if you would get splitview to work, you would be bound to the single page you are working in.
If you want to try an alternative, have a look at multiview(Github), which I started based on splitview, but which runs using JQM navigation. It's still work in progress, but I need for a project I'm doing, so I'm patching it up as I go along.
You will need to use my modified JQM version. There are two tweaks left inside JQM, which I ahven't been able to remove so far.
I'm working on something similar. I'm using jQuery's .load() and it seems to work quite well
$('#sidepanel').load('path to file you're trying to load.html', function(responseText, textStatus, XMLHttpRequest){
$('#sidepanel').trigger('create'); //this applies the jquery mobile stylings to the loaded content
});
sidepanelis the container for the secondary view you want to load things into
Related
We have a requirement to build app with as much common codebase as possible, that works on desktop and mobile platforms (Android, iOS, Windows Phone). Also, the app on mobile platforms should act like an app (so not mobile-friendly website), with access to camera, position, and an icon.
Having looked at all the options and finding some or the other quirks, I decided on having webapp/site on browser and PhoneGap to base the mobile app on.
Now, as far as my understanding goes, sticking the codebase of browser webapp/site in Phonegap base structure should work for the mobile app. Of course, some minor changes may be warranted.
However, I also saw that relying only on phonegap and barebones HTML5 tech (without any UI framework) would need a lot of time and would be tiresome.
So I looked around for a UI framework and found - JQuery Mobile, Sencha Touch, Kendo UI, etc. jQuery Mobile, while could work in desktop browsers too, would not give me a grid-like system to position elements. The rest of them seem to work only on mobile platforms - they did not boast about it working/scaling on desktop browsers.
So, is there any common library/framework that can provide - CSS animations, grid-like system for positioning, etc.?
It's not an "answer" so much as an idea for a method. Perhaps try creating what you need from a desktop perspective first using bootstrap so it's mobile first. Then maybe make use of something like jquery mobile for the bare bones navigation and structure in the app. You can then pull in your page content via ajax using the same code/layouts from your "desktop version" (which will of course have a mobile friendly view/layout since it's written using bootstrap).
You'll likely have to either create an api for serving up the content for your app or else find some other way to differentiate the app from the desktop site on the server side so you know where they request is coming from, but it seems do able.
After some testing and verifications on browser and phonegap, I chose the following combination:
Yahoo's purecss library for grid system and basic widgets. Its awesome with the only pain that Google Search on it gives ambiguous results.
Reactjs to manage the view logic. This was the biggest pain in my previous project having only used jQuery, turning my whole project into a huge jQuery soup. React is extremely clean compared to that.
superagent probably, for AJAX requests to fetch server data. Extending this, I haven't yet decided to employ a model-like library that handles the state; may be I dont need one. I will decide as the project moves on.
hand-coded CSS with some common sense so that I learn something and dont waste my time in finding an all-in-one library. _The only necessary rule here is to weed out older best practices when you are looking for something. For example, in order to center something, the transition method is the best technique.
We have to build an app which should run on iOS and android. For expenses reason we decided to to it with html5 and phonegap.
Now we have to decide which mobile framework we wann use for it. I know there are already a lot of this issues and I also already did a lot of research. But I'm still not sure which one we should pick.
I've heard a lot down side points from Jquery mobile, but on the other hands it seems there is nothing really better, beside senche touch, out there.
What are your experience, what whould you suggest?
I'm looking forward hearing your opinion
(let me now if you need further information for evaluating)
Thanks
Building PhoneGap with Bootstrap and AngularJS is a breeze.
AngularJS provide a really nice separation between Route, Model, View, and Controller. Learn Angular directives and stop writing spaghetti js dom interaction code.
Bootstrap, though not as nice as jQM for mobile features (maybe until v3), still provide a nice starter CSS such as (navbar, fixed top, bottom, etc...) And if you know your css, then I think Bootstrap is more flexible than jQM. Combine with some nodejs build script to compile your less file to css and you are all set. Glyphicons is also a good starter set of asset/images.
I am sure you would have done a lot of research on this but from my experience I would suggest you to take a look at Sencha Touch + Phonegap combination.
The reason why I opted for Sencha Touch over Jquery Mobile is that the JM is quite sluggish when it comes to page transition and animation. Whereas, Sencha Touch provides you all-in-one place regarding building a rich mobile app with HTML5, CSS and Javascript. The only thing about ST is that you might require to learn some Ext JS which is used by Sencha Touch to create components. They do have a lot of documentations which you can refer to.
You can refer these links to kickstart on Sencha:
https://github.com/senchalearn
http://www.sencha.com/learn/touch/
All the best! :)
We have just started working with PhoneGap in my studio and we are using Backbone.js + Handlebars.js and Bootstrap or Ratchet depending on the case. It seems to work very well.
If you want some more resources on that I will suggest you start with
http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/
http://coenraets.org/blog/2013/05/architecting-a-phonegap-application-video-slides/
http://coenraets.org/blog/2013/06/sample-mobile-phonegap-application-with-backbone-js-and-ratchet/
Really good resources.
So i am creating a mobile version of my employers website using jquery mobile. So far, very good and everything works as expected.
But there are some areas where users would input some data, to submit a form. For ease of use on such small screens every input utilizes "placeholders" that was introduced with html5.
Works like a charm on anything but WP7.5. So without appropiate labels it does not make sense where to type what (note, in accordance to jquery's recommendations, i have made hidden labels associated to their respective input fields).
So i searched around for various javascripts that can work around this issue, but none of them works on windows phones for some reason.
Anyone have a suggestions? Ideas? Workarounds? Or something else?
Funny, after having trying to find a solution for hours on end, after writing i found a solution.
I took out the code for adding placeholders from Zurb's excellent Foundation framework. For anyone stopping by with the same problem, look here: https://github.com/mathiasbynens/jquery-placeholder
It doesn't work because both Desktop and Windows Phone versions of IE9 don't support the input placeholder attribute.
What you can do is use a Polyfill, like this one: https://github.com/ginader/HTML5-placeholder-polyfill
I am looking for a general mechanism to internationalize web application that have to work in offline mode.
Initially I was considering adding data-i18n tags to elements but this seems like a very ugly solution.
I came across http://panacodalabs.github.com/The-M-Docs/#components_&_utilities/m_i18n however I do not wish (or can due to time constrains) port my application to that framework.
I need a HTML5 jQuery Mobile friendly solution to this issue, that works in offline mode.
It seems to me that this crucial component is missing on the HTML5 framework.
I wouldn't necessarily say this is a feature JQM should provide, because this is probably done best with some server side logic.
there would be two ways I can think of doing this:
1. have all your language translations in some standalone js files, which you would have to include in manifest file. check the datebox plugin to see how this could be done ( top right - options).
2. create a local database and store translations in the required languages there.
i think the first one should be easier to handle, but probably harder to setup/maintain. also, depending on the amount of translations, js files do become large...
Have you looked at the jQuery i18n plugin?
http://recursive-design.com/projects/jquery-i18n/
I'm currently using it with jQuery 1.7.1 and jQuery Mobile 1.1.0, and it works perfectly.
I'm a novice web designer and I am trying to design a pop up div contact for/box. I've been researching for an entire week, longer really, on how to create a pop up div with a modal layer. My website hosting doesn't allow for in-depth HTML, CSS and JS customization, so while I've discovered what appeared to be good plugins/templates, I can't really use them because of my limited access. (At least, they didn't work when I did try to use some of them.) All I can really customize is the section of my webpages and then I can add HTML snippets to the page. Everything else I have to jimmy-rig into these two areas; very limiting as you imagine.
I finally found some code I could use though, and after learning some CSS and javascript, I was able to successfully create my pop up div contact form/box. I figured out that I had to put the CSS and JS in the section and then add the simple div for pop up modal purposes to the page via the HTML tool from my host's website building application.
But there are issues. I discovered the code I discovered and adapted to my site isn't that great. There something going on with the formatting that prevents the modal opacity layer from being the correct size (and I have tried everything I could think of to fix it, but to no avail). Also, the way my pop up div is centered just doesn't seem 100% right. It "functions", but I want it to function appropriately. The other issue is compatibility between browsers. I've been designing my website and checking my progress in Chrome, and it works fine. But it gets mangled on IE8 and Firefox.
Well, after this very short glimpse at success, I started researching for a final solution. Using Chrome's developer tools, I was able to track down various elements of functioning modal popups on websites other than my own and stumbled upon SimpleModal, which happens to be the nifty little modal popup tool that my web hosting company uses. However, I've been unable to install it correctly using the demo code of SimpleModal.
SO COULD SOMEONE PLEASE TELL ME HOW TO INSTALL SIMPLEMODAL? And if necessary, I can post the code from my website in a comment (as much as I can fit at a time at least; there seems to be a limit...) and someone can see firsthand my troubles if that helps?....THANKS!
MY WEBSITE:
http://solitairethahalo.com/
You should look deeper into the inability to use Javascript. Which host are you using?
If you do find that you are able to use js, then, instead of going around, getting plugins from everywhere, and creating a mess in your DOM, you should start your projects using a boilerplate.
Check out http://www.initializr.com/ and use the bootstrap option. This will set you up with LESS stylesheets and incorporate Twitter Bootstrap which will do exactly what you want with your modal.
Once you have your page setup, using bootstrap you should be able to turn any div into a modal in your script.js file by calling the modal method on it (from bootstrap)
$('#myModal').modal(options)
You can find the bootstrap documentation here http://twitter.github.com/bootstrap
hope it helps!