资讯频道 → Web前端
阅读更多

0顶
1踩

Web前端

翻译新闻 移动网站开发中常用的10段JavaScript代码

2011-06-24 10:47 by 见习编辑 hotwind 评论(0) 有9108人浏览
JavaScript
在开发移动网站过程中，有一些Javascript代码会经常用到。以下是10段常用的JavaScript代码。需要注意的是某几段代码需要jQuery mobile framework支持。

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();



推荐书籍

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






via  eisabainyo.net
  • 大小: 19.7 KB
  • 大小: 5 KB
来自: eisabainyo.net
0
顶
1
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • swing 日历控件

    swing的日历控件例子，可以在Jframe或jdialog上使用。整体来说实现比较简单，界面还行，有点像网页上的日历控件。传一个jtextarea进去就ok了。

  • JCalendar组件

    有时候需要在GUI上面要求用户输入日期，也许这时候就需要喂输入的格式而烦恼。除了上次找到 JAVA写的日期选择器 。 刚才还找到了一个更不错的。地址：JCalendar . 这里还有一个Demo . 我简单使用了一下： package test; import java.awt.BorderLayout; import java.awt.Dimension; import java.awt....

  • 第五章——JSP 与 Java bean

    在JSP页面中通过<jsp:useBean>标记创建一个四则运算对象，并且在页面中使用<jsp:setProperty>标记给参数a和b赋值，然后使用<jsp:scriptlet>中的表达式计算并显示结果。如果不存在则根据指定的class创建一个新的实例，并将其存储在指定的域范围内，并返回该实例的引用²。在JSP页面中通过<jsp:useBean>标记创建一个三角形对象，并设置它的宽和高，并且在页面中使用<jsp:setProperty>标记给宽高属性赋值，最后计算面积并显示。

  • java jcalendar_介绍JCalendar的新功能

    JCalendar new features in JComponentPackNew property to control the action click countNew client property to control the "today” button action behaviorJCalendar works with AComboBox and add new cal...

  • java自定义日历控件_自定义java Swing日历选择组件JCalendarChooser | 学步园

    package cn.net.iem.view.mainframe;import java.awt.BorderLayout;import java.awt.FlowLayout;import java.awt.GridBagConstraints;import java.awt.GridBagLayout;import java.awt.GridLayout;import java.awt.La...

  • Jcalendar 简单使用

    <br />今天想找一个像js那样能在swing中使用的日历控件。找到jcalendar后，本想搜一下用法，哪知道google上全是提的问题，一下把我打蒙了，最后在才发现可能是太过于简单都没人回复了，本人弄了一个小例子。<br /> <br /> <br />package com.daniel.test; import java.awt.Dimension; import java.awt.FlowLayout; import java.awt.event.ActionEvent; import

  • 自定义java Swing日历选择组件JCalendarChooser

    package cn.net.iem.view.mainframe; import java.awt.BorderLayout; import java.awt.FlowLayout; import java.awt.GridBagConstraints; import java.awt.GridBagLayout; import java.awt.GridLayout; import java

  • swing日历控件

    package com;/** * 日历控件 * @author lucifer.wang */import java.awt.BorderLayout;import java.awt.Color;import java.awt.Component;import java.awt.Dimension;import ja

  • Java Swing 日历控件

    本想在网上找一个简单的Java 日历控件，但是找了很久要不是就很花哨，要不是就写的很复杂。下午加晚上花了几个小时的时间，写了个简易的日历控件。现在放上来，以备不时之需。package date;import java.awt.BorderLayout;import java.awt.Container;import java.awt.Font;import java.awt.GridLayout;import java.awt.event.ActionEvent;import java.awt.event.

  • java gui 日历_Java实现简单日历小程序 Java图形界面小日历开发

    今天给大家介绍一下如何用Java swing开发一款简单的小日历，下面我们来看代码：首先创建一个CalendarBean类，用于基本的日期计算：package other1;import java.util.Calendar;public class CalendarBean{String day[];int year=2005,month=0;public void setYear(int ye...

  • JSP实用教程----第五章jsp与javabean

    第五章将介绍JSP（JavaServer Pages）与JavaBean的结合使用。JSP是一种用于开发动态Web应用程序的Java技术，而JavaBean是一种用于封装数据和业务逻辑的Java类。通过结合使用JSP和JavaBean，可以实现更加灵活和可维护的Web应用程序。在使用JSP与JavaBean时，需要注意以下几点：定义JavaBean：JavaBean需要符合一定的规范，包括有无参构造方法、私有属性和公共的getter和setter方法。

  • java calendar 2月份_java – JCalendar问题(2月份)

    我有一个图形组件JCalendar用于选择日期.当我的当地日期是6月30日时,问题(或错误)仍然存在;例如,当我经历二月份时,我会用箭头浏览月份,自动插入日期(2月28日),因为事件“propertyChange”已启动,除非我选择.你怎么看？解决方法:假设JCalendar和JSpinnerDateEditor,我在JCalendarDemo中看到6月30日或2月28日附近没有不连续性.您可以验...

  • j友好时间显示 java,JCalendar - 使用正确的格式在Java中正确设置日期

    I am using the JCalendar from here: http://www.toedter.com/en/jcalendar/I have used the JDateChooser to set date in a form and import into SqLite in the format yyyy-MM-dd. WhenI try retrieving the dat...

  • 周日历选择插件jcalendar_week

    之前在网上想找一个简单易用的周日历选择插件，发现这种前端周日历插件很少，而且很多文章写的周的算法都不是统一的，所以自己实现了一个基于jquery的周日历插件(还支持跳转到指定年份和周哦)。 插件中周的算法：每周以周日为起始，第一周以每年第一个星期四所在的周为第一周（网上找的好像这个算法比较正规） 实现的效果是在手机端，也可以在PC端用，毕竟功能才是主要的。如果觉得样式不入眼可以自行随意修改。 //调用周日历方法 var weekfn = new jcalendar_week({ element: "#jcalendar_week",//填充日历的dom元素 dayaddclass:function(date){ //添加某天时给添加类名(参数：1.日期)(返回类名字符串，多个以空格分开) return ""; }, dayclick:function(date,obj){ //day点击事件(参数：1.日期,2.所点击DOM元素) $(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act"); } }); 点击上方显示当前年份和周的DOM部分可选择并跳转到指定年份和周。 插件提供的方法： //获取周第一天方法weekfirstdate(),传入年份和周数 console.log(weekfn.weekfirstdate(2018,36)); //获取传入日期为当年第几周getweeknum(),传入年,月,日（注:这里的月份从0开始） console.log(weekfn.getweeknum(2018,0,16)); //跳转到指定周confirmweek(),传入年份和周数 weekfn.confirmweek(getyear,getweek); //跳转到本周nowweek() weekfn.nowweek();

  • JAVA用swing做个日历

    JAVA作业，我比作业要求的多加了些功能，可以滚轮和键盘左右键翻页快捷键做的也许比较傻吧，监听到就直接doClick();沉迷JAVA,对于我这种以前只写过控制台程序的来说，图形界面真是打开了新世界 package test2; import java.awt.BorderLayout; import java.awt.Color; import java.awt.FlowLayout; im

  • 非常好的一款swing日历

    package com.hooypay.tool; import java.awt.BasicStroke; import java.awt.BorderLayout; import java.awt.Color; import java.awt.Component; import java.awt.Cursor; import java.awt.Dimension; imp...

  • 目前最绚丽的日历控件

    一，先上需求图 目前随着移动应用的发展，对于日历控件的美观，实用，各个方面要求都挺高。我同学公司产品需求图如下，让我来写一个给我一顿黄焖鸡。这是给我请的不知道多少此黄焖鸡了。可以左右滑动切换月，可以按左右小箭头来切换月。可以下拉展开和上拉收缩。 二，来一个我做完的效果图：当然了我尽可能的绚丽颜色自己可以随便设置 &amp;lt;1&amp;gt; 先来一个绿色的： &amp;l...

  • Java实现日历编写

    java语言实心简单的日历实现

  • 下一天（Java swing写的一个日历小程序）

    同样，还是一个作业。 软件测试与质量保证的作业。 我写代码。 不用我测试。 下面贴代码。 贴图： 程序入口：package guoyang; public class Main { public static void main(String[] args) { MainFrame m = new MainFrame("NextDate"); m.s

  • 利用Spring创建javaBean对象的几种方法

    3种方法如下： 1.用构造器来实例化的方式 2.利用静态工厂方法实例化的方式。 3.利用实例工厂方法实例化的方式。 小案例： 利用Spring调用构造器GregrianCalendar 创建Calendar实例。 利用Spring调用Calendar的静态工厂方法getInstance（）创建Calendar。 利用Spring创建GregorianCalendar 对象作为工厂

Global site tag (gtag.js) - Google Analytics