移动网站开发中常用的10段JavaScript代码

在开发移动网站过程中，有一些Javascript代码会经常用到。以下是10段常用的JavaScript代码。需要注意的是某几段代码需要jQuery mobile framework支持。

1.如果网页是在iPhone或Android浏览器中查看，则在主体元素中添加“iPhone”或“Android” 类名

Javascript代码

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用户浏览示例：

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用户浏览示例：

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. 移除浏览器地址栏

Javascript代码

1. window.scrollTo(0, 1);  

3. 防止网页触摸滚动

Javascript代码

1. notouchmove = function(event) {  
2.     event.preventDefault();  
3. }  
4. <div data-role="page" id="home" ontouchmove="notouchmove(event);">  
5. ...  
6. </div>  

4. 当横向浏览时显示信息

Javascript代码

1. var updateorientation = function (){  
2.     var classname = '',  
3.     top = 100;  
4.     switch(window.orientation){  
5.         case 0:  
6.         classname += "normal";  
7.         break;  
8.   
9.         case -90:  
10.         classname += "landscape";  
11.         break;  
12.   
13.         case 90:  
14.         classname += "landscape";  
15.         break;  
16.   
17.     }  
18.   
19.     if (classname == 'landscape') {  
20.         if ($('#overlay').length === 0) {  
21.             window.scrollTo(0, 1);  
22.             $('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>');  
23.         }  
24.     } else {  
25.         $('#overlay').remove();  
26.     }  
27. };  
28. Usage:  
29.   
30. var supportsOrientationChange = "onorientationchange" in window,  
31. orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";  
32.   
33. window.addEventListener(orientationEvent, function() {  
34.     updateorientation();  
35. }, false);  

5.显示部分描述信息，当点击时显示完整信息

Javascript代码

1. var truncatedesc = function(trunc, len) {  
2.     if (trunc) {  
3.       var org = trunc;  
4.   
5.       if (trunc.length > len) {  
6.         trunc = trunc.substring(0, len);  
7.         trunc = trunc.replace(/w+$/, '');  
8.   
9.         trunc = '<span class="truncated">' + trunc;  
10.         trunc += '<strong class="more-description">...</strong></span>';  
11.         trunc += '<span class="original" style="display: none;">' + org + '</span>';  
12.       }  
13.   
14.       $('.truncated').live("touchstart touchend", function() {  
15.         $(this).closest('div').find('.original').show();  
16.         $(this).closest('div').find('.truncated').hide();  
17.         return false;  
18.       });  
19.   
20.       return trunc;  
21.     }  
22. };  
23. Usage:  
24.   
25. truncatedesc(item.description, 100);  

6. 收到成功的Ajax请求时，重定向到另一个页面(jQuery mobile)

Javascript代码

1. var ajaxurl = ‘http://…’; // Your web service URL  
2.   
3. $.ajax({  
4.     url: ajaxurl,  
5.     type: 'GET',  
6.     processData: false,  
7.     contentType: "application/json",  
8.     dataType: "jsonp",  
9.     success: function(data) {  
10.         $.mobile.changePage("results.html");  
11.     },  
12.     error: function() {  
13.         alert('Error!');  
14.     }  
15. });  

7. 从列表视图的链接中删除活动状态(jQuery mobile)

Javascript代码

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

8. 从下拉选择中禁用默认的jQuery mobile样式(jQuery mobile)

Javascript代码

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

9. 动态更新列表视图(jQuery mobile)

Javascript代码

1. var output  = '<li><img src="' + item.image + '" alt="' + item.title + '" />';  
2. output += '<h3><a href="' + item.url + '">' + item.title + '</a></h3>';  
3. output += '</li>';      
4.   
5. $('#mylistul').append(output).listview('refresh');  

10. 动态添加表单输入和应用默认样式(jQuery mobile)

Javascript代码

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

推荐书籍

下面两本关于HTML5和jQuery的书将有助于你理解和使用jQuery mobile框架。

HTML5: Up and Running

jQuery: Novice to Ninja