I'm new to PhoneGap. I created a sample application using ponegap and jquery mobile which contain some button and few other form elements. While I installed in my mobile(Samsung Ace), i feel the UI of button and few other form elements are not looking good. Cornering in button is not perfect.
I'm using the following
cordova-2.9.0.jar
jquery-2.0.3.min.js
jquery.mobile-1.3.2.min.js
jquery.mobile-1.3.2.min.css
Am i missing anything? Please help me.How to make the UI look and feel good?
Thanks
To make UI in Phonegap, jQuery Mobile is good, but not the best. If You want the best result in performance and UI then you'll have to use Sencha Touch. Please visit this Link it may be helpful to you.
I would suggest to use ThemeRoller to get your UI in jQuerymobile framework
Check the following link
http://jquerymobile.com/themeroller/index.php
Speaking for myself, I've used jQuery Mobile with Phonegap, and I'm fairly happy with it. I don't think the problem you're having with the corners is jquery mobile, but rather related to whatever emulator program you're using; they work fine for me on various resolutions on my laptop, tablet, s3 & iphone, even when I zoom out/in between 25% and 500% on chrome using ripple.
To make a nicer interface, you can use jQuery Mobile's ThemeRoller.
jQuery Mobile framework is not important for phonegap app, you can customize your own styles using normal HTML and CSS (CSS3 also).
Related
I have created an app with jquery mobile and html5. I created a wp8 package using cordova for the same and have openend the solution with visual studio. The issue I am facing is that the window.location is not working. I have given
window.location.href='home.html#basic' making it redirect to a particular div. I also tried window.location.replace. Using show and hide dive makes the functionality work but many css issues are coming when i use div show and hide. I have gone through many previous questions but still not found any solution. Please help.
Hi all it worked i changed it to $.mobile.changePage('#basic'); and it worked
I am using jquery mobile 1.1.1 with android 4.0.3 and phonegap. Everything seems to be running smoothly and on iOS and the earlier android versions however, on this version of android stuff is displaying incorrectly. I am dynamically creating an unordered list and then calling $('#myList ul').listview('refresh'); on it. However when it displays it looks like this:
Then I click the screen and it flickers and displays as this(notice how I lose the footer):
Is this a bug with android 4.0.3? Is there a way to get this to display correctly off the bat?
I had it today. I don't know if you're in the same case as me, but I used -webkit-backface-visibility:hidden css attribute to "correct" the white flash with previous version of jQuery Mobile. But in the 1.1.1 with PhoneGap, I had the same thing than you.
So if you use it, just remove it ! If not, I'm sorry for you...
I m designing an appliaction for mobile phone. Do I need to write different set of code for both the orientations of mobile? Please suggest some ideas.
Thanks
You have to use media queries css to design both orientation and have a look on this url
CSS-Tricks: Media Queries for Standard Devices
there are two ways if you are making you style sheet in pixels then you have to make separate style sheet but if you are using percentage then your style sheet works in both orientation
If you are developing a web application for pc, you need not to worry about the code related with application.All the code for pc version will be active for mobile too.But you need to worry about the page layout-for this you can build a separate mobile version or you can build a mobile compatible website by using separate stylesheet.
I will recommend you to build a separate mobile version page.But still you need not to modify the code related with application.
For mobile page, you can use jquery mobile framework
Good to see some ways you can refer here!
Does anyone know like if it is possible to implement the drag-drop functionality on the iPad?
Something similar to what is available on;
http://jqueryui.com/demos/droppable/
I mean if this can be implemented directly or via some workaround..
Looking at the tags, I'm guessing you're not looking for a native solution. Have you looked into a mobile javascript framework such as Sencha Touch? It seems to have the support you need, and is specifically designed for mobile development:
http://www.sencha.com/products/touch/
You can use this script https://github.com/furf/jquery-ui-touch-punch for playing jquery UI features in Ipad or Iphone.
Hope it helps.
jquery iphone ui and jqtouch
they are lib of iphone , i want to choose one to use,
which is better ?
thanks
I have only used jQTouch, and have been happy about it. It's a fairly light-weight, yet powerful framework.
Peepcode has a nice introductory video tutorial on jQTouch for just $9. If you're evaluating it, you may want to give it a go.
One thing that took me a while to figure out is the use of a tab bar with jQTouch, which isn't directly supported with the current stable release. If you're using tab bar, you should use a later version of jQTouch.
JQuery iPhone UI seems like a more heavy-weight framework. I suggest you to get the full version and play with the demo applications that come with it. That should give you a good idea about the smoothness of the animations. One thing I found is that, this framework may actually support more than just WebKit, whereas jQTouch is pretty much targeted at WebKit browsers.