移动web开发常用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)

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

 

推荐书籍

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

[[60679]]

HTML5: Up and Running

[[60680]]

jQuery: Novice to Ninja

责任编辑:佚名 来源: 雨中无伞博客
相关推荐

2011-10-08 13:54:27

JavaScript

2014-03-28 15:36:43

移动WebJavaScript开发框架

2011-08-22 10:11:03

JavaScript

2011-07-07 13:19:38

Web

2013-09-04 14:49:10

移动Web前端开发设计理念

2016-09-29 09:22:01

移动WebHtml5

2015-07-16 13:57:06

移动web开发规范

2011-06-30 09:46:59

jQuery MobiRails

2013-09-10 16:16:19

移动网站性能优化移动web

2011-10-28 11:20:25

移动Web

2014-07-18 09:59:17

移动webJavascript移动Web

2016-04-25 10:07:18

jQuery代码Web开发效率

2011-12-29 10:48:49

移动Web

2011-05-11 09:47:14

mobl移动web开发

2011-03-01 09:23:47

移动Web应用开发成本

2011-08-22 14:31:53

iPhone开发

2011-05-25 09:34:30

HTML5cssjavascript

2011-02-22 10:23:43

2015-08-28 08:44:43

web移动开发转行

2015-08-28 09:19:53

Web开发移动开发
点赞
收藏

51CTO技术栈公众号