10 common JavaScript codes for mobile website development

When developing mobile websites, some Javascript Code It is often used. The following are 10 common JavaScript codes. Note that several pieces of code must be supported by jquery mobile framework.

1. If the webpage is viewed on the iPhone or android browser, add the "iPhone" or "android" class name to the subject element.

JavaScript code

1. If (navigator. useragent. Match (/iPhone/I )){
2. $ ('Body'). addclass ('iphone ');
3. }Else if (navigator. useragent. Match (/Android/I )){
4. $ ('Body'). addclass ('android ');
5. }

IPhone user browsing example:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) applewebkit/420 + (khtml, like gecko) version/3.0 mobile/1a537a Safari/419.3
Mozilla/5.0 (iPhone; U; XXXXX like Mac OS X; en) applewebkit/420 + (khtml, like gecko) version/3.0 mobile/1a477d Safari/419.3

Android user browsing example:

Mozilla/5.0 (Linux; U; Android 2.2; en-US; Nexus One build/frf91) applewebkit/533.1 (khtml, like gecko) version/4.0 mobile safari/533.1
Mozilla/5.0 (Linux; U; Android 1.6; en-GB; Dell streak build/donut applewebkit/528.5 + (khtml, like gecko) version/3.1.2 mobile safari/525.20.1
Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; HTC Desire 1.19.161.5 build/ere27) applewebkit/530.17 (khtml, like gecko) version/4.0 mobile safari/530.17
Mozilla/5.0 (Linux; U; Android 2.2; en-US; droid2 global build/s273) applewebkit/533.1 (khtml, like gecko) version/4.0 mobile safari/533.1
Mozilla/5.0 (Linux; U; Android 2.2; en-GB; GT-P1000 build/froyo) applewebkit/533.1 (khtml, like gecko) version/4.0 mobile safari/533.1
Mozilla/5.0 (Linux; U; Android 2.1-update1; de-de; e10i build/2.0.2.a.0.24) applewebkit/530.17 (khtml, like gecko) version/4.0 mobile safari/530.17

2. Remove the browser address bar

JavaScript code

1. Window. scrollto (0, 1 );

3. Prevent webpage touch scrolling

JavaScript code

1. Notouchmove = function (event ){
2. Event. preventdefault ();
3. }
4. <Div data-role ="Page" id = "home" ontouchmove = "notouchmove (event);">
5. ...
6. </Div>

4. Information displayed during horizontal browsing

JavaScript code

2. VaR updateorientation = function (){
4. VaR classname = '',
6. Top = 100;
8. Switch (window. Orientation ){
10. Case 0:
12. Classname + ="Normal ";
14. Break;
18. Case-90:
20. Classname + ="Landscape ";
22. Break;
26. Case 90:
28. Classname + ="Landscape ";
30. Break;
34. }
38. If (classname = 'landscape '){
40. If ($ ('# overlay'). Length = 0 ){
42. Window. scrollto (0, 1 );
44. $ ('Body '). append ('<Div id = "overlay" style = "width: 100%; Height:' + $ (document ). height () + 'px "> <span style =" Top: '+ TOP + 'px "> landscape view is not supported for this page. </span> </div> ');
46. }
48. }Else {
50. $ ('# Overlay'). Remove ();
52. }
54. };
56. Usage:
60. VaR supportsorientationchange = "onorientationchange" in window,
62. Orientationevent = supportsorientationchange?"Orientationchange": "resize ";
66. Window. addeventlistener (orientationevent,Function (){
68. Updateorientation ();
70. },False );

5. Partial description information is displayed. complete information is displayed when you click.

JavaScript code

2. VaR truncatedesc = function (trunc, Len ){
4. If (trunc ){
6. VaR org = trunc;
10. If (trunc. length> Len ){
12. Trunc = trunc. substring (0, Len );
14. Trunc = trunc. Replace (/W + $ /,'');
18. Trunc ='<SPAN class = "truncated">' + trunc;
20. Trunc + ='<Strong class = "More-description">... </strong> </span> ';
22. Trunc + ='<SPAN class = "original" style = "display: none;">' + org + '</span> ';
24. }
28. $ ('. Truncated'). Live ("touchstart touchend", function (){
30. $ (This). Closest ('div '). Find ('. original'). Show ();
32. $ (This). Closest ('div '). Find ('. truncated'). Hide ();
34. Return false;
36. });
40. Return trunc;
42. }
44. };
46. Usage:
50. Truncatedesc (item. Description, 100 );

6. Redirect to another page (jquery mobile) when receiving a successful Ajax request)

JavaScript code

2. VaR ajaxurl = 'HTTP ://... '; // Your web service URL
6. $. Ajax ({
8. URL: ajaxurl,
10. Type:'Get ',
12. Processdata:False,
14. Contenttype:"Application/JSON ",
16. Datatype:"Jsonp ",
18. Success:Function (data ){
20. $. Mobile. changepage ("Results.html ");
22. },
24. Error:Function (){
26. Alert ('Error! ');
28. }
30. });

7. Delete the activity status (jquery mobile) from the link in the List View)

JavaScript code

1. $ ('Div '). Live ('pageshow', function (event, UI ){
2. $ ('[Data-role = listview] Lil'). removeclass ("UI-BTN-active ");
3. });

8. Disable the default jquery mobile style from the drop-down list)

JavaScript code

1. $ (Document). BIND ("mobileinit", function (){
2. $. Mobile. Page. Prototype. Options. keepnative ="Select ";
3. });

9. Dynamic Update List View (jquery mobile)

JavaScript code

1. VaR output = '<li> ';
2. Output + ='<H3> <a href = "' + item. url + '">' + item. Title + '</a>
3. Output + ='</LI> ';
5. $ ('# Mylistul'). append (output). listview ('refresh ');

10. dynamically Add the form input and default apply style (jquery mobile)

JavaScript code

1. VaR html = '<input type = "Search" name = "suburb" id = "suburb" Placeholder = "Enter suburb"/> ';
2. $ ('# Searchform'). append (HTML );
3. $ ('# Suburb'). textinput ();

Recommended books

The following two books on HTML5 and jquery will help you understand and use the jquery mobile framework.

HTML5: Up and running
Jquery: novice to ninja