HTML 안에서 attributes를 통해서 jQuery Mobile 컴포넌트에 파라미터들을 전달할 수 있습니다. 예를 들어 element의 배경색과 텍스트 색을 전달해야 할 때 컴포넌트 안에서 직접 코딩을 해 넣을 수도 있지만 파라미터로 색을 받아서 사용할 수도 있습니다.
이를 위해서 HTML 에서 컴포넌트에 전달 할 새 data-color 와 data-background-color
attributes를 사용하겠습니다.
Transmitting the text color and background color of the element
<!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
data-color=white data-background-color=black>
<p>This is my component</p>
</div>
</div>
</div>
</body>
</html>
이전 글에서 사용한 컴포넌트는 HTML에서 data-color 와 data-background-color
attributes를 전달해도 그것이 무엇인지 모를겁니다. 그러니까 컴포넌트의 JavaScript 코드를 수정해야겠죠.
Using in the component the attributes passed in the HTML
(function ($, undefined )
{
// component definition
$.widget ("mobile.myplugin", $.mobile.widget,
{
options : {
backgroundColor : null,
color : null
},
_create: function ()
{
var $elem = this.element;
$elem.css ( { "background-color" : this.options.backgroundColor,
color : this.options.color } );
}
});
// 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);
options
property 를 만들었습니다. attribute같은 전달된 다양한 파라미터들을 포함하고 있죠. data-color
attribute는 options의 color
property와 매치 됩니다. data-background-color
attribute는 backgroundColor
property와 매치 되죠. 이 property들은 null로 initialized 됩니다. 왜냐하면 전달받은 값들이 거기에 할당 될 것이기 때문이죠.
위 코드에 있는 options
object는 jQuery Mobile의 Internal mechanism에 의해서 HTML 에서 넘어온 value로 자동적으로 initialize 됩니다.
convention07.html
myplugin1.jsCheck that this works:
만약 HTML에 attribute 가 할당돼 있지 않다면 그 component에서 사용되는 값은 options
object에 정의된 것이 될 겁니다. 위에서는 두개 옵션이 null 로 세팅돼 있지만 color 는 blue로 그리고 backgroundColor 는 gray로 할당 되어있다고 한다면 HTML 에 값이 없을 경우 이 값들이 대입 될 겁니다.
Using the component without attributes
<!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>
Using default values in the attributes
(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 } );
}
});
// 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);
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 링크 관련 jQuery Mobile 내부 flow 알아보기 1 (0) | 2012.10.08 |
|---|---|
| 두개의 이벤트 하나로 다루기, jQuery Mobile built in Components (0) | 2012.10.04 |
| 컴포넌트에 이벤트 생성하고 사용하기 (0) | 2012.10.04 |
| 컴포넌트에 메소드 추가하기 (0) | 2012.10.04 |
| Ajax 로 컴포넌트 사용하기 (0) | 2012.10.03 |
| 컴포넌트 생성 여부 체크하는 방법 (0) | 2012.10.03 |
| 나만의 jQuery Mobile 컴포넌트 만들기 (0) | 2012.10.02 |
| Virtual Events 알아보기 (0) | 2012.09.30 |
| 네임 스페이스 사용하기 (0) | 2012.09.30 |
| Configuration Options (0) | 2012.09.29 |