HTML 및 플러그인 애플리케이션_HTML/Xhtml_웹 페이지 제작에서 데이터 사용자 정의 속성 사용 소개

데이터 속성이 있는 일부 HTML을 자주 볼 수 있습니다. 이는 HTML5의 사용자 정의 속성이며 JS를 직접 호출하는 것이 매우 편리합니다. HTML5의 속성이지만 다행스럽게도 jQuery에 공통되어 있습니다. IE 하위 버전을 포함한 모든 브라우저에서 정상적으로 사용 가능합니다. 사용 방법에 대한 간략한 소개는 다음과 같습니다.
1. 간단한 사용

코드 복사

코드

코드 복사

코드는 다음과 같습니다.

$(function(){
var _widget= $(" #widget").attr("data -text"); Alert(_widget);//data-text="123456"이므로 123456을 인쇄합니다.
})

2. 사용 $.fn.extend를 사용하여 Plug-in

코드 복사

코드는 다음과 같습니다.

테스트 영역입니다

코드 복사

코드는 다음과 같습니다.

//Plug-in 확장 부분
;(function($){
$.fn.extend({
Test:function(config){
/**
* @param 효과 효과
* config||{}는 사용자 정의 속성이
에 전달될 때 기본값을 실행하지 않습니다.*/
// 기본값 설정
config=$.extend({
효과:'클릭',
} ,config||{})
var effect=config.효과
var _text=config._text; >if(효과=='클릭'){
$(this).click (function(){
alert('this click');
})
}else if(효과= ='mouseover'){
$(this).mouseover(function(){
alert("this is mouseover");
})
}
}
})
})(jQuery)

코드 복사코드는 다음과 같습니다.

//호출 부분, HTML의 데이터 속성은 이에 따라 다릅니다.
$(function(){
var _widget= $("#widget").attr("data- widget-config");
// 문자열을 json 객체로 변환하는 방법은 두 가지가 있습니다
var widgetConfigJSON=eval("(" _widget ")");
// var widgetConfigJSON = (new Function( "return " _widget))();
$("#widget").Test( widgetConfigJSON)
//HTML의 데이터 속성은 data-widget-config="{효과:'click'이기 때문입니다. }", 여기에서 클릭 이벤트가 호출됩니다.
data-widget-config="{ effect:'mouseover'}"인 경우 마우스가 위로 움직일 때 이벤트를 호출합니다.})