Edited at

jQueryプラグインの基本書式

More than 3 years have passed since last update.


オプション値の引数をJSONで与える

基本形。

オプション値は$.extendを使って、デフォルト値→ユーザー指定値の順で上書き。

jQuery.extend() | jQuery API Documentation


plugin.js

( function ( $ ) {

$.fn.pluginName = function ( options ) {

// オプション初期化
var settings = $.extend( {
// デフォルト設定
fontSize : 20,
color: "red",
}, options );

// -----------------------------

// プラグイン本文記述
elem = $(this);
elem.css( settings );
return false;
}
} ( jQuery ) );



index.html

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery plugin test</title>
</head>
<body>

<p id="message1">this message color is green.</p>
<p id="message2">default color is red.</p>
<p id="message3">this message color is orange.</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="plugin.js"></script>
<script>
// オプションを指定
$("#message1").pluginName( {
color: "green",
fontSize: 16,
fontWeight: "bold"
} );

// デフォルト値で実行
$("#message2").pluginName();

// オプション「color」のみ指定
$("#message3").pluginName({color:"orange"});
</script>
</body>
</html>



オプション値を複数与える

やり方はほぼ同じ。必須値を持たせたいときなどに。


plugin.js

( function ( $ ) {

$.fn.pluginName = function ( options, message ) {

// オプション初期化
var settings = $.extend( {
// デフォルト設定
fontSize : 20,
color: "red",
}, options );

// -----------------------------

// プラグイン本文記述
elem = $(this);
elem.css( settings );

if ( message ) {
elem.text( message );
} else {
elem.text ( "message is not found." );
}

return false;
}
} ( jQuery ) );



index.html

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery plugin test</title>
</head>
<body>

<p id="message1">ここは“hello, world”に置き換わります</p>
<p id="message2">ここは“message is not found.”に置き換わります。</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="plugin.js"></script>
<script>
$("#message1").pluginName( {
color: "red",
fontSize: 25,
}, "hello, world!" );
$("#message2").();
</script>
</body>
</html>



参考