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

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（）;