컴포넌트 안에 새로운 이벤트를 생성할 수 있습니다. 컴포넌트와 연관된 엘리먼트에서 간단하게 trigger (eventName) method 만 call 해 주면 됩니다. 이 메소드는 jQuery 의 standard 메소드 입니다. 그 이벤트는 jQuery 에서 bind () method를 사용해서 manage 될 겁니다.
예를 들어 글자색이 바뀌고 배경색이 바뀌는 두개의 이벤트를 생성할 수 있습니다. (changecolor event, changebackgroundcolor event)
이 이벤트가 발생해서 글자색과 배경색이 바뀌면 setColor
() method 부분을 alter 해야 합니다.
우선 컴퍼넌트 부분을 볼까요.
Trigger an event when the color changes
(function ($, undefined )
{
// component definition
$.widget ("mobile.myplugin", $.mobile.widget,
{
options : {
backgroundColor : "grey",
color : "blue"
},
_create: function ()
{
var $elem = this.element;
$elem.css ( { "background-color" : this.options.backgroundColor,
color : this.options.color } );
},
show : function ()
{
var $elem = this.element;
$elem.show ();
},
hide : function ()
{
var $elem = this.element;
$elem.hide ();
},
setColors : function (color, backgroundcolor)
{
var $elem = this.element;
if (color != this.options.color)
$elem.trigger ("changecolor", [color]);
if (backgroundcolor != this.options.backgroundColor)
$elem.trigger ("changebackgroundcolor", [backgroundcolor]);
this.options.color = color;
this.options.backgroundColor = backgroundcolor;
$elem.css ( { "background-color" : this.options.backgroundColor,
color : this.options.color } );
},
getColors : function ()
{
return { color : this.options.color,
backgroundColor : this.options.backgroundColor };
}
});
// 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);
trigger () method 는 첫번째 파라미터로 생성된 이벤트의 이름을 갖습니다. 그리고 두번째 파라미터로는 이벤트에 전달 될 내용을 배열로 갖습니다. (여기서는 [color] 와 [backgroundcolor]입니다.)
이 이벤트는 아래와 같이 자바스크립트에서 handle 될 수 있습니다.
Taking account of the event
<!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>
<script>
$("#plug1").bind ("myplugincreate", function ()
{
$(this).myplugin ("setColors", "white", "gainsboro");
var colors = $(this).myplugin ("getColors");
alert ("color = " + colors.color +
"\n backgroundColor = " + colors.backgroundColor);
});
$("#plug1").bind ("changecolor", function (event, color)
{
alert ("changecolor : " + color);
});
$("#plug1").bind ("changebackgroundcolor", function (event, backgroundcolor)
{
alert ("changebackgroundcolor : " + backgroundcolor);
});
</script>
convention10.html
myplugin3.js'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| $.mobile.loadPage (url, options) method 사용하기 (0) | 2012.10.15 |
|---|---|
| $.mogile.changePage(toPage,options) method 로 페이지 이동하기 (0) | 2012.10.13 |
| 링크 관련 jQuery Mobile 내부 flow 알아보기 2 (0) | 2012.10.09 |
| 링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0) | 2012.10.08 |
| 두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0) | 2012.10.04 |
| 컴포넌트에 메소드 추가하기 (0) | 2012.10.04 |
| Ajax 로 컴포넌트 사용하기 (0) | 2012.10.03 |
| 컴포넌트에 파라미터 전달하기 (0) | 2012.10.03 |
| 컴포넌트 생성 여부 체크하는 방법 (0) | 2012.10.03 |
| 나만의 jQuery Mobile 컴포넌트 만들기 (0) | 2012.10.02 |