jQuery Mobile 은 data 라는 글로 시작하는 수 많은 attributes 를 사용합니다. 예를 들어 data-role, data-icon, 등이 있습니다. 이러한 attributes들은 jQuery Mobile에서는 아주 의미 있는 것들입니다. 이러한 attribute들이 original HTML 코드를 좀 더 enhance 된 display 를 보여 주도록 합니다.
그런데 이렇게 jQuery Mobile 이 사용하고 있는 attribute들을 다른 library 도 한 두개 사용하고 있다면 어떻게 될까요? 그러면 OS에서는 혼동스럽겠죠.
이러한 문제를 해결하기 위해 jQuery Mobile은 namespaces를 사용합니다. 대부분 data 글자 다음에 추가 됩니다. 아마 data라는 글자로 시작하는 attributes를 가지고 있는 library들은 많을 겁니다. jQuery Mobile을 포함해서요. 하지만 data 뒤에 특별한 name space를 붙이면 같아지지 않겠죠. 예를 들어 data-role 이라는 이름이 중복되지 않게 하기 위해 data-my-role를 사용할 수 있겠죠. 여기서 가 나름대로의 namespace "my-"가 될 수 있을 겁니다.
Indicate the namespace in the HTML page
$.mobile.ns가 namespace로 사용됩니다. 만약 namespace 가 사용되지 않으면 jQuery Mobile은 "" 을 사용합니다. 즉 classic 한 data-role, data-icon, 등을 사용하게 되는거죠.
"ns1-"
namespace를 사용하도록 할 수 있습니다. namespace 끝에 "-"가 붙은것을 잘 봐 두세요. attributes에 space를 사용하지 않고 이것을 많이들 사용하죠.
Using the "ns1-" namespace
<!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>
$(document).bind ("mobileinit", function ()
{
$.mobile.ns = "ns1-";
});
</script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div id=home data-ns1-role=page id=home data-ns1-theme=e>
<div data-ns1-role=header>
<h1>Home</h1>
</div>
<div data-ns1-role=content>
<p> Window content </p>
</div>
</div>
</body>
</html>
$.mobile.ns 의 값을 바꾸기 위해 mobileinit event를 사용했습니다. 그리고 그 값을 jQuery Mobile에서 사용하도록 만들었죠.
그리고 나서 data-ns1-role
(instead of data-role) 과 data-ns1-theme
(rather than data-theme)
attributes 들을 사용합니다. 만약 여기서 data-role 과 data-theme
attributes들을 사용하면 작동되지 않을 겁니다.
Access to the attribute in JavaScript code
data-role attribute 가 namespace "ns1-"를 사용해서 data-ns1-role로 사용되는 것을 위에서 보셨습니다. 그렇게 하면 자바스크립트 안에서 data-ns1-role attribute name을 사용할 수 있게 되는 건데요. 아래와 같이도 사용할 수 있습니다.
First form of writing (to be avoided)
alert ($("div#home").attr ("data-ns1-role"));
위와 같이 namespace를 사용할 수도 있고,
Second form of writing (best)
alert ($("div#home").attr ("data-" + $.mobile.ns + "role"));
위와 같이 원래의 $.mobile.ns 를 사용할 수 있습니다.
두번째 것은 namespace 값을 사용하지 않은 거죠. 이렇게 하면 나중에 namespace를 한꺼번에 바꾸어야 될 때 유용하겠죠. 즉 유지, 관리가 용이하게 됩니다.
또한 jQuery Mobile 에서는 이 writing 을 좀 더 간편하게 사용하도록 하는 메소드를 제공하고 있습니다. jqmData
(name) method가 그것입니다.
Third form of writing (optimal)
alert ($("div#home").jqmData ("role"));
jqmData (name) method는 "data-" 와 name스트링과 함께 namespace의 연속성을 허용하고 해당 attribute의 값을 retrieve 합니다. 그 attribute 값의 retrieve를 위한 attr () jQuery method는 더이상 사용하지 않습니다. jqmData () method로 교체 됐죠.
jqmData (name) and jqmData (name, value) methods
jqmData
() methods를 사용하는 목적은 jQuery attr
() method를 사용하지 않고 해당 attribute들을 관리할 수 있도록 하기 위함 입니다.
Methods managing attributes
|
Method |
Signification |
|
jqmData (name) |
Get the value of the data-xxx-name attribute, for example data-ns1-role. |
|
jqmData (name, value) |
Set the value of the data-xxx-name attribute, for example data-ns1-role. |
Get the theme associated with the window
alert ($("div#home").jqmData ("theme"));
Set the theme associated with the window
$("div#home").jqmData ("theme", "a");
Access to the attribute in selectors
attribute들의 관리를 제대로 하기 위해 jQuery Mobile은 selector들을 사용할 때 이것을 manage 할 수 있도록 방법을 제공하고 있습니다. 여기에 jqmData (value) pseudo-class를 생성하는 이유입니다.
First form of writing (to be avoided)
alert ($("div[data-ns1-role=page]").html ());
위와 같이 하는 대신에 아래와 같이 할 수 있습니다.
Second form of writing (best)
alert ($("div[data-" + $.mobile.ns + "role=page]").html ());
jqmData (value) pseudo class와 같이 사용하면 아래와 같이 됩니다.
Third form of writing (optimal)
alert ($("div:jqmData(role=page)").html ());
만약 "role"
string 만 사용한다면 data-role
attribute가 있는 모든 <div>
elements 들을 retrieve 할 겁니다.
All <div> elements with the data-role attribute set to any value
alert ($("div:jqmData(role)").length); // 3 elements: page, header, content
All <div> elements with the data-role attribute set to "page"
alert ($("div:jqmData(role=page)").length); // 1 element: page
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 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 |
| Configuration Options (0) | 2012.09.29 |
| mobileinit 이벤트가 triggering 되는 시기 알아보기 (0) | 2012.09.29 |
| Property 들 출력하기 (JQM + Javascript Programming) (0) | 2012.09.27 |
| JQuery Mobile - Layout Grid (Columns) (0) | 2012.08.22 |
| JQuery Mobile - Basic HTML Styles (0) | 2012.08.14 |