10 common JavaScript codes for mobile website development

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

 
 

  
  
if (navigator.userAgent.match(/iPhone/i)) {  
  
  
    $('body').addClass('iPhone');  
  
  
} else if (navigator.userAgent.match(/Android/i)) {  
  
  
        $('body').addClass('Android');  
  
  
} 
 
 

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

 
 

  
  
window.scrollTo(0, 1); 
 
 

3. Prevent webpage touch scrolling

 
 

  
  
notouchmove = function(event) {  
  
  
    event.preventDefault();  
  
  
}  
  
  
<div data-role="page" id="home" ontouchmove="notouchmove(event);">  
  
  
...  
  
  
</div> 
 
 

4. Information displayed during horizontal browsing

 
 

  
  
var updateorientation = function (){  
  
  
    var classname = '',  
  
  
    top = 100;  
  
  
    switch(window.orientation){  
  
  
        case 0:  
  
  
        classname += "normal";  
  
  
        break;  
  
  
 
  
  
        case -90:  
  
  
        classname += "landscape";  
  
  
        break;  
  
  
 
  
  
        case 90:  
  
  
        classname += "landscape";  
  
  
        break;  
  
  
 
  
  
    }  
  
  
 
  
  
    if (classname == 'landscape') {  
  
  
        if ($('#overlay').length === 0) {  
  
  
            window.scrollTo(0, 1);  
  
  
            $('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>');  
  
  
        }  
  
  
    } else {  
  
  
        $('#overlay').remove();  
  
  
    }  
  
  
};  
  
  
Usage:  
  
  
 
  
  
var supportsOrientationChange = "onorientationchange" in window,  
  
  
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";  
  
  
 
  
  
window.addEventListener(orientationEvent, function() {  
  
  
    updateorientation();  
  
  
}, false); 
 
 

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

 
 

  
  
var truncatedesc = function(trunc, len) {  
  
  
    if (trunc) {  
  
  
      var org = trunc;  
  
  
 
  
  
      if (trunc.length > len) {  
  
  
        trunc = trunc.substring(0, len);  
  
  
        trunc = trunc.replace(/w+$/, '');  
  
  
 
  
  
        trunc = '<span class="truncated">' + trunc;  
  
  
        trunc += '<strong class="more-description">...</strong></span>';  
  
  
        trunc += '<span class="original" style="display: none;">' + org + '</span>';  
  
  
      }  
  
  
 
  
  
      $('.truncated').live("touchstart touchend", function() {  
  
  
        $(this).closest('div').find('.original').show();  
  
  
        $(this).closest('div').find('.truncated').hide();  
  
  
        return false;  
  
  
      });  
  
  
 
  
  
      return trunc;  
  
  
    }  
  
  
};  
  
  
 
  
  
Usage:  
  
  
 
  
  
truncatedesc(item.description, 100); 
 
 

6. When you receive a successful Ajax request, redirect to another page (jQuery mobile)

 
 

  
  
var ajaxurl = ‘http://…’; // Your web service URL  
  
  
 
  
  
$.ajax({  
  
  
    url: ajaxurl,  
  
  
    type: 'GET',  
  
  
    processData: false,  
  
  
    contentType: "application/json",  
  
  
    dataType: "jsonp",  
  
  
    success: function(data) {  
  
  
        $.mobile.changePage("results.html");  
  
  
    },  
  
  
    error: function() {  
  
  
        alert('Error!');  
  
  
    }  
  
  
}); 
 
 

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

 
 

  
  
$('div').live('pageshow', function (event, ui) {  
  
  
    $('[data-role=listview] li').removeClass("ui-btn-active");  
  
  
}); 
 
 

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

 
 

  
  
$(document).bind("mobileinit", function(){  
  
  
     $.mobile.page.prototype.options.keepNative = "select";  
  
  
}); 
 
 

9. Dynamic Update List View (jQuery mobile)

 
 

  
  
var output  = '<li>';  
  
  
output += ' 
  
output += '</li>';     
  
  
 
  
  
$('#mylistul').append(output).listview('refresh');  
 
 

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

 
 

  
  
var html = '<input type="search" name="suburb" id="suburb" placeholder="Enter suburb" />';  
  
  
$('#searchform').append(html);  
  
  
$('#suburb').textinput(); 
 
 

Original article: http://qing.weibo.com/1609119537/5fe93731330004ep.html