10 common JavaScript codes for mobile website development

Source: Internet
Author: User
Tags truncated
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
  1. VaR updateorientation = function (){
  2. VaR classname = '',
  3. Top = 100;
  4. Switch (window. Orientation ){
  5. Case 0:
  6. Classname + ="Normal ";
  7. Break;
  8. Case-90:
  9. Classname + ="Landscape ";
  10. Break;
  11. Case 90:
  12. Classname + ="Landscape ";
  13. Break;
  14. }
  15. If (classname = 'landscape '){
  16. If ($ ('# overlay'). Length = 0 ){
  17. Window. scrollto (0, 1 );
  18. $ ('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> ');
  19. }
  20. }Else {
  21. $ ('# Overlay'). Remove ();
  22. }
  23. };
  24. Usage:
  25. VaR supportsorientationchange = "onorientationchange" in window,
  26. Orientationevent = supportsorientationchange?"Orientationchange": "resize ";
  27. Window. addeventlistener (orientationevent,Function (){
  28. Updateorientation ();
  29. },False );

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

JavaScript code
  1. VaR truncatedesc = function (trunc, Len ){
  2. If (trunc ){
  3. VaR org = trunc;
  4. If (trunc. length> Len ){
  5. Trunc = trunc. substring (0, Len );
  6. Trunc = trunc. Replace (/W + $ /,'');
  7. Trunc ='<SPAN class = "truncated">' + trunc;
  8. Trunc + ='<Strong class = "More-description">... </strong> </span> ';
  9. Trunc + ='<SPAN class = "original" style = "display: none;">' + org + '</span> ';
  10. }
  11. $ ('. Truncated'). Live ("touchstart touchend", function (){
  12. $ (This). Closest ('div '). Find ('. original'). Show ();
  13. $ (This). Closest ('div '). Find ('. truncated'). Hide ();
  14. Return false;
  15. });
  16. Return trunc;
  17. }
  18. };
  19. Usage:
  20. Truncatedesc (item. Description, 100 );

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

JavaScript code
  1. VaR ajaxurl = 'HTTP ://... '; // Your web service URL
  2. $. Ajax ({
  3. URL: ajaxurl,
  4. Type:'Get ',
  5. Processdata:False,
  6. Contenttype:"Application/JSON ",
  7. Datatype:"Jsonp ",
  8. Success:Function (data ){
  9. $. Mobile. changepage ("Results.html ");
  10. },
  11. Error:Function (){
  12. Alert ('Error! ');
  13. }
  14. });

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> ';
    4. $ ('# 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.