<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TouchIt Demo</title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,height=device-height,width=device-width,user-scalable = no">
<script src="./jquery-2.0.3.js" type="text/javascript"></script>
<script src="http://glyde.eu/touchit-1.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#touch" ).touchit({
onTouchStart: function (x, y) {
$("#touched").text('Touch Start ' + x + ':' + y);
},
onTouchMove: function (x, y) {
$("#touched").text("Touch Move " + x + ':' + y);
},
onTouchEnd: function (x, y) {
$("#touched").text("Touch End " + x + ':' + y);
},
onDoubleTap: function (x, y) {
$("#touched").text("Double Tap " + x + ':' + y);
},
onPinch: function (scale) {
$("#touched").text("Pinch " + scale);
}
});
});
</script>
</head>
<body style="margin:0px;">
<span id="touched" style="width:10px;height:10px; ">Touch and pinch the blue square...</span>
<div id="touch" style="width:250px;height:250px;background: blue; "></div>
</body>
</html>
分享到：
相关推荐
<%= in_place_editor_field :post, :title, {}, {:field_type => 'textarea', :textarea_cols => 25, :textarea_rows => 10}%> <%= in_place_editor_field :post, :title, {}, {:field_type => 'textarea', :...
jquery新闻图片切换 <DIV id="banner" class="banner"> <DIV id="banner_bg" class="banner_bg"></DIV> ...target="_blank"><IMG alt="4牡丹花开富贵图4" src="jquery新闻图片切换_files/4.jpg"></A></DIV> </DIV>
jQuery Mobile会自动增强这种元素的样式，使其更加适合触摸操作。使用滑动条时，我们需要确保将其放置在form标签内，并且要与label元素相关联。 在jQuery Mobile中创建按钮也非常简单。通过给a标签添加`data-role=...
jQuery Mobile是一款专为触摸设备设计的前端框架，它基于流行的jQuery库，旨在提供跨平台、响应式和交互性强的网页应用。这个资源包包含了一系列与jQuery Mobile相关的文件，可能包括CSS样式表、JavaScript库、图像...
2. 配置jQuery：在DWCS5中，打开“Edit > Preferences > JavaScript”，在"Code Libraries"部分点击"+"按钮，然后浏览到jQuery的js文件（通常为jquery.min.js），添加并保存。 3. 使用jQuery：现在，你可以在DW中...
jQuery Mobile 是一个专为触摸设备设计的前端框架，它基于 jQuery 库，旨在简化移动Web应用程序的开发。本手册详细介绍了如何利用 jQuery Mobile 的功能和API来创建响应式、触控友好的网页和应用。对于从事移动开发...
<script src="jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div...
此外，jQuery Mobile 提供了一系列自定义事件，如 `tap`、`tap-and-hold`、`swipe` 和 `orientation change`，用于响应用户的触摸操作，增强了移动应用的交互性。例如，`tap` 事件可以替代传统的 `click` 事件，更好...
Node.js和jQuery Mobile是两种非常不同的技术，但它们在Web开发领域中都扮演着重要的角色。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程，实现了全栈开发的...
jQuery Mobile作为一个优秀的前端框架，为开发者提供了一种便捷的方式来构建响应式的移动网站和应用程序。本文将详细探讨使用jQuery Mobile进行手机网站开发和APP开发的相关知识点，涵盖主题创建、页面元素定制以及...
<script src="jquery.mobile-1.0a2.min.js"></script> ``` 建议在`<meta>`标签中加入`charset=utf-8`声明，以防止字符编码问题导致的文字显示异常： ```html <meta http-equiv="Content-Type" content="text/html;...
jQuery Mobile 提供了丰富的表单元素，如 `<input type="text">`、`<select>` 等。 **列表应用** 列表是展示一系列信息项的有效方式，可以使用 `<ul data-role="listview">` 来定义列表，并通过 `<li>` 元素来添加...