Jquery Mobile Newbie Issues

Http://www.wglong.com/main/artical!details?id=4#q9

2013-04-22/Category: Jquerymobile/Tags: jquerymobile,jqm,jquerymobile tutorial, JQM Tutorial

This article will be continuously updated, mainly includes some novice more common problems.

Welcome to recommend to me more typical common problems, I will record and organize into articles, convenient for you.

Article Guide:

• 1, page zoom display problem
• 2, the page jumps after the style lost JS failure
• 3, the jump when repeated calls Pageinit method solution
• 4. How to invoke the loading effect
• 5, dynamically changed the contents of the list, but the content has not changed
• 6, put all the content on a page good, or separate multiple pages good
• 7, how to disable the AJAX jump
• 8, why android2.3 System turn screen no effect?
• 9, how to remove the JQM to bring the component style?
• 10, jquery mobile "splash screen" problem

2013/4/30 Update content:

• 11, the button pressed/across the state feeling a little slow reaction?

2013/5/1 Update content:

• 12, jquery mobile various components Refresh method

2013/5/7 Update content:

• 13, add components dynamically on the page, found that the CSS disappeared

2013/5/22 Update content:

• 14, about the checkbox to take the value problem

2013/5/28 Update content:

• 15, click the screen, the header and footer will be slightly shaky?

2013/6/20 Update content:

• 16. JQM Icon | hide text on image | Remove icon Shadow | Custom Icon | Remove button Shadow/Fillet
• 17, JQM components display Normal, but the small icon is "empty", no normal display
• 18, $.mobile.changepage method can not jump normally

1 Page Zoom display problem

Problem Description:

The page seems to be zoomed out and the screen is too wide.

Workaround:

In the head tag, add:

<meta name= "viewport" content= "Width=device-width, initial-scale=1" >

2 page jumps after style lost JS invalidation

Problem Description:

When using Ajax to jump, from a.html to b.html, b.html CSS and JS are invalid.

Workaround:

Put the CSS and JS in the <page>div that the current page needs to use.

Principle:

Since the JQM Ajax jump, only the contents of the <page> inside the b.html loaded into the DOM, and the code outside the <page> will not load, so that the <page> outside the JS and CSS are invalidated.

3 How to repeatedly invoke the Pageinit method when jumping

Problem Description:

When using Ajax to jump, from a.html to b.html, with the return a.html from b.html and so on, the code in the Pageinit method is called multiple times.

Workaround:

Add the Data-dom-cache= "true" attribute to the page, such as:

<div data-role= "page" id= "MyPage" data-dom-cache= "true" >

Then change the Pageinit method to Pageshow, such as:

$ ("#myPage"). Live ("Pageshow", function () {//...do something});

4 How to invoke the loading effect

JS Code:

View demo»

Scan to view Demo:

5 Dynamically changed the contents of the list, but the content did not change

Workaround:

Call the component's Refresh method to refresh the list, such as:

$ ("#contentList"). Append (Content). ListView (' Refresh ');

Principle:

The JQM component is displayed by hiding the original Web component and using the JQM custom UI component instead of the original Web component display. The value of the list is changed dynamically, but the value of the original component list is changed, and the value of the JQM list component is not updated, so the Refresh method of the list component needs to be called to update and display.

Note: This problem is not limited to the list component, and basically all JQM UI components need to invoke the Refresh method of the component after changing the value, such as the button component ($ (' #id '). Button (' Refresh ') and so on. For more refresh methods, see: jquery Mobile Components Refresh method

6 put all the content on a page good, or separate multiple pages good?

For this question, say the author's personal opinion:
#1所有内容放到同一页面
#2分页面存放内容
For # #, if it's a relatively simple page content, consider putting the content on the same page. However, if the page structure is very complex, jump page more, then the # # will appear very bloated, increase the complexity of maintenance.
And the page is more suitable for the structure of the page and more than the case, easy to maintain.
Performance, the author looked up some information, but also did some experiments, and did not find obvious differences in performance.
Conclusion: According to personal coding habits, both options are possible. But it does not seem to mix, according to the selection of the project to use it.

7 How do I disable Ajax jumps?

Problem Description:

Although the Ajax jump has a great screen animation, there are times when it is necessary to disable AJAX jumps for performance or for business needs.

Workaround:

There are two ways to prohibit Ajxa jumps:

1, prohibit the partial Ajax jump

2. Prohibit global Ajax jump

For # # Just add the following attribute to the a tag:

Data-ajax= "false"

Sometimes we use normal HTTP requests instead of AJAX requests, such as linking to other websites. The link can be specified as a normal HTTP request by adding the following attribute to the a tag:

Rel=external 

For # # We need to set a global way to prohibit Ajax jumps, JS code is as follows:

$(document).  Bind("Mobileinit",function(){//disable Ajax nav$.  Mobile.  Ajaxenabled=false});              

Note: The above code snippet needs to be placed before Jquery.mobile-xxx.min.js is introduced.

By the way, the initialization settings need to be placed here, such as the setting to load the error message:

$. Mobile.  =' Sorry, something went wrong. Please try again. ' ;

8 Why does the android2.3 system turn screen to have no effect?

Problem Description:

Found in Android2. X System test when the slide and other rotary screen effect is not very good display, but a flash past. But the android4.0+ display is normal.

Problem Analysis:

The reason is Android2. x system to slide and other screen effect support is not very good, because slide and other effects need 3D support, and Android2. X system does not support the

And JQM encountered this situation when the effect of slide, such as "degenerate" to fade the effect, according to the author's test even if the fade effect is not satisfactory, feel a bit like "splash screen", in this case directly to the rotary screen effect is set to none, but more comfortable than this fade-in look.

Since Android2. X does not support 3D transitions, but android4.0 support, I would like to retain the transition effect on the 4.0 system, and to remove the transition effect on 2.X what to do?

The workaround is simple, just add the following code:

$. Mobile.  Transitionfallbacks.  ="None"      

More about the "splash screen" problem, see: 10, jquery mobile "splash screen" problem

9 How do I get rid of the JQM component styles?

Problem Description:

Although JQM offers a more aesthetically pleasing component style, there are times when we need to get rid of the style jqm comes with.

Workaround:

The solution is simple, just add the following attribute to the component:

Data-role= ' None '

Or configure the Keepnative option in the Mobileinit event

$ (document). Bind (' Mobileinit ', function () {      $.mobile.keepnative = "SELECT, Input.foo, Textarea.bar";  

jquery mobile "splash screen" issue

Official Description:

Important: SomePlatforms currently have issuesWithTransitions. Weis working on a solution to solve the problemForEveryone. IfYou are experiencing flickersandFlashes duringOrAt theEndOf a transition we suggest the following workaround. PleaseNote thatThisWorkaround should be thoroughly tested on the target platform before deployment. This workaround is known to cause performance issues and browser crashes on some platforms, Especially android. add The following code to your custom Css.ui-page { -webkit-backface-< Span class= "PLN" >visibility: Hidden; Span class= "pun" >               

Even with the official CSS snippet, the effect is still unsatisfactory, and this problem is still a serious problem for JQM, hoping that the next version will solve the problem.

In addition to the 8, why android2.3 System turn screen no effect? Mentioned in the content, recently in the group chat, Nanjing-just Tiger proposed a can alleviate the scheme, namely: can change jqm CSS, let flash background color and page consistency, specifically modify the following CSS:

. Ui-body-c .-overlay-c { Border: 1px solid  #AAA;  Color:  #333; :  #F9F9F9;//Modify the color code here "               

I think this is a good idea, is worth a try, but the author has not personally experimented, the need for friends can personally try, have time to remember to come back in the comments to publish the results of the experiment Oh.

11 button pressed/across the state feeling a little slow?

The workaround is simple, just add the following settings:

$.mobile.buttonmarkup.hoverdelay = "false";

jquery Mobile Various components Refresh method

1. Combobox or select dropdowns

var myselect = $ ("#sCountry"); Myselect[0].selectedindex = 3; Myselect.selectmenu (' refresh '); or$ (". Selector"). Selectmenu ("Refresh", true);

2, ListViews

$ (' #mylist '). ListView (' Refresh ');

3. Slider Control

$ (' #slider '). val. Slider (' Refresh ');

4. Toggle switch

var myswitch = $ ("#toggle"); Myswitch[0].selectedindex = 1; myswitch. Slider ("Refresh");

5, Radio buttons

$ ("Input[value=grid]"). attr (' checked ', true). Checkboxradio (' refresh '); or$ (". Selector"). Prop ("checked", true). Checkboxradio ("Refresh");

6, checkboxes

$ (' #checkbox-1 '). attr (' checked ', true). Checkboxradio (' refresh '); or$ (". Selector"). Prop ("checked", true). Checkboxradio ("Refresh");

7, Buttons

$ ("[type=]"). Button ("refresh"); or$ (". Selector"). Buttonmarkup ("refresh");

8. Column-toggle Table

$ (". Selector"). Table-columntoggle ("refresh");

9. Reflow Table

$ (". Selector"). Table ("Refresh");

13 Add components dynamically on the page and find that the CSS is gone

First please try the solution above problem 12, if it is not effective, then try to add. Trigger (' create '), for example:

$ ("#id"). HTML (content). Trigger (' create '); Or$.mobile.pagecontainer.trigger ("create");

14 about the checkbox fetch value problem

Netizens wandering Melody in the checkbox to value, found that the official website did not provide relevant methods, through the access to data finally found the method of value, and find me to share in this, thanks again wandering melody sharing spirit!

The following values are taken:

$ (. CheckBox) [0].checked

View checkbox Value demo»

Download checkbox Fetch Value demo»

15 Click on the screen, the header and footer will slightly jitter?

Problem Description:

When the real machine is running, tapping the screen will reveal a slight jitter in the header and footer.

Workaround:

Add the following attributes to the header and footer:

Data-tap-toggle= "false"

Adding this property can also solve the problem of clicking on the screen header or footer disappearing.

jqm Icons | icons | Hide the text on the image | Remove the icon Shadow | Customize Icon | Remove button shadow/Fillet

1, icon positioning Data-iconpos

By default, all icons are placed on the button's button text to the left. This default can override using the Data-iconpos property to set the upper-right (top), bottom (bottom), right-hand, left-hand text of the icon

2, hide the text on the picture data-iconpos= "Notext"

You can also create an icon button to set the Data-iconpos= "Notext". The button plug-in will hide the text on the screen, but take it as a ToolTip to the screen reader and the device supports the contextual link title property. For example, data-iconpos= "right", data-iconpos= "Notext":

3. Custom icon data-icon= "Custom Value"

With a custom icon, you need to specify the Data-icon value. Jquery Mobile's button plugin will generate a CSS class with a prefix of ui-icon-, followed by a Data-icon value. If: There is a button data-icon the value of the property is Myapp-email, which is data-icon= "Myapp-email". Then the production of the CSS class is: Ui-icon-myapp-email.

Then you can write a CSS rule in your stylesheet to define the Ui-icon-myapp-email. Then specify the background image address of the class in the CSS. To maintain visual consistency with other icons, create a white 18x18 pixel PNG-8 icon and save it as alpha transparency.

. UI-icon-MyApp-{ background-image: URL(" App-icon-email.png "); }

This will create a standard resolution icon, but many devices have a very high resolution monitor, just like the iphone 4 Retina display. Add a High Definition icon, create an icon, 36x36 pixels (18 pixels in exactly the same size twice times), and add a second rule using the WebKit minute device pixel scale: 2. The media queries to the target's rules only with high-resolution displays. Specify background picture HD icon file and set background pixel size 18x18 will install 36 pixel icons to the same 18 pixel space. Media query blocks can use multiple icon rules:

@mediaOnly screenand (-Webkit-Min-Device-Pixel-Ratio: 2) { .Ui-icon-myapp- email { Background-: Url (   background -size: 18px  18px;}  ... more HD icon rules go here ... }             /span>                

4. Remove the button shadow/fillet

Data-shadow= "false" data-corners= "false"

This summary citation: http://www.wpdic.com/?p=59

JQM component display is normal, but the small icon is "empty", no normal display

Problem Description:

For example, the return button in the header, the display and function of the button are normal, but the "Back small icon" on the button is not displayed.

Workaround:

This is due to the absence of the introduction of JQM image files, the solution is to find the images folder in the JQM resource bundle, and the images folder into its own project, and jqm CSS files in the same level directory.

$.mobile.changepage method cannot jump normally

Problem Description:

$.mobile.changepage cannot jump, but window.location.href can jump normally.

Principle:

This problem involves JQM jump mechanism, simply say JQM the default jump way, that is, $.mobile.changepage this way, the principle is the Ajax jump. It sounds mysterious, in fact, that the content of the target page is dynamically loaded into the current DOM via Ajax. When the multi-page jump, through the Ajax jump, there is an Ajax cross-domain problem. So solving the current problem is actually solving the problem of Ajax cross-domain.

Workaround:

In order to solve cross-domain problems, we need to put the project in a server environment. Many friends do not know what is called the server environment, the plain is to deploy the project to Wamp or Tomcat and so on the server, and then through the http://localhost/xxx way to access the project.

Summary: Here refers to the JQM jump mechanism, the author has previously written an article: jqm: Turn screen effect of the simulation, this article is not used JQM, but to simulate the JQM jump process, want to learn more about JQM Jump friends can see this article implementation principle.

19 ... What else needs to be added to the question? Please contact me

Original articles, reproduced please specify the source: http://www.wglong.com/main/artical!details?id=4

Jquery Mobile Newbie Issues