/5.0/demos/event-dom/tap.html
HTML | 309 lines | 254 code | 55 blank | 0 comment | 0 complexity | 4907184a5669cfd74bad75a6ae774a61 MD5 | raw file
Possible License(s): Apache-2.0
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scale=no">
- <title>Guides - KISSY v5.0 Documentation</title>
- <link rel="shortcut icon" href="/5.0/assets/img/favicon.ico">
- <link rel="stylesheet" type="text/css" href="/5.0/assets/css/base.css">
- <link rel="stylesheet" type="text/css" href="/5.0/assets/css/main.css">
- <link rel="stylesheet" type="text/css" href="/5.0/assets/css/github.css"/>
- <script type="text/javascript" src="http://g.tbcdn.cn/kissy/edge/2014.07.16/seed.js" data-config="{combine:true}"></script>
- <link rel="stylesheet" href="/5.0/assets/css/component.css">
- </head>
- <body>
- <div class="header">
- <div class="inner">
- <div class="toolbar">
- <a href="/5.0">
- <img class="mini-logo" src="/5.0/assets/img/mini-logo.png">
- </a>
- <ul class="nav clearfix">
- <li class="docs">
- <span>
- Docs
- <b class="caret"></b>
- </span>
- <ul>
- <li><a href="/5.0/guides/">Guides</a></li>
- <li><a href="/5.0/api">Api Docs</a></li>
- <li><a href="/5.0/demos">Demos</a></li>
- </ul>
- </li>
- <li class="more">
- <span>
- More
- <b class="caret"></b>
- </span>
- <ul>
- <li><a href="/5.0/more/faq.html">FAQ</a></li>
- <li><a href="http://gallery.kissyui.com/">Gallery</a></li>
- <li><a href="http://blog.kissyui.com/">KISSY Blog</a></li>
- <li><a href="https://github.com/daxingplay/kmc">KMC</a></li>
- <li><a href="https://github.com/minghe/generator-bee/wiki/generator-bee%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B">Generator</a></li>
- </ul>
- </li>
- <li class="split"></li>
- <li class="nav-other"><a href="/5.0/quick-start.html">Quick Start</a></li>
- <li class="nav-other"><a href="https://github.com/kissyteam/kissy">Contribute</a></li>
- <li class="nav-other"><a target="_blank" href="/5.0/kissyup-middle.html">KISSY UP</a></li>
- </ul>
- </div>
- <div class="search">
- <script>
- (function() {
- var cx = '003618533255763067140:5nkycw1pbey';
- var gcse = document.createElement('script');
- gcse.type = 'text/javascript';
- gcse.async = true;
- gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
- '//www.google.com/cse/cse.js?cx=' + cx;
- var s = document.getElementsByTagName('script')[0];
- s.parentNode.insertBefore(gcse, s);
- })();
- </script>
- <gcse:search></gcse:search>
- </div>
- </div>
- </div>
- <div class="main">
- <div class="demo">
- <div class="logo-on-top clearfix">
- <img src="/5.0/assets/img/logo-on-top.png">
- </div>
- <div class="inner clearfix">
- <div id="sidebar">
- <a class="link-apidocs btn btn-primary" href="../../api/classes/Event.html">API Docs</a>
- <div class="panel panel-primary ajax-load ">
- <div class="panel-heading">
- <h3 class="panel-title">Features</h3>
- </div>
- <div class="panel-body">
- <p><a href="../../guides/event-dom/index.html">DomEvent基本介绍</a></p>
- </div>
- </div>
- <div class="panel panel-primary ajax-load ">
- <div class="panel-heading">
- <h3 class="panel-title">Demos</h3>
- </div>
- <div class="panel-body">
- <p><a href="../../demos/event-dom/delegate.html">事件委托</a></p><p><a href="../../demos/event-dom/detach.html">事件移除</a></p><p><a href="../../demos/event-dom/focusin_out.html">focusin/focusout</a></p><p><a href="../../demos/event-dom/index.html">event-dom 模块基本示例</a></p><p><a href="../../demos/event-dom/pinch.html">pinch</a></p><p><a href="../../demos/event-dom/rotate.html">rotate</a></p><p><a href="../../demos/event-dom/shake.html">shake</a></p><p><a href="../../demos/event-dom/swipe.html">swipe</a></p><p><a href="../../demos/event-dom/tap.html">tap</a></p>
- </div>
- </div>
- </div>
- <div id="main-content">
- <p></p>
- <h1 id="tap">tap</h1><h2 id="tap/singleTap/doubleTap">tap/singleTap/doubleTap</h2><p><div class="ks-tabs ks-tabs-top" style="height:300px;">
- <div class="ks-tabs-bar">
- <div class="ks-tabs-tab ks-button">Source</div>
- <div class="ks-tabs-tab ks-button ks-tabs-tab-selected">Output</div>
- <div class="ks-tabs-tab ks-button">QRCode</div>
- </div>
- <div class="ks-tabs-body" style="overflow:hidden;">
- <div class="ks-tabs-panel">
- <div class="editor">
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-touch-fullscreen" content="yes">
- <style type="text/css">
- body{
- background: #fff;
- }
- </style>
- <script src="//g.alicdn.com/kissy/k/5.0.1/seed.js" data-config="{combine:true}"></script>
- </head>
- <body>
- <h1>open in ios safari to test tap event</h1>
- <div id='t' tabindex='0'
- style='border:1px solid green;
- width:100px;height:100px;margin:10px'>
- tap me
- </div>
- <script>
- require(['event-dom', 'event-dom/gesture/tap'], function (DomEvent, GestureTap) {
- DomEvent.on('#t', GestureTap.TAP, function (e) {
- alert(e.type + ' : fired');
- });
- });
- </script>
- </body>
- </html></div>
- </div>
- <div class="ks-tabs-panel ks-tabs-panel-selected">
- <iframe class="output" frameborder="1">
-
- </iframe>
- </div>
- <div class="ks-tabs-panel qrcode-wrap">
- <div class="qrcode"></div>
- <div class="content">
- <p class="title">查看移动端演示</p>
- <p class="qrcode-addr" qrcodeaddr="http://docs.kissyui.com/5.0/demos/event-dom/cited-by-md/tap.html" ="text">
- 示例地址:
- <a href="http://docs.kissyui.com/5.0/demos/event-dom/cited-by-md/tap.html" target="_blank">http://docs.kissyui.com/5.0/demos/event-dom/cited-by-md/tap.html</a>
- </p>
- </div>
- </div>
- </div>
- </div></p>
- <h2 id="tapHold">tapHold</h2><p><div class="ks-tabs ks-tabs-top" style="height:300px;">
- <div class="ks-tabs-bar">
- <div class="ks-tabs-tab ks-button">Source</div>
- <div class="ks-tabs-tab ks-button ks-tabs-tab-selected">Output</div>
- <div class="ks-tabs-tab ks-button">QRCode</div>
- </div>
- <div class="ks-tabs-body" style="overflow:hidden;">
- <div class="ks-tabs-panel">
- <div class="editor">
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-touch-fullscreen" content="yes">
- <style type="text/css">
- body{
- background: #fff;
- }
- </style>
- <script src="//g.alicdn.com/kissy/k/5.0.1/seed.js" data-config="{combine:true}"></script>
- </head>
- <body>
- <h1>open in ios safari to test tap event</h1>
- <div id='t' tabindex='0'
- style='border:1px solid green;
- width:100px;height:100px;margin:10px'>
- tap-hold me
- </div>
- <script>
- require(['event-dom', 'event-dom/gesture/tap'], function (DomEvent, GestureTap) {
- DomEvent.on('#t', GestureTap.HOLD, function (e) {
- alert(e.type + ' : fired');
- });
- });
- </script>
- </body>
- </html></div>
- </div>
- <div class="ks-tabs-panel ks-tabs-panel-selected">
- <iframe class="output" frameborder="1">
-
- </iframe>
- </div>
- <div class="ks-tabs-panel qrcode-wrap">
- <div class="qrcode"></div>
- <div class="content">
- <p class="title">查看移动端演示</p>
- <p class="qrcode-addr" qrcodeaddr="http://docs.kissyui.com/5.0/demos/event-dom/cited-by-md/taphold.html" ="text">
- 示例地址:
- <a href="http://docs.kissyui.com/5.0/demos/event-dom/cited-by-md/taphold.html" target="_blank">http://docs.kissyui.com/5.0/demos/event-dom/cited-by-md/taphold.html</a>
- </p>
- </div>
- </div>
- </div>
- </div></p>
- </div>
- </div>
- </div>
- </div>
- <div class="footer">
- <div class="wrap-disqus">
- <div class="top-repeat"></div>
- <div id="disqus_thread"></div>
- </div>
- <script>
- if((window.location.hostname.indexOf("kissyui.com")!=-1 )&& window.localStorage.getItem("kissy-commment")!="0"){
- /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
- var disqus_shortname = 'kissy-docs'; // required: replace example with your forum shortname
- // The following are highly recommended additional parameters. Remove the slashes in front to use.
- //var disqus_identifier = '/anim';
- //var disqus_url = window.location;
- /* * * DON'T EDIT BELOW THIS LINE * * */
- (function() {
- var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
- dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
- (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
- })();
- }
- </script>
- <div class="other-page">
- <div class="wrap">
- <div class="content">
- <div class="wrap-content">
- <p>@2010 - 2112 KISSY UI LIBARAY</p>
- <div class="github-msg">
- <iframe src="http://ghbtns.com/github-btn.html?user=kissyteam&repo=kissy&type=watch&count=true"
- allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
- <iframe src="http://ghbtns.com/github-btn.html?user=kissyteam&repo=kissy&type=fork&count=true"
- allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="/5.0/assets/js/ace-editor/ace.js"></script>
- <script type="text/javascript" src="/5.0/assets/js/qrcodejs/qrcode.min.js"></script>
- <script type="text/javascript" src="/5.0/assets/js/ajax-load.js"></script>
- </body>
- </html>