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

最新推荐文章于 2024-09-19 11:17:39 发布

cnux

最新推荐文章于 2024-09-19 11:17:39 发布

阅读量552

点赞数

分类专栏：移动网站开发文章标签： javascript mobile android function jquery iphone

移动网站开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

window.scrollTo(0, 1);

3、防止网页触摸滚动

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

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

    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、显示部分描述信息，当点击时显示完整信息

    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、收到成功的Ajax请求时，重定向到另一个页面(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、从列表视图的链接中删除活动状态(jQuery mobile)

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

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

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

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

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

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

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