지금까지 해온 예제에는 컴포넌트 안에 오직 _create
() method 만 있습니다. 컴포넌트 밖에서는 사용되지 않는 메소드죠. (prefix "_"를 사용하는 것은 private method라는 의미입니다.). 이 콤포넌트에 외부로부터 call 해서 사용할 수 있는 여러분의 메소드를 추가해 넣을 수 있습니다.
컴포넌트에 show
(), hide
(), setColor
(color, backgroundcolor) 그리고 getColor
() methods 들을 정의하겠습니다.
The show () method to display the component,
The hide () method to hide it,
The setColor (color, backgroundcolor) method can change the colors used,
The getColor () method returns a { color, backgroundColor } object containing the colors currently in use.
Defining methods on the component
(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;
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);
setColor
() method는 options
object에서 세팅할 때 받은 색을 저장합니다. 이렇게 색을 저장한 후에는 getColor
() 같은 다른 메소드에서 그 저장된 값을 사용할 수 있게 됩니다.
컴포넌트에 새로운 메소드들을 정의했습니다. 이것을 어떻게 자바스크립트로 사용하는지에 대해 살펴 보겠습니다.
Use the methods created on the component
<!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);
});
</script>
정의된 메소드들은 컴포넌트가 생성된 후에 사용 가능합니다. 그래서 myplugincreate event 가 사용 됩니다.
어떻게 컴포넌트에 있는 메소드를 call 하는지 잘 보세요.
Calling setColors () method of myplugin component
$(this).myplugin ("setColors", "white", "gainsboro");
메소드 이름이 invoke 할 때의 첫번째 인자 입니다. 그 다음에 사용 할 수 있는 파라미터들이 옵니다. 모든 인자들은 스트링으로 전달 됩니다.
convention09.html
myplugin2.js'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| $.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 |
| Virtual Events 알아보기 (0) | 2012.09.30 |