HTML およびプラグインアプリケーションでのデータカスタム属性の使用の概要_HTML/Xhtml

HTML およびプラグインアプリケーションでのデータカスタム属性の使用の概要_HTML/Xhtml_Web ページ制作

WBOY

リリース： 2016-05-16 16:40:15

オリジナル

1492 人が閲覧しました

data 属性を持つ HTML をよく見かけますが、これらは HTML5 のカスタム属性であり、JS を直接呼び出すことができて非常に便利ですが、幸いにも jQuery と共通です。 IE の下位バージョンを含むすべてのブラウザで通常どおり使用できます。使い方を簡単に紹介します:
1. 簡単な使い方

コードをコピーしますは次のとおりです:

コードをコピーしますコードは次のとおりです:

$(function(){

var _widget= $(" #widget").attr("data -text");alert(_widget);//data-text="123456" なので、123456 を出力します
})

2. を使用します$.fn.extend でプラグインを作成します

コードをコピーコードは次のとおりです:

これはテスト領域です

コードをコピーしますコードは次のとおりです:

//プラグイン拡張部分

;(function($){
$.fn.extend({
Test:function(config){
/**
* @param 効果効果
* カスタム属性が
に渡された場合、config||{} はデフォルト値を実行しません*/
// デフォルト値を設定
config=$.extend({
effect:'click',
} ,config||{});
var effect=config.effect; >if(effect=='click'){
$(this).click (function(){
alert('this click');
})
}else if(effect= ='マウスオーバー'){
$(this).mouseover(function(){
alert("これはマウスオーバーです");
})
}
}
})
})(jQuery)

コードをコピー

コードは次のとおりです: //HTML の呼び出し部分、データ属性はこれに依存します

$(function(){

var _widget= $("#widget").attr("data- widget-config");

// 文字列を json オブジェクトに変換するには 2 つの方法があります
var widgetConfigJSON=eval("(" _widget ")");
// var widgetConfigJSON = (new Function( "return " _widget))();
$("#widget").Test( widgetConfigJSON);
//HTML の data 属性は data-widget-config="{effect:'click' であるため}" の場合、ここでクリックイベントが呼び出されます。
data-widget-config="{effect:'mouseover'}" の場合、マウスが上に移動したときにイベントを呼び出します。})