I am new to jquery mobile so i need help regarding using buttons in jquery mobile. I need to include back button in header like mentioned below also the text 'Home' in center .I need to tile this image .But i dont see anywhere tiling this image.Can you please help on this.
I don't know what you mean by "tiling the image". And hard to answer not knowing the details of what browser(s) you expect this to work in, etc.
jQuery Mobile doesn't try to look like any particular OS.
If you want it to look like iOS (or, at least create an iOS-like "back" button") you are on your own. jQuery Mobile doesn't support this directly and likely never will.
Fortunately, others have solved this problem, and so if you do some searches like "jQuery Mobile iOS theme", "jQuery Mobile iOS back button", or, more generally, "CSS iOS theme" or "CSS back button" you should find a suitable (though perhaps not great) solution. (For the latter two searches, you will need to figure out how to integrate it with JQM CSS.)
Trust me, you will find many choices. There is no end to developers trying to give their website, webapp, or hybrid app the "iOS look".
Unfortunately, though, this is not really that easy to do, and even less easy to do right, and so the solutions you find will have varying degrees of success. I've long ago found myself agreeing with the JQM developers (something I don't do often!) that it really doesn't make much sense to slavishly copy the iOS "look" - a look that is now aging and that is in any case a moving target as Apple slowly changes the look.
This particular button is surprisingly difficult to achieve. The best implementations I have seen use pure CSS to cleverly construct the button using corner radii and mask elements, and so will look good on any device.
The problem with using an image is that it will look bad when scaled on different devices with different screen sizes and different device pixel ratios. If you are designing only for a particular device, it's reasonable to use a bitmap. Even so, if you are designing only for iOS, then you will still need to create at least 4 different images - iPhone, iPhone Retina, iPad, and iPad Retina. In addition, if you are making a truly native-like header bar, you will need 4 more images for the landscape header bar (which is shorter in native apps.) So, now you need 8 different images, just to support iOS.
jQuery Mobile choose not to step into this swamp. Images aren't used to create button shapes, and so you will have to find your own solution.
If you really want to do this, I'm sure there are many here who have implemented one or the other of the various solutions, and can point you to specifics.
As for myself, I'm moving toward eliminating buttons altogether, in favor of pure icons. What purpose does the button skeuomorphism serve? I am coming to realize that all that ornamentation just takes up precious pixels for no real purpose. It makes the design "heavy" and forces icons to be smaller than they could otherwise. (And so this is where I will part with the JQM design concept. Those tiny little icons are neither very functional nor practical.)
User's don't need to see a "button". They are smart enough to figure out that if they see an icon, they can probably tap it and something will happen. Modern designs are losing the buttons.
Best solution for this would be to use a character in an icon font (which is the way I'm doing icons lately) to create the button shape. I haven't seen that solution, but I assume somebody has done it.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic