Last active
December 25, 2015 18:28
-
-
Save kkxlkkxllb/7020364 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Hammer.js</title> | |
| <meta content='True' name='HandheldFriendly' /> | |
| <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> | |
| <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <style> | |
| body { padding: 0; overflow: hidden;} | |
| /* pull down is a translate3d y position */ | |
| body { | |
| position: relative; | |
| -webkit-transition: -webkit-transform 0ms; | |
| transform: translate3d(0,0,0) scale3d(1,1,1); | |
| -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); | |
| -webkit-backface-visibility: hidden; | |
| } | |
| #content{ | |
| padding: 20px; | |
| } | |
| /* place the pullrefresh box above the container */ | |
| #search_container { | |
| display: block; | |
| overflow: hidden; | |
| position: absolute; | |
| top: -70px; | |
| left: 0; | |
| width: 100%; | |
| background: rgba(233,233,203,0.5); | |
| } | |
| /* #search_container.show { | |
| position: relative; | |
| top: -70px; | |
| }*/ | |
| #search_container .form{ | |
| height: 70px; | |
| margin: 0; | |
| text-align: center; | |
| } | |
| /* #search_container.show .form{ | |
| position: fixed; | |
| top: 0px; | |
| left: 0; | |
| } | |
| */ | |
| #search_container form input{ | |
| margin: 20px; | |
| } | |
| .scrollable { | |
| overflow: auto; | |
| overflow-x: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .scrollable * { | |
| -webkit-transform: translate3d(0,0,0); | |
| } | |
| .container{ | |
| background: #333; | |
| color: white; | |
| display: none; | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="search_container"> | |
| <div class="form"> | |
| <form action="#"> | |
| <input type="text" name="search" placeholder="搜索" autocorrect="off" autocomplete="off" autocapitalize="off" /> | |
| <span class="cancel">取消</span> | |
| </form> | |
| </div> | |
| <div class="container scrollable"> | |
| <p> | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at erat felis. Donec ornare ligula non nibh vulputate sollicitudin. Cras sodales eros a velit pulvinar vehicula. In sed lorem lectus, vel dapibus nulla. Mauris lacus massa, volutpat vel suscipit at, lacinia condimentum libero. Praesent nec metus ligula. Morbi porttitor rhoncus mattis. | |
| </p> | |
| <p> | |
| Donec adipiscing porttitor risus, vel commodo ante tincidunt vitae. Fusce lacinia augue non sapien volutpat facilisis. Integer varius faucibus metus, sit amet viverra justo venenatis id. Nam ornare rhoncus tempus. Nulla eleifend, mauris quis auctor bibendum, mi purus interdum sapien, id fringilla nunc mi ut tortor. Sed pretium egestas augue, eget volutpat ipsum egestas nec. Aliquam a elementum justo. Suspendisse tempus, nisi id tincidunt vulputate, nunc sem scelerisque risus, molestie facilisis lacus velit et nunc. Phasellus sed convallis libero. Phasellus sit amet neque non arcu pellentesque laoreet id sed ligula. Donec gravida laoreet condimentum. Ut ornare dignissim tempus. Mauris aliquet tincidunt turpis, quis pulvinar nisl pulvinar id. Sed in gravida ligula. | |
| </p> | |
| <p> | |
| Ut molestie, lectus vel pharetra pharetra, nunc libero interdum ligula, eget vulputate purus nulla sit amet turpis. Aliquam volutpat porttitor erat ac volutpat. Donec ligula elit, tincidunt non congue id, iaculis feugiat sem. Phasellus vestibulum mi id enim interdum imperdiet. Ut dolor ante, tempus sit amet ornare a, faucibus sed massa. Curabitur adipiscing, mauris eget vestibulum lacinia, nisl lorem viverra velit, vitae facilisis urna erat et est. Pellentesque fringilla metus libero, at accumsan nisl. Etiam nisl lorem, placerat ut tristique vel, luctus id nulla. Sed vel nunc ut justo volutpat eleifend ac nec risus. Praesent at viverra tellus. Maecenas semper pellentesque quam, et bibendum nisl eleifend sit amet. Donec sed elit eget magna dictum dignissim. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at erat felis. Donec ornare ligula non nibh vulputate sollicitudin. Cras sodales eros a velit pulvinar vehicula. In sed lorem lectus, vel dapibus nulla. Mauris lacus massa, volutpat vel suscipit at, lacinia condimentum libero. Praesent nec metus ligula. Morbi porttitor rhoncus mattis. | |
| </p> | |
| <p> | |
| Donec adipiscing porttitor risus, vel commodo ante tincidunt vitae. Fusce lacinia augue non sapien volutpat facilisis. Integer varius faucibus metus, sit amet viverra justo venenatis id. Nam ornare rhoncus tempus. Nulla eleifend, mauris quis auctor bibendum, mi purus interdum sapien, id fringilla nunc mi ut tortor. Sed pretium egestas augue, eget volutpat ipsum egestas nec. Aliquam a elementum justo. Suspendisse tempus, nisi id tincidunt vulputate, nunc sem scelerisque risus, molestie facilisis lacus velit et nunc. Phasellus sed convallis libero. Phasellus sit amet neque non arcu pellentesque laoreet id sed ligula. Donec gravida laoreet condimentum. Ut ornare dignissim tempus. Mauris aliquet tincidunt turpis, quis pulvinar nisl pulvinar id. Sed in gravida ligula. | |
| </p> | |
| </div> | |
| </div> | |
| <div id="content"> | |
| <p> | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at erat felis. Donec ornare ligula non nibh vulputate sollicitudin. Cras sodales eros a velit pulvinar vehicula. In sed lorem lectus, vel dapibus nulla. Mauris lacus massa, volutpat vel suscipit at, lacinia condimentum libero. Praesent nec metus ligula. Morbi porttitor rhoncus mattis. | |
| </p> | |
| <p> | |
| Donec adipiscing porttitor risus, vel commodo ante tincidunt vitae. Fusce lacinia augue non sapien volutpat facilisis. Integer varius faucibus metus, sit amet viverra justo venenatis id. Nam ornare rhoncus tempus. Nulla eleifend, mauris quis auctor bibendum, mi purus interdum sapien, id fringilla nunc mi ut tortor. Sed pretium egestas augue, eget volutpat ipsum egestas nec. Aliquam a elementum justo. Suspendisse tempus, nisi id tincidunt vulputate, nunc sem scelerisque risus, molestie facilisis lacus velit et nunc. Phasellus sed convallis libero. Phasellus sit amet neque non arcu pellentesque laoreet id sed ligula. Donec gravida laoreet condimentum. Ut ornare dignissim tempus. Mauris aliquet tincidunt turpis, quis pulvinar nisl pulvinar id. Sed in gravida ligula. | |
| </p> | |
| <p> | |
| Ut molestie, lectus vel pharetra pharetra, nunc libero interdum ligula, eget vulputate purus nulla sit amet turpis. Aliquam volutpat porttitor erat ac volutpat. Donec ligula elit, tincidunt non congue id, iaculis feugiat sem. Phasellus vestibulum mi id enim interdum imperdiet. Ut dolor ante, tempus sit amet ornare a, faucibus sed massa. Curabitur adipiscing, mauris eget vestibulum lacinia, nisl lorem viverra velit, vitae facilisis urna erat et est. Pellentesque fringilla metus libero, at accumsan nisl. Etiam nisl lorem, placerat ut tristique vel, luctus id nulla. Sed vel nunc ut justo volutpat eleifend ac nec risus. Praesent at viverra tellus. Maecenas semper pellentesque quam, et bibendum nisl eleifend sit amet. Donec sed elit eget magna dictum dignissim. | |
| </p> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at erat felis. Donec ornare ligula non nibh vulputate sollicitudin. Cras sodales eros a velit pulvinar vehicula. In sed lorem lectus, vel dapibus nulla. Mauris lacus massa, volutpat vel suscipit at, lacinia condimentum libero. Praesent nec metus ligula. Morbi porttitor rhoncus mattis. | |
| </p> | |
| <p> | |
| Donec adipiscing porttitor risus, vel commodo ante tincidunt vitae. Fusce lacinia augue non sapien volutpat facilisis. Integer varius faucibus metus, sit amet viverra justo venenatis id. Nam ornare rhoncus tempus. Nulla eleifend, mauris quis auctor bibendum, mi purus interdum sapien, id fringilla nunc mi ut tortor. Sed pretium egestas augue, eget volutpat ipsum egestas nec. Aliquam a elementum justo. Suspendisse tempus, nisi id tincidunt vulputate, nunc sem scelerisque risus, molestie facilisis lacus velit et nunc. Phasellus sed convallis libero. Phasellus sit amet neque non arcu pellentesque laoreet id sed ligula. Donec gravida laoreet condimentum. Ut ornare dignissim tempus. Mauris aliquet tincidunt turpis, quis pulvinar nisl pulvinar id. Sed in gravida ligula. | |
| </p> | |
| <p> | |
| Ut molestie, lectus vel pharetra pharetra, nunc libero interdum ligula, eget vulputate purus nulla sit amet turpis. Aliquam volutpat porttitor erat ac volutpat. Donec ligula elit, tincidunt non congue id, iaculis feugiat sem. Phasellus vestibulum mi id enim interdum imperdiet. Ut dolor ante, tempus sit amet ornare a, faucibus sed massa. Curabitur adipiscing, mauris eget vestibulum lacinia, nisl lorem viverra velit, vitae facilisis urna erat et est. Pellentesque fringilla metus libero, at accumsan nisl. Etiam nisl lorem, placerat ut tristique vel, luctus id nulla. Sed vel nunc ut justo volutpat eleifend ac nec risus. Praesent at viverra tellus. Maecenas semper pellentesque quam, et bibendum nisl eleifend sit amet. Donec sed elit eget magna dictum dignissim. | |
| </p> | |
| </div> | |
| <!-- <script src="assets/js/hammer.js"></script> --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> | |
| <script src="assets/js/modernizr.js"></script> | |
| <script src="assets/js/jquery.hammer.js"></script> | |
| <script> | |
| $("body").bind('touchmove', function(e){ | |
| e.preventDefault(); | |
| }); | |
| $('.scrollable').bind('touchmove', function(e){ | |
| e.stopPropagation(); | |
| }); | |
| function DragSearch(search_container,drag_container,wraper){ | |
| var self = this; | |
| var element = $(drag_container); | |
| var wraper = $(wraper); | |
| var search_input = $("input",$(search_container)); | |
| var breakpoint = 175; | |
| var _slidedown_height = 0; | |
| var _anim = null; | |
| var _dragged_down = false; | |
| function handleHammer(ev) { | |
| var self = this; | |
| switch(ev.type) { | |
| case 'release': | |
| if(!_dragged_down) { | |
| return; | |
| } | |
| cancelAnimationFrame(_anim); | |
| if(ev.gesture.deltaY < breakpoint) { | |
| hide(); | |
| } | |
| break; | |
| case 'dragdown': | |
| _dragged_down = true; | |
| var scrollY = window.scrollY; | |
| if(scrollY > 5) { | |
| return; | |
| } else if(scrollY !== 0) { | |
| window.scrollTo(0,0); | |
| } | |
| if(!_anim) { | |
| updateHeight(); | |
| } | |
| ev.gesture.preventDefault(); | |
| _slidedown_height = ev.gesture.deltaY * 0.4; | |
| break; | |
| } | |
| } | |
| function setHeight(height,transition) { | |
| if(transition){ | |
| wraper.css({ | |
| "webkitTransform": 'translate3d(0,'+height+'px,0) scale3d(1,1,1)', | |
| "-webkit-transition": "-webkit-transform 0.2s ease-in" | |
| }); | |
| }else{ | |
| wraper.css({ | |
| "webkitTransform": 'translate3d(0,'+height+'px,0) scale3d(1,1,1)', | |
| "-webkit-transition": "-webkit-transform 0s" | |
| }); | |
| } | |
| }; | |
| function hide() { | |
| element.show(); | |
| search_input.blur(); | |
| _slidedown_height = 0; | |
| setHeight(0,true); | |
| cancelAnimationFrame(_anim); | |
| _anim = null; | |
| _dragged_down = false; | |
| $(".container",$(search_container)).hide(); | |
| }; | |
| function updateHeight() { | |
| var self = this; | |
| if(_slidedown_height >= 70){ | |
| element.hide(); | |
| $(".container",$(search_container)).show(); | |
| search_input.focus(); | |
| }else { | |
| setHeight(_slidedown_height); | |
| } | |
| _anim = requestAnimationFrame(function() { | |
| updateHeight(); | |
| }); | |
| }; | |
| element.hammer({ drag_lock_to_axis: true }).on("dragdown release",handleHammer); | |
| $(".cancel",$(search_container)).on("click",function(){ | |
| hide(); | |
| }); | |
| } | |
| new DragSearch("#search_container",'#content','body'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment