Getting started with any new technology is often hard, isn’t it? However, as a huge popular client-side scripting language, Javascript does not need any introduction. And jQuery is a cross-platform javascript library that is easy to use, fast and concise. Here in the post, we will be discussing some of my handiest tips and tricks related to JQuery mobile library. JQuery mobile is a framework that is mostly used to design web & mobile applications and websites. The framework is meant to offer the user with a unified interface across all mobile platforms and desktop devices.
Here jQuery developers of eTatvaSoft would like to mention a few tips that one can use in any Mobile App Development. Take a look!
Tips are :
Setting the background color of a page- Most of the skilled developers tend to change the background color of a page without the necessity of having to write it repeatedly in the JQuery mobile CSS. This may sound a bit tricky but the tip can save you from a lot of hassle once you start designing the apps for mobile users. In general, setting up the background color to the body element would work but now that you are using JQuery mobile framework, you can easily link it to the UI-page class.
Disable the loading popup messages- Majority of the users find pop-up messages pretty annoying especially if they show up each and every time you try loading the page. In order to make your end users enjoy flawless browsing experience, JQuery developer has to disable such messages. And for this, add the following code to your JS file; $.mobile.pageloading(true); and you will not have to deal with loading popups ever again.
Using media queries to target devices- With the help of media queries, one can always target devices in CSS based on the size of their screens. Here you can come up with a two column layout for tablets and a single one for smartphones. However, in any jQuery app development, the developer needs to have a couple of media queries in place in order to achieve this, after this only you can make the CSS target different screen sizes on the quick and effective basis.
The combo of “Cancel” and “Save” button- This is something that most of the web developers are looking forward to, a library that will design apps with two buttons next to each other. In addition to this, some even think of placing two sets of buttons with different themes together.
Adding traditional JQuery calls- Web developers can amend items on the web page before a mobile plug-in has been activated. In order to achieve this, jQuery developers can place a traditional jQuery call right before the call that triggers the loading of the mobile plug-in. By doing this, your jQuery commands will have a fair chance to run before the library begins loading.
Creating popup dialogs- The library comes with a wide range of built-in features, out of one which is pop-up dialogue box. In order to make effective use of the feature one needs to set this up. For this, you will have to open an external jQuery mobile page first, make sure to choose one that is completely different from the page that you are modifying.
Create a column structure- Most of the JQuery application development feature structuring a single page in such a way that they can be read easily from different devices. This can be achieved by using a technique called “columns”. Try moving the columns around through the combination of this technique and of course, a few media queries. And in the end, you will achieve great results with minimal hassle.
Target platforms with JQuery- A JQuery developer always focus on different mobile devices especially when they are designing for mobile. Well, this can be considered as a great thing as targeting on any one platform for a design may not be considered as a smart move. The below-mentioned code can be used, to allow some parts of the jQuery to run:
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
// do something special
}
On and all, JQuery app development is very easy and fantastic way of developing apps for mobile users worldwide. I am sure by following the aforementioned tips will help in creating a perfect looking website for mobile devices.