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

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

成都创新互联服务项目包括河曲网站建设、河曲网站制作、河曲网页制作以及河曲网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，河曲网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到河曲省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

 
 
 
    
  
  
  
  1. if (navigator.userAgent.match(/iPhone/i)) {  
    2. 
  
  
  
  2.     $('body').addClass('iPhone');  
    3. 
  
  
  
  3. } else if (navigator.userAgent.match(/Android/i)) {  
    4. 
  
  
  
  4.         $('body').addClass('Android');  
    5. 
  
  
  
  5. } 
    6.

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

 
 
 
    
  
  
  
  1. window.scrollTo(0, 1); 
    2.

3、防止网页触摸滚动

 
 
 
    
  
  
  
  1. notouchmove = function(event) {  
    2. 
  
  
  
  2.     event.preventDefault();  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4.   
    5. 
  
  
  
  5. ...  
    6.
 

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

 
 
 
    
  
  
  
  1. var updateorientation = function (){  
    2. 
  
  
  
  2.     var classname = '',  
    3. 
  
  
  
  3.     top = 100;  
    4. 
  
  
  
  4.     switch(window.orientation){  
    5. 
  
  
  
  5.         case 0:  
    6. 
  
  
  
  6.         classname += "normal";  
    7. 
  
  
  
  7.         break;  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.         case -90:  
    10. 
  
  
  
  10.         classname += "landscape";  
    11. 
  
  
  
  11.         break;  
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.         case 90:  
    14. 
  
  
  
  14.         classname += "landscape";  
    15. 
  
  
  
  15.         break;  
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17.     }  
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19.     if (classname == 'landscape') {  
    20. 
  
  
  
  20.         if ($('#overlay').length === 0) {  
    21. 
  
  
  
  21.             window.scrollTo(0, 1);  
    22. 
  
  
  
  22.             $('body').append('Landscape view is not supported for this page.
');  
  •         }  
  •     } else {  
  •         $('#overlay').remove();  
  •     }  
  • };  
  • Usage:  
  •  
  • var supportsOrientationChange = "onorientationchange" in window,  
  • orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";  
  •  
  • window.addEventListener(orientationEvent, function() {  
  •     updateorientation();  
  • }, false); 

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

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

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

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

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

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

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

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

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

     
 
 
      
  
  
  
    1. var output  = '
    2. ';  
      3. 
  
  
  
    3. output += '
      ' + item.title + '
      ';  
      4. 
  
  
  
    4. output += '
      5. ';     
  
  
  
    5.  
      6. 
  
  
  
    6. $('#mylistul').append(output).listview('refresh');  
      7.

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

     
 
 
      
  
  
  
    1. var html = '';  
      2. 
  
  
  
    2. $('#searchform').append(html);  
      3. 
  
  
  
    3. $('#suburb').textinput(); 
      4.

    原文：http://qing.weibo.com/1609119537/5fe93731330004ep.html

    名称栏目：移动网站开发中常用的10段JavaScript代码
    文章源于：http://www.shufengxianlan.com/qtweb/news14/117314.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    用户体验知识

    各行业网站

    网站设计　　 　柔性防护网　　 　网站SEO优化　　 　微信公众号开发　　 　成都广告设计　　 　门户网站建设方案　　 　域名注册　　 　四川航空文化　　 　边坡防护网　　 　成都网站建设　　 　一带一路　　 　兴发搬家　　 　成都模版网站建设　　 　品牌网站定制　　 　成都网站托管　　 　成都网创优客　　 　成都法律咨询　　 　消防工程　　 　SSL认证　　 　机柜租用