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

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

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

Javascript代码

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

Javascript代码

window.scrollTo(0, 1);

3. 防止网页触摸滚动

Javascript代码

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

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

Javascript代码

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

Javascript代码

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)

Javascript代码

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)

Javascript代码

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

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

Javascript代码

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

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

Javascript代码

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)

Javascript代码

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

推荐书籍

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

HTML5: Up and Running

jQuery: Novice to Ninja

移动网站开发中常用的10段JavaScript代码相关推荐

php页面开发,PHP网站开发中常用的8个小技巧
这篇文章主要介绍了PHP网站开发中常用的8个小技巧,本文讲解了命名.使用.PHP判断Form表单是否提交.PHP 获取字符串长度.PHP超全局对象等内容,需要的朋友可以参考下 PHP是一种用于创建动态 ...
php开发中常用函数总结,PHP开发中常用函数总结
PHP开发中常用函数总结发布于 2014-10-31 08:34:03 | 48 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext Preproc ...
iOS开发中常用的方法
iOS开发中常用的方法系统弹窗: 过期方法: UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@"确认报价" ...
前端开发中常用设计模式-总结篇
本文是向大家介绍前端开发中常用的设计模式,它使我们编写的代码更容易被复用,也更容易被人理解,并且保证代码的稳定可靠性. 1.什么是设计模式通俗来讲,就是日常使用设计的一种惯性思维. 因为对应的这种思 ...
WordPress开发中常用代码（必备）
很多人在WordPress开发中常用代码,WordPress 相比其它网站程序,最突出的优势:主题模板多,插件多,相关技术文章多,只要你想到的功能,都可以通过插件或者代码实现.现在分享下WordPre ...
jsp/html开发中常用的JS代码和页面特效代码
1.jsp/html开发中常用的JS代码 1.后退前进 <input type="button" value="后退" onClick="hi ...
php利用文件做数据储存,PHP_PHP文件读写操作之文件写入代码，在PHP网站开发中，存储数据通 - phpStudy...
PHP文件读写操作之文件写入代码在PHP网站开发中,存储数据通常有两种方式,一种以文本文件方式存储,比如txt文件,一种是以数据库方式存储,比如Mysql,相对于数据库存储,文件存储并没有什么优势, ...
前端开发中常用图片格式
前端开发中常用图片格式在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...
python web开发第三方库_Python Web开发中常用的第三方库
Python Web开发中常用的第三方库 TL;DR 经常有朋友问,如果用Python来做Web开发,该选用什么框架?用 Pyramid 开发Web该选用怎样的组合等问题?在这里我将介绍一些Pytho ...

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

移动网站开发中常用的10段JavaScript代码相关推荐

最新文章

热门文章