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

WBOY
リリース: 2016-05-16 16:40:15
オリジナル
1480 人が閲覧しました

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'}" の場合、マウスが上に移動したときにイベントを呼び出します。})

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート