jQuery Mobile 컴포넌트는 $.widget () method를 사용해서 만듭니다. 이 메소드는 컴포넌트를 생성하고 initialize 하며 이 안에 여러분이 원하는 메소드를 넣어서 사용하실 수 있습니다.
컴포넌트를 생성하기 위해서는 _create () method를 정의하고 나서 _init () method를 정의함으로서 initialize 할 수 있습니다. _create () method는 필수 입니다. 위 두 메소드의 다른 점은 실행 순서가 다릅니다. 즉 _create () method는 _init () method 이전에 실행 됩니다.
jQuery Mobile component를 만들기 위해 일반적으로 그 컴포넌트를 포함하고 있는 JavaScript 파일을 만들죠. 그 자바스크립트 파일은 HTML page 에서 <script>
tag를 사용해서 include 될 수 있습니다. 그러면 자바스크립트 안에 있는 메소드에 접근해서 사용할 수 있게 됩니다.
실습을 해 보죠. 일단 아래 소스코드를 가지고 있는 myplugin component 를 만들겠습니다. myplugin.js file을 만들어서 그 안에 넣으시면 됩니다.
Creating a component (file myplugin.js)
(function ($, undefined )
{
// component definition
$.widget ("mobile.myplugin", $.mobile.widget,
{
_create: function ()
{
var $elem = this.element;
$elem.css ( { "background-color" : "black", color : "white" } );
}
});
// taking into account of the component when creating the window
// or at the create event
$(document).bind ("pagecreate create", function (e)
{
$(":jqmData(role=myplugin)", e.target).myplugin ();
});
}) (jQuery);
이 컴포넌트는 특정 element의 style을 바꾸는 일을 합니다. 배경색과 글자 색을 바꾸죠. 배경색은 검정이고 글자색은 흰색이 될 겁니다.
$.widget () method가 이 플러그인의 첫번째 parameter 죠? 일반적으로 컴포넌트의 진행 순서는 같습니다. _create () method는 this.element를 통해서 그 메소드를 사용할 HTML element에 접근하게 됩니다. this.element의 value는 그 HTML element와 연결된 jQuery 클래서 객체 입니다.
pagecreate 와 create events를 다루는 부분을 잘 보세요. 이 둘중의 한 이벤트가 발생하면 data-role=myplugin attribute를 가지고 있는 모든 HTML element들을 찾을 겁니다. 그 부분이 바로 이벤트가 일어나는 e.target인 거죠. 그리고 나서 이것을 myplugin () method를 사용해서 myplugin component에 전달해 줍니다. 이 메소드를 부르는 것은 그 내부의 _create () method를 시작하도록 해서 컴포넌트를 create 하게 하죠.
이렇게 하면 이제 HTML page에서 이 컴포넌트를 사용할 수 있게 되는 겁니다. HTML 페이지 안에 data-role="myplugin"
attribute를 <div>
element안에 정의 합니다. 그렇게 함으로서 새로운 component에 연결 되도록 만들 수 있습니다.
Using the component in an HTML page
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
<script src=jquery.mobile/myplugin.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
<div id=plug1 data-role=myplugin>
<p>This is my component</p>
</div>
</div>
</div>
</body>
</html>
이 HTML page를 브라우저에서 열면 _create
() method 안에서 지정한 style이 작동해서 해당 div 안에 있는 텍스트의 배경색과 글자 색을 바꾸게 됩니다.
myplugin.js
convention05.html'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 컴포넌트에 이벤트 생성하고 사용하기 (0) | 2012.10.04 |
|---|---|
| 컴포넌트에 메소드 추가하기 (0) | 2012.10.04 |
| Ajax 로 컴포넌트 사용하기 (0) | 2012.10.03 |
| 컴포넌트에 파라미터 전달하기 (0) | 2012.10.03 |
| 컴포넌트 생성 여부 체크하는 방법 (0) | 2012.10.03 |
| Virtual Events 알아보기 (0) | 2012.09.30 |
| 네임 스페이스 사용하기 (0) | 2012.09.30 |
| Configuration Options (0) | 2012.09.29 |
| mobileinit 이벤트가 triggering 되는 시기 알아보기 (0) | 2012.09.29 |
| Property 들 출력하기 (JQM + Javascript Programming) (0) | 2012.09.27 |