반응형
반응형

Most modern mobile touch slider with hardware accelerated transitions https://swiperjs.com

https://github.com/nolimits4web/swiper

https://swiperjs.com/demos/

 

Swiper Demos

 

swiperjs.com

https://swiperjs.com/demos/010-default.html

 

Swiper demo

 

swiperjs.com

stackblitz.com/edit/swiper-demo-1-default?embed=1&file=index.html

 

swiper-demo-1-default - StackBlitz

Swiper demo: default

stackblitz.com

 

반응형
저작자표시 비영리

'프로그래밍 > Web' 카테고리의 다른 글

[ASP] 랜덤으로 출력되는 , 랜덤문자조합  (0) 2020.08.14
ASP.NET Core Developer Roadmap  (0) 2020.08.10
Visual Studio Code 확장기능 설치하기  (0) 2020.06.19
SVG, path, animation, line, draw - script Drive OnOff  (0) 2020.06.19
웹 프론트엔드 프레임워크( angular, react, vue.js )  (0) 2020.06.17
반응형

#jQuery #touch #event #document #bind() #touchmove #touchstart #touchend

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>mobile.html</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<script src="/js/comm/jquery-1.11.1.js"></script>
<script>

	$(document).ready(function() {

		$(document).bind('touchstart', function(e) {
			$("#msg").html("터치가 시작되었어요.");
			e.preventDefault();	//	이벤트취소
		});

		$(document).bind('touchmove', function(e) {
			//	jQuery 이벤트 객체를 자바스크립트 표준 이벤트 객체로 바꾸기
			//	이유는 jQuery 에서 자바 스크립트
			var event = e.originalEvent;
			$('#msg').html('touch 이벤트 중입니다.'); 
			//	div에 터치한 좌표값 넣기
			$('#msg').append('<div>' + event.touches[0].screenX + ',' +
					event.touches[0].screenY + '</div>');
			event.preventDefault();
		});

		$(document).bind('touchend', function(e) {
			$("#msg").append("<div>터치이벤트가 종료되었어요</div>"); 
		});
	});

</script>
</head>
<body>
<h2>모바일용 홈페이지 입니다.</h2>
<!-- 
		스마트폰의 브라우저 : 마우스 이벤트와는 별도로 터치 이벤트를 지원함 
		touchstart : 터치가 시작될때
		touchend : 터치가 종료될때 
		touchmove : 터치한 상태로 이동할때 
		touchenter : 터치한 요소의 경계외부에서 내부로 이동할때 
		touchleave : 터치한 요소의 경계내부에서 외부로 이동할때 
 -->
<div id="msg"></div>
</body>
</html>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] AJAX Cross Origin plugin  (0) 2019.10.21
javascript, nl2br, nl to &nbsp;  (0) 2019.09.11
jQuery 화면전환 효과 참고 사이트  (0) 2019.08.02
[javascript] Switch case else  (0) 2019.07.31
jsfiddle : kim hongwan's public fiddles, javascript  (0) 2019.06.13
반응형

jQuery UI Touch Punch

Touch Event Support for jQuery UI

 

Tested on iPad, iPhone, Android and other touch-enabled mobile devices.

 

 

http://touchpunch.furf.com/

 

https://github.com/furf/jquery-ui-touch-punch

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.

Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, becuase jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.

That's where jQuery UI Touch Punch comes in. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.

As I said, Touch Punch is a hack. It duck punches some of jQuery UI's core functionality to handle the mapping of touch events. Touch Punch works with all basic implementations of jQuery UI's interactions and widgets. However, you may find more complex cases where Touch Punch fails. If so, scroll down to learn how you can file and/or fix issues.

This code is dual licensed under the MIT or GPL Version 2 licenses and is therefore free to use, modify and/or distribute, but if you include Touch Punch in other software packages or plugins, please include an attribution to the original software and a link to this Touch Punch website.

Download the Code

The jQuery UI Touch Punch plugin is available in two versions:

* minified & gzip'd

 

 

Using Touch Punch is as easy as 1, 2…

Just follow these simple steps to enable touch events in your jQuery UI app:

  1. Include jQuery and jQuery UI on your page.

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

  2. Include Touch Punch after jQuery UI and before its first use.

    Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

    <script src="jquery.ui.touch-punch.min.js"></script>

  3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

    <script>$('#widget').draggable();</script>

 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분  (0) 2014.04.21
[jQuery] Twproject Gantt: JavaScript component for creating Gantts  (0) 2014.04.21
[javascript] Trianglify: Generate colorful triangle meshes  (0) 2014.04.17
[jQuery] scrollToBySpeed: Scroll windows by speed instead of duration  (0) 2014.04.14
[jQuery] Sticky Alerts: A tiny sticky alert bar plugin  (0) 2014.04.10
반응형

Top 10 Cool JavaScript Framework for Mobile touch screen platforms

 

http://www.inspirefirst.com/2013/04/18/top-10-cool-javascript-framework-mobile-touch-screen-platforms/

 

 

The demand for mobile app development has shot up in recent years. This is owing to the emergence of myriads of smart phones and tablets that people are using for web access. A lot of such devices are touch screen based and that explains why mobile app developers are resorting to applications and frameworks that enable touch based mobile app creation simpler. However, this is not exactly a cakewalk and given the fact developers need to stay updated with prevalent trends and user needs, it can take a toll on creativity.

Mobile app and website development is done using JavaScript most of the times. This is because of the fact it is compatible with major OS and platforms and does not require complex coding. For a mobile developer it is important to know widely used and effective JavaScript frameworks that can be used to develop versatile apps and cutting edge responsive mobile websites.

Hammer.js
Hammer.js is a widely used light framework which offers support for popular touch screen gestures like pinch. Drag, swipe, double tap and rotate. It can be used in mobile OS environments including BlackBerry, Android, Windows Mobile and iOS.

FastClick
FastClick is a useful library that eliminates the usual 300ms delay existing between a finger tap and initiation of a click event in all mobile browsers. As a result, users get an experience of speedier web browsing on their devices. It offers support for mobile web browsers like Mobile Safari, Chrome, Android Browser and Opera Mobile.

jQueryUI
jQueryUI is ideal for those developers who deal with apps built on jQuery JS Library for themes, widget, interaction and visual effect creation. With this framework you can make interactive online mobile apps within short time span.

Swipe
Swipe is a very useful touch slider, which supports swiping and offers fast response. It has hardly any alternative.

JQUERY.PEP.JS
JQUERY.PEP.JS is a plug-in with small footprint that enables kinetic-dragging in desktop and mobiles. It makes use of animate functions of jQuery and CSS animations to allow users add kinetic drag functionality in HTML5 enabled devices. It also has support for stopping, starting and dragging events.

FooTable
FooTable is a capable jQuery plug-in that is used to make HTML tables on handled devices like tablets and touch screen based smart phones. It allows developers to make the tables appear neat no matter how much data is put in the columns. With this framework, you can convert HTML tables in responsive and expandable tables.

Quo JS i
Quo JS is a JaveScript library that enables developers to pass through HTML documents, deal with Ajax interactions and handle events for efficient mobile web development. With this library, you can generate cross-browser code easily.

TinyNav.js
TinyNav.js is a small sized jQuery plug-in that enables changing <ol> and <ul> navigations to select dropdowns in small screen devices.

Pointer.js
Pointer.js is ideal if you want to unify mouse and touch based events. This is essential because lots of mainstream computers are going to be driven by touch inputs in near future.

Jo
Jo enables developers to create web apps as well as native mobile apps with same coding. This can prove to be a real timesaver. It runs on Chrome OS, BlackBerry, Android and iOS. It is Open Source and requires no usage or licensing cost. This framework has UI elements like web form widget and popup widget. The former can be used to make log in screens and the latter is useful for offering users extra information when they click any interface element.

These are the major touch screen specific JavaScript frameworks developers can benefit from. However, there are other popular apps like Sencha Touch that you can try.

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[WEB] Hammer.js - A javascript library for multi-touch gestures  (0) 2013.04.22
[WEB] iCheck — Customized checkboxes and radio buttons  (0) 2013.04.22
75+ Mobile App Development Tutorials – Start Your App Success Today!  (0) 2013.04.11
[Jquery] 8 jQuery Form Label (HTML5 Placeholder) Plugins  (0) 2013.04.11
[Chart] Chart 그리기 - javascript  (0) 2013.04.10
반응형

Sencha Touch 2 Build Mobile Web Apps with HTML5

Buy Support Download

Sencha Touch 2 hero

The Best Framework Just Got Better

Build HTML5 mobile apps for iPhone, Android, and BlackBerry.

Watch VideoWith over 50 built-in components, state management, and a built-in MVC system, Sencha Touch 2 provides everything you need to create immersive mobile apps.

View Examples



반응형
저작자표시

'프로그래밍 > App' 카테고리의 다른 글

iCloud 에서 파일 관리하는 방식 - NSFile, NSFileCoordinator, NSMetadata Query  (0) 2012.08.08
[apple] APP - MW Inspector (모바일웹사이트 속도/네트워크 측정)  (0) 2012.07.31
Metro 스타일 앱 개발  (0) 2012.07.08
국산 하이브리드 모바일 어플 프레임워크라는군요.  (0) 2012.04.23
[Android] 안드로이드 버전별 정리  (0) 2012.04.23
반응형

Touch Charts Mobile HTML5 Charts

Sencha Touch Charts works on today's best mobile touchscreen devices.


Rich, interactive charts built in HTML5 and optimized for mobile.

Watch Video Build interactive, easy-to-use radar, bar, line, stacked, and pie charts. Visualizing rich data on the mobile web has never been easier.

View Sencha Touch Charts Demos

Groundbreaking Interactivity

Groundbreaking Interactivity Sencha Touch Charts breathes new life into your data and utilizes hardware acceleration for optimized performance. With natural gestures in Sencha Touch Charts, visualizing and understanding complex datasets is effortless. Pinch-to-zoom, swipe-to-pan across data, and tap for deep dives. Data flows come to life with every tap, pinch, and swipe.

Built with Web Standards

Built with Web Standards Sencha Touch Charts uses HTML5 capabilities like Canvas elements for drawing and CSS3 for styling, delivering the highest performance and richest experience in today’s mobile web browsers. All touch events use Sencha Touch’s sophisticated events and gesture system which is optimized for modern mobile web browers.

Demos

US Energy app icon World Data app icon Combo chart icon Radar chart icon
View more demos & examples (WebKit required)

Built for Sencha Touch

Built on top of our industry-leading mobile web app framework, Sencha Touch Charts is now available to buy as a commercially licensed, $99 add-on to Sencha Touch. Open Source Sencha Touch developers will be able to use Sencha Touch Charts free of charge under the terms of the GPLv3 license. Sencha Touch Charts is compatible with Sencha Touch 1.1 and above.

Buy Sencha Touch Charts Learn more about Sencha Touch

  • Pan
  • Rotate
  • Zoom
  • Highlight
  • Reset
  • Combine
반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[크롬] 모바일 사이즈로 확인해보기  (0) 2011.12.07
크롬에서 json데이터 볼때 설치하시오~ 어디? 크롬에다가~  (0) 2011.11.30
[HTML5] HTML5 API의 기능  (0) 2011.08.21
[HTML5] Web Worker  (0) 2011.08.21
[HTML5] 10 Web Workers  (0) 2011.08.21

+ Recent posts

티스토리툴바