50 jquery Mobile Development Tips Collection

1.Backbone Mobile Instance

This is a backbone mobile app that runs in Safari. To start experiencing mobile development, a good starting point is to focus on how this application is built. You may want to view the application in your browser.

RELATED Links: http://bennolan.com/2010/11/24/backbone-jquery-demo.html

2. use media queries to lock devices

You may ask how to use CSS to lock the device (depending on the screen size). For example, you want to design a two-column layout for your ipad and a single-row layout for your smartphone. The best way to do this is to use media queries. As long as some simple media queries are in place, you can quickly get CSS to lock the screen size.

RELATED Links: http://css-tricks.com/6731-css-media-queries/

3. Quick tips: How to use @font-face

Several font replacement methods can be used, such as Cufon, SIFR, FLIR, @font-face, and Google Fonts APIs. When building a Web application using jquery Mobile, I found that the @font-face method was the easiest method to use and its performance was quite satisfying.

RELATED Links: http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-how-to-work-with-font-face/

4. where to add additional jquery calls

If you want to change the content on the page before the mobile plugin is triggered, the recommended solution is to put the traditional jquery call before loading the reference to the mobile plugin. This way, your jquery command will have the opportunity to run before the library is loaded.

RELATED Links: http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

5, the complete basic page

You may find yourself repeatedly required to create a complete tag for the base page. Because of this, this is all the code needed to create a basic page.

RELATED Links: http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

6. Create a column structure yourself

If you want to design the best single page structure for multiple devices, you will find yourself often using the media query techniques described above and the "Random column" (columns in any order) method. Fortunately, web developers have long been figuring out how to move columns and use this method and media queries together.

RELATED Links: Http://www.positioniseverything.net/articles/onetruelayout/anyorder

7. combined use of Google Analytics (Google Analytics) tools and jquery Mobile

Learn how to use the Google Analytics tool together with jquery Mobile.

RELATED Links: http://www.jongales.com/blog/2011/01/10/google-analytics-and-jquery-mobile/

8. Submit a jquery mobile form via Ajax and PHP

You can learn how to submit a jquery mobile form via Ajax and PHP.

RELATED Links: http://www.giantflyingsaucer.com/blog/?p=2574

9. How to use jquery Mobile to create mobile WordPress themes

This tool makes it easy for you to create mobile websites and Web applications. In this tutorial, I'll show you how to create a WordPress theme optimized for mobile devices.

RELATED Links: http://www.catswhocode.com/blog/how-to-create-a-mobile-wordpress-theme-with-jquery-mobile

10. use jquery Mobile to create a website, the first part

In this tutorial, I'll show you how to use jquery Mobile to create a Web site. In this first part of the tutorial, I'll explain the features of the site and also implement the site's home page.

RELATED Links: http://miamicoder.com/2011/creating-a-website-using-jquery-mobile-part1/

11. use jquery Mobile to create a website, the second part

The next section of the series on how to use jquery Mobile to create a Web site now introduces the build speaker (speakers) page.

RELATED Links: http://miamicoder.com/2011/creating-a-website-using-jquery-mobile-part-2/

12. Disable button action

Here's how to disable button actions (such as disabling the opening of a page) and add the following JavaScript.

RELATED Links: http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

13. Create pop-up dialog box

A handy feature of the JQuery Mobile library is the built-in pop-up content or dialog box feature. The feature of creating this convenience is very simple. Note: First, the target page must be the complete jquery mobile page, as outlined in the first tip. Second, this applies only to external pages; it must be a complete, separate page to work properly.

RELATED Links: http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

14.Introduction to JQuery Mobile

You can learn how to use the jquery mobile framework. This basic introduction focuses on creating pages, links, navigation, and buttons.

RELATED Links: Http://www.youtube.com/watch?v=VY20Q6ON4QA

15, set the background color of the page

This may sound simple, but it took me several minutes to figure out how to add a background color to the page without being overwritten by the jquery Mobile CSS. You usually set the background color for the main element, but if you're using the jquery mobile framework, you need to set it to the Ui-page class.

RELATED Links: http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

16.JQuery Mobile: What can I do for you?

Find out how the new jquery Mobile framework can help you easily build Web applications that look great and run across devices. Includes many code samples and demos. Learn to create a simple jquery mobile application.

RELATED Links: http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/

17. Prohibit loading pop-up messages

I think loading pop-up messages is a bit annoying, because whenever you load a different page, the action is triggered. To disable this operation, simply add the following line of code to your JS file.

RELATED Links: http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

18. How to use jquery Mobile to create an RSS reader program

Today, we'll dive into the use of PHP and jquery Mobile to create a simple tuts+ RSS reader. Once created, you can add this simple item to your iphone or Android phone by simply clicking on the button and using the skills of building a Web application.

RELATED Links: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/

19,"Cancel" and "Save" button combinations

This code satisfies two basic requirements. The first requirement is to have two buttons adjacent to each other. Fortunately, the JQuery Mobile library has a built-in column structure that is easy to take advantage of by using fieldset tags and the appropriate classes, as shown below. The second requirement is to have two buttons with different themes. This code comes directly from the documentation and I leave it handy so I can use it frequently.

RELATED Links: http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

20. use jquery to lock the platform

Although we would like to execute some CSS statements for some devices, we also want to run jquery on only certain devices. Some of the code from SNIPPLR has been changed so that I can easily isolate part of jquery to run on the user's device.

RELATED Links: http://snipplr.com/view/31607/iphone-ipad-ipod-detect/

21. Create a custom theme

The JQuery mobile framework comes with five themes: theme A, theme B, theme C, theme D and subject E. But you can easily create a new theme for your Web application.

RELATED Links: http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

22. prevent some key items from being truncated

One of the features of the library (or the downside, depends on what you need) is that it intelligently truncates long items to fit the user interface elements.

In both cases this can be annoying. First, in the list item, I prefer to see all the text. The second is in the footnote text.

RELATED Links: http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

23, Two iphone development tips, jquery Help

The first and simplest technique is to use viewports. (You may need to register with Apple to view the link.) Need to login to access simple documents, Apple buckle two points!) A viewport is a simple meta tag. This is an example:

RELATED Links: http://www.coldfusionjedi.com/index.cfm/2008/10/9/Two-iPhone-development-tips-and-jQuery-to-the-rescue

24. remove arrows from list items

By default, the JQuery mobile framework adds an arrow next to each list item. To disable this feature, simply set the Data-icon property to "false" for the list item for which you want to remove the arrow.

RELATED Links: http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

25.JQuery Mobile Form Verification

You can use this tutorial to learn about jquery mobile form validation.

RELATED Links: http://www.elijahmanor.com/2011/02/jquery-mobile-form-validation.html

26. use jquery Mobile's HTML5 canvas elements to listen for touch events on ipad and Android browsers

JQuery Mobile supports a multitude of touch events, greatly simplifying the work of developers. In fact, JQuery Mobile makes sure that your Web application runs on both the mobile browser and the desktop/laptop browser. Unfortunately, you simply cannot predict that JavaScript click events will work on mobile devices as they do on desktop/laptop browsers.

RELATED Links: http://www.giantflyingsaucer.com/blog/?p=2658

27.JQuery Mobile Touch Event: Quick Press

You can learn how to detect "quick Press" touch events on your smartphone device.

RELATED Links: http://www.youtube.com/watch?v=-ywcCfbnQhM&feature=related

28 . Using jquery Mobile with Appmobi

This instructional video shows you how to use the new mobile version of the popular jquery JavaScript library with Appmobi. JQuery Mobile makes it easy to create apps with all the look and feel of native apps, with built-in buttons, transitions, forms, and more.

RELATED Links: http://www.youtube.com/watch?v=otBNufYLXNc&feature=related

29. Disable all linked Ajax navigation functions at the same time

Although Ajax navigation is a great feature, there are times when you want to disable this feature altogether. Use this jquery code to tell the mobile library not to use the Ajax navigation feature.

RELATED Links: http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

30, the page loading, display the randomness of the background image

JQuery Mobile has a number of page initialization events that you can use to trigger certain methods when the page loads. The following CSS + JavaScript can be used to display a random background image whenever a page is loaded.

RELATED Links: http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

31. Create a button with only images and no text

Sometimes, you may not want the button to have any text, but still use the rest of the features that are supplied with the button element. This is usually the case with the Home button or information button. To hide any text related to the button, set the Data-iconpos property to "Notext". Like what:

RELATED Links: http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

32.jQuery Mobile Toolbar navigation menu

Learn how to use jquery Mobile's toolbars and navigation bars to create fixed-position menus and more!

RELATED Links: http://www.youtube.com/watch?v=JTNp0CkIZio&feature=related

33.Search list in jQuery mobile

It's easy to create a list that includes a search element that allows the user to start typing text and get all the elements that are filtered out of the list for that text.

RELATED Links: http://www.youtube.com/watch?v=09sGNvHgIzE&feature=related

34.jquery Mobile: Official jquery Mobile development Framework

This mobile development framework has a number of great features that allow mobile developers to add professional-grade jquery effects to iOS, Android, BlackBerry, Bada, Windows Mobile, Palm OS, Symbian and Meego applications and Web applications. You should see this bad boy in Mobile Safari.

RELATED Links: http://iphonemonsta.com/jquery-iphone-mobile-development-framework-mobile-touch-optimized

35, the page conversion effect does not use AJAX to open the link

If you want to open the link (that is, reload the entire page in the traditional way) without using the AJAX page conversion effect, set the Rel attribute to "external".

RELATED Links: http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/

36.jQuery Mobile Multi-page internal link

This short video snippet explains how internal links work in jquery mobile.

RELATED Links: http://www.youtube.com/watch?v=OqLPP70XnVY&feature=related

37.dialogue Conversion in JQuery mobile

You can learn how to set transitions when displaying dialogs in jquery Mobile.

RELATED Links: http://www.youtube.com/watch?v=Zh0yxy8YWYs&feature=related

38. Add driving directions to the jquery mobile website

Learn how to add driving directions to the jquery mobile website.

RELATED Links: http://www.coldfusionjedi.com/index.cfm/2011/3/9/Adding-driving-directions-to-a-jQuery-Mobile-web-site

39.JQuery Mobile Framework--form tutorial

In this tutorial, we'll highlight some of the basic elements of jquery Mobile: page structure, forms, and Ajax form submissions. This tutorial is based on version 1.0 of the jquery Mobile Framework Beta 2.

RELATED Links: http://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery-mobile-forms/

40.Simple List view in JQuery mobile

This video clip shows how to create a simple list view in jquery Mobile.

RELATED Links: http://www.youtube.com/watch?v=Jmg8GdEKDjA&feature=related

41.Split list in JQuery mobile

We can add a secondary link for each list item. It is displayed along with the icon in the right part of the project.

RELATED Links: http://www.youtube.com/watch?v=YaZhS_8vaYo&feature=related

42.forms controls in JQuery mobile

This short video snippet shows the controls available when using the jquery Mobile library.

RELATED Links: http://www.youtube.com/watch?v=O2fvX4gtR4A&feature=related

43.title and footnote fixed position in JQuery mobile

This short video snippet shows the meaning of setting a fixed position for the title and footer in jquery Mobile.

RELATED Links: http://www.youtube.com/watch?v=eDwwesKzzkU&feature=related

44.jQuery Mobile Inline button

We can add the data-inline= "true" property to the button to get the width of the button that is not the width of the screen. This video clip shows how to do this.

RELATED Links: http://www.youtube.com/watch?v=Bp0i4NqVE_4&feature=related

45. Hello World in JQuery mobile

This short video snippet explains how to develop a simple Web page that uses the jquery mobile library.

RELATED Links: http://www.youtube.com/watch?v=8YR4XuxwtKc&feature=related

46. use jquery Mobile to build a mobile website with offline functionality

You can learn how to use jquery Mobile to build a mobile website with offline functionality.

RELATED Links: http://www.coldfusionjedi.com/index.cfm/2011/3/12/Building-an-offline-capable-mobile-web-site-with-jQuery-Mobile

47.JQuery Mobile and JSON

This tutorial describes the jquery Mobile (JQM) framework that you can use to write mobile Web applications for several of the leading browsers in the mobile industry. JQM can be used to provide an intuitive and consistent user experience for Web-based applications running on many mobile devices, such as the iphone, IPad, Android, WebOS, BlackBerry version 6 (Torch and playbook), and other mobile devices. This tutorial first summarizes the JQM project and the relationship between JQM and HTML5. This tutorial introduces one of the many methods used to build a JQM application, and some ways JQM improve basic Web user interface elements, and finally introduces basic sales force automation requirements.

RELATED Links: http://www.ibm.com/developerworks/xml/tutorials/x-jquerymobilejsontut/index.html

48. Create and use a custom icon in jquery mobile

This article describes how to create and implement a custom icon. In addition, I'll show you how to add high-resolution icon support for the retina screen of the iphone 4 and the newer high-resolution devices.

RELATED Links: http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

49.Introduction to JQuery Mobile & Rails 3

This app allows you to create, read, update, and delete post posts from your mobile device.

RELATED Links: http://fuelyourcoding.com/getting-started-with-jquery-mobile-rails-3/

50. use jquery Mobile to build a native Android news reader app

Learn how to use jquery Mobile to build a native Android news reader application.

50 jquery Mobile Development Tips Collection (RPM)