ホームページ  >  記事  >  ウェブフロントエンド  >  スクリプトを介して構成パラメーターを渡す方法 カスタム属性_JavaScript スキル

スクリプトを介して構成パラメーターを渡す方法 カスタム属性_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 16:36:201348ブラウズ

私は正式なキャリアを始めたばかりです。ここ数日間、会社の統合ヘッダー JS に取り組んでおり、スクリプトのカスタム属性を介して構成パラメーターを渡す方法を思いつきました。

JS プラグインを作成する場合、プラグインを使用するには、まず HTML にプラグイン JS を導入し、次に script タグを追加してその中で呼び出す必要があります。映像切り替えプラグインなど。コードはおおよそ次のとおりです:

$.fn.picSwitch = function(option){
//这里是图片切换的代码
}

プラグインを導入した後、別のスクリプト タグに呼び出しコードを追加する必要があります

$('#pic').picSwitch({
'speed' : '400',
'derection' : 'left'
//... 这里是配置
})

もちろんこれで問題はありませんが、script タグを追加するだけの場合、設定パラメータをどのように渡せばよいでしょうか。

現時点では、スクリプトのカスタム属性を使用して構成パラメータを渡すことができます。これを行う前に、まず画像切り替えプラグインを処理する必要があります。変更されたコードは次のとおりです:

$.fn.picSwitch = function(){
//这里是图片切换的代码
};

//プラグインを作成した後、直接呼び出します
$('ここにセレクターがあります。これは script タグで取得する必要があります').picSwitch('ここに設定パラメータがあります。これは script タグで取得する必要があります');

次のステップでは、スクリプトを使用してパラメータを渡し、次のように HTML ページで js プラグインを参照します。

<head>
<script src='/script/picSwitch.js' id='picSwitch' obj='#pic' option='{"speed":"400","derection":"left"}'></script>
</head>
<body>
<div id="pic">
//这里是具体结构
</div>
</body>
最後にプラグインを次のように変更します:

$.fn.picSwitch = function(){
//这里是图片切换的代码

};

//写好插件后就直接调用
var script = $('#picSwitch'),//标签上的id
selector = script.attr('selector'),
option = JSON.parse(script.attr('option'));//标签上的是字符串需要转为json对象
$(selector).picSwitch(option);
この方法では、関数の実装に使用されるタグは 1 つだけです。構成変更にはスクリプトのカスタム属性の変更のみが必要です。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。