태그 보관물: jQuery

간단 배너 만들기, Simple Banner

태그만 입력하면 자동으로 배너가 만들어지도록 Simple Banner을 만들었습니다.
일단 필요한 CSS 와 자바스크립트 파일을 로드합니다.

1
2
3
<link rel="stylesheet" href="simpleBanner.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="simpleBanner.js"></script>

그리고 필요한 곳에 다음의 형식으로 태그만 입력하면 나머지는 Simple Banner가 알아서 처리합니다.

5
6
7
8
9
10
<div class="simple_banner_wrap">
	<ul>
		<li>......</li>
		<li>......</li>
	</ul>
</div>

Demo: http://hangunsworld.com/blogSamples/simpleBanner/

다음의 속성값을 통해서 배너의 동작을 설정할 수도 있죠.
data-type: 배너 동작 방식

  • alpha: 알파 트윈
  • hslide: 가로방향 슬라이드
  • vslide: 세로방향 슬라이드

data-nav-type: 네비게이션 타입

  • bullt: 블릿
  • numeral: 숫자
  • prev_next: 이전/다음

data-interval: 타이머 시간(밀리세컨드)

update: 2016/03/02
소스 요청이 간간이 있어 다운로드 링크 추가합니다.
Simple Banner 소스 다운로드

jQuery의 ajax()를 확장한 AjaxDelegate

jQuery.ajax()의 기능을 확장한 AjaxDelegate를 만들었습니다. 이전에 작업한 프로젝트에서 만들어 사용하던 코드를 조금 손봐서, 공개해 봅니다.
아래와 같이 사용할 수 있습니다.

var params = {};
params.param1 = Math.round(Math.random() * 10000);
params.param2 = "some text";
var delegator = new AjaxDelegate("dataText.php", params, ajaxDelegateSuccess, ajaxDelegateError);
delegator.load();

좀 더 자세한 사용법은 아래 링크를 참고하세요.

데모: AjaxDelegate Demo
다운로드: ajaxDelegate.js

프리머스 영화 예매

얼마전에 리뉴얼 한 프리머스 씨네마예매 서비스.
기존에 사용하던 실버라이트를 대신해서, 웹접근성 등을 고려하여 HTML5 버전으로 만들었습니다.
이외에도 동영상 플레이어 라던가 여러가지 작업을 하긴 했지만, 메인으로 맡아서 작업한게 예매인지라…

프리머스 영화 예매 - 영화선택

프리머스 영화 예매 더보기

iPad 음악 앱, 아티스트 목록 따라하기

아이패드의 음악 앱에서 아티스트 목록으로 가서 가수를 선택하면, 해당 가수의 앨범 목록이 나옵니다.
위아래로 스크롤을 해보면 앨범 제목과 커버자켓 이미지가 스크롤영역 상단에 고정되어 보이죠. 이걸 jQuery를 사용해서 만들어 봤습니다.

iPad 음악, 아티스트 목록

다음의 기기 및 브라우저를 지원합니다.
PC의 파이어폭스, 크롬, 사파리 완벽 지원(jQuery 사용)
IE9, 오페라 부분 지원(iScroll을 사용하여 기능 구현)
iOS 기기(iPhone 3GS 이전, iPad 오리지널 제외) 부분 지원(iScroll을 사용하여 기능 구현)
IE8 이전 버전 미지원
안드로이드 미지원

파이어폭스, 크롬 및 사파리의 경우 jQuery와 scroll 이벤트를 사용하면 이상없이 잘 동작합니다.

그러나 IE9와 오페라의 경우에는 화면 상단에서 레이어가 떨리는 현상이 발생하기 때문에 iScroll을 사용해서 동작하도록 구현 했습니다. 이때 iScroll에 scroll 이벤트가 없고, 휠 스크롤의 거리 등의 문제로 인해, iScroll 4에 약간 수정을 가한 파일을 사용했습니다.

IE8 이전 버전은 iScroll에서 지원하지 않으므로 제외했습니다.

iOS 기기도 대부분 iScroll을 통해 지원하지만, 일부 구형 모델은 속도 문제로 지원하지 않습니다.

안드로이드는 갤럭시 S3, 넥서스원, 베가 등의 단말에서 테스트 해 봤는데, 문제가 많아서 제외시켜 버렸습니다. jQuery로 제어하면 상단 레이어가 떨리고, iScroll을 사용하면 속도가 느려지는 등 많은 문제들이 생기네요. 게다가 단말기 마다 차이가 나고, 한 기기에서도 브라우저 별로도 다르게 동작하는 등 문제가 있습니다.

IE10 이상 및 윈도우 모바일 등 위에 언급되지 않은 환경에서는 테스트 해보지 못했습니다. 혹시 확인해 보실 수 있으면, 댓글로 결과 알려주세요.

ps. 정말, 웹 작업을 하다보면 IE가 개판이라고 몸소 느끼지만, 모바일 작업을 해보면 안드로이드도 이에 뒤지지 않는다는 사실을 절감하게 되는군요.

iScroll 4에 onScroll 이벤트 사용하여 iOS의 TableView 구현하기

최근 모바일웹 프로젝트를 진행하면서, DIV 스크롤 기능이 필요하여 iScroll을 사용하게 되었습니다. 그런데 아직 onScroll 이벤트를 제공하지 않아서, 약간의 코드를 추가해서 onScrolling 이벤트를 만들었습니다.

다음과 같이 onScrolling 이벤트를 추가해 주고,

127
128
129
130
131
132
133
134
135
136
137
138
139
140
// Events
onRefresh: null,
onBeforeScrollStart: function (e) { e.preventDefault(); },
onScrollStart: null,
onBeforeScrollMove: null,
onScrollMove: null,
onBeforeScrollEnd: null,
onScrollEnd: null,
onTouchEnd: null,
onDestroy: null,
onZoomStart: null,
onZoom: null,
onZoomEnd: null,
onScrolling:null

그리고 _pos함수에서 위에서 정의된 onScrolling 이벤트를 실행하도록 했습니다.

287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
_pos: function (x, y) {
	if (this.zoomed) return;
 
	x = this.hScroll ? x : 0;
	y = this.vScroll ? y : 0;
 
	if (this.options.useTransform) {
		this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ;
	} else {
		x = m.round(x);
		y = m.round(y);
		this.scroller.style.left = x + 'px';
		this.scroller.style.top = y + 'px';
	}
 
	this.x = x;
	this.y = y;
 
	if (this.options.onScrolling) this.options.onScrolling.call(this);
 
	this._scrollbarPos('h');
	this._scrollbarPos('v');
},

스크롤 이벤트를 받으려면, iScroll 초기화 시에 다음과 같이 콜백함수를 등록해 주면 됩니다.

myScroll = new iScroll('wrapper', {onScrolling: scrolling});
 
function scrolling(){
	// onScroll event
}

약 2주일 정도 테스트 해보고 있는데, 아직까진 별다른 문제는 없어 보이네요.

iOS TableView Demo
Simple TableView Demo
TableView with IndexBar Demo