腾挪web开发常用JavaScript代码

?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)

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