HTML およびプラグイン アプリケーションにおけるデータ カスタム属性の使用の概要

<div id="ウィジェット" データテキスト="123456"></div>

$(関数(){
var _widget = $("#widget").attr("data-text"); alert(_widget); //data-text="123456" なので、123456 が出力されます
})

<div id="widget" data-widget-config="{effect:'click'}">これはテスト領域です</div>

//プラグイン拡張部分
;(関数($){
$.fn.extend({
テスト:function(config){
/**
* @param 効果 効果
* config||{} カスタムプロパティが渡された場合、デフォルト値は実行されません
*/
// デフォルト値を設定する
config=$.extend({
効果: 'クリック'、
},config||{});
var effect = config.effect;
var _text=config._text;
if(効果=='クリック'){
$(this).click(function(){
alert('このクリック');
})
}それ以外の場合(効果=='マウスオーバー'){
$(this).mouseover(function(){
alert("これはマウスオーバーです");
})
}
}
})
})(jQuery)

//呼び出し部分、HTMLのデータ属性はこれに依存します
$(関数(){
var _widget = $("#widget").attr("データウィジェット設定");
// 文字列をJSONオブジェクトに変換する方法は2つあります
var widgetConfigJSON = eval("("+_widget+")");
// var widgetConfigJSON = (新しい Function("return " + _widget))();
$("#widget").test(widgetConfigJSON);
// HTML のデータ属性は data-widget-config="{effect:'click'}" なので、ここでクリック イベントが呼び出されます。
data-widget-config="{effect:'mouseover'}" の場合、マウスオーバーのイベントが呼び出されます})