댓글 : jQuery Mobile을 사용하면 종종 데이터 역할, 데이터 테마 등의 사용이 보입니다. 이는 HTML5 사용자 정의 속성입니다. 이 기사는 일부를 편집했습니다. 필요한 친구는 그것을 참조 할 수 있습니다.
jQuery Mobile을 사용하면 종종 Data-Role, Data-Theme 등이 표시됩니다. 예를 들어 다음 코드는 헤더의 효과를 달성 할 수 있습니다.
<div data-lole = "헤더">
<H1> 나는 제목 </h1>입니다
</div>
휴대 전화를 탐색하면 효과는 다음과 같습니다.
바닥에서 검은 색의 효과를 달성하고 데이터 롤 = 헤더를 작성하여 텍스트를 중심으로 할 수있는 이유는 무엇입니까?
이 기사는이를 구현하는 가장 간단한 방법을 제공하므로 모든 사람이 이러한 사용법을 직관적으로 이해할 수 있습니다.
Data-Chb = 헤더 속성을 사용자 정의하기 위해 HTML 페이지를 작성합니다. 이 속성이있는 DIV 영역의 배경색이 검은 색이고 텍스트가 흰색이며 중심이 표시되기를 바랍니다. Data-ChB 사용자 정의 속성이없는 DIV는 기본 모드에 표시됩니다. HTML 코드는 다음과 같습니다.
<body>
<div data-chb = "헤더">
<h1> 나는 data-chb custom attribute </h1>의 div를 사용했습니다
</div>
<br/>
<div>
나는 Data-Chb를 사용하여 속성을 사용자 정의하지 않았으므로 그들에게 필요한 그대로 보여줄 것입니다.
</div>
</body>
검은 색 배경색, 흰색 텍스트 및 중앙 디스플레이의 디스플레이 효과를 달성하기 위해 다음 CSS를 정의합니다.
<스타일>
.ui_header {
배경색 : 검은 색;
텍스트 정렬 : 센터;
색상 : 흰색;
테두리 : 1px 고체 #000;
}
</스타일>
그런 다음 다음 JS 메소드를 사용하여 페이지를로드 할 때 CSS 정의를 동적으로 추가하고 DIV의 디스플레이 스타일을 Data-ChB 속성으로 변경합니다.
<script type = "text/javaScript">
Window.onload = function () {
var elems = document.getElementsByTagName ( "div");
if (elems! = null && elems.length> 0) {
var 길이 = elems.length;
// 모든 div 컨트롤을 수송합니다
for (var i = 0; i <길이; i ++) {
var elem = elems [i];
// 컨트롤의 사용자 정의 속성을 가져옵니다
var customattr = elem.dataset.chb;
// 다음 방법으로 사용자 정의 속성을 얻을 수도 있습니다.
// var customattr = elem.dataset [ "chb"];
// 우리가 사전 정의한 헤더 값이라면 처리해야 함을 의미합니다.
if (customattr == "header") {
// 스타일을 추가합니다
elem.setattribute ( "class", "ui_header");
}
}
}
}
</스크립트>
마지막 페이지에는 다음과 같은 효과가 표시됩니다.
사람들은 항상 데이터를 저장하고 조작하기 위해 HTML 태그에 사용자 정의 속성을 추가하는 것을 좋아합니다. 그러나이 작업의 문제점은 다른 스크립트가 향후 사용자 정의 속성을 재설정할지 모른다는 것입니다. 또한 HTML 구문은 HTML 사양과 다른 부작용을 준수하지 않습니다. 그렇기 때문에 HTML5 사양에 사용자 정의 데이터 속성을 추가 한 이유는 많은 유용한 작업을 수행 할 수 있습니다.
HTML5의 자세한 사양을 읽을 수 있지만이 사용자 정의 데이터 속성의 사용은 매우 간단합니다. 데이터로 시작하는 모든 속성을 HTML 태그에 추가 할 수 있습니다. 이러한 속성은 페이지에 표시되지 않습니다. 페이지 레이아웃과 스타일에는 영향을 미치지 않지만 읽을 수 있고 쓸 수 있습니다.
다음 스 니펫은 유효한 HTML5 태그입니다.
<div
data-myid = "3e4ae6c4e"> 일부 멋진 데이터 </div>
그러나이 데이터를 어떻게 읽습니까? 페이지 요소를 반복하여 원하는 속성을 읽을 수 있지만 jQuery에는 이러한 속성을 조작하는 내장 방법이 있습니다. JQuery의 .data () 메소드를 사용하여 이러한 데이터* 속성에 액세스하십시오. 메소드 중 하나는 .Data (OBJ)이며 jQuery 1.4.3 버전 다음에 나타나고 해당 데이터 속성을 반환 할 수 있습니다.
예를 들어, 다음 쓰기 방법을 사용하여 Data-Myid 속성 값을 읽을 수 있습니다.
var myid = jQuery ( "#awesome"). data ( 'myid');
Console.log (MyID); 예를 들어 다음 html을 작성하는 경우 데이터-* 속성에서 JSON 구문을 사용할 수도 있습니다.
<div data-avenesome = '{ "게임": "on"}'> </div>
JS를 통해이 데이터에 직접 액세스 할 수 있습니다. JSON의 핵심 값을 통해 해당 값을 얻을 수 있습니다.
var gamestatus = jQuery ( "#awesome-json"). data ( 'awesome'). 게임;
Console.log (Gamestatus); 또한 .data (key, value) 메소드를 통해 데이터-* 속성에 값을 지정할 수도 있습니다. 주의를 기울여야 할 중요한 것은 이러한 데이터* 속성이 그들이있는 요소와 관련되어야하며, 무엇이든 저장하기위한 저장 도구로 취급해서는 안된다는 것입니다.
번역기 추가 : Data-*는 HTML5에만 나타나는 속성이지만 jQuery는 Universal이므로 HTML5 페이지 또는 브라우저에서는 여전히 .Data (OBJ) 메소드를 사용하여 데이터를 조작 할 수 있습니다.