今日は、前々から書こうと思っていたjQueryでの自作クラスの作り方について備忘録としてめもします。
（jqueryでは、クラスとは言わずに「プラグイン」と言うそうです。以降、プラグインと記します）
まず、ファイル命名規則についてですが基本的には
jquery.myplugin.jsとします。
プラグインの基本構造は
(function($) {
var val_1; // フィールド
var val_2; // フィールド
$.fn.myplugin = function(option) {
// 処理
}
}) (jQuery);こんな感じです。この例で行くと呼び出し側では
$("div#plugin_test").myplugin({val1:"value1", val2:"value2"});こんな感じになります。例えばすごく簡単ですが、
ボタンをクリックする度に現在時刻をHTMLに表示し、テキストボックスに入力された文字をそのボタンへ表示するプラグインを作成してみます。
１）呼び出し（html）側
<head>こんな感じです。
<script type="text/javascript" src="./js/jquery-1.4.2.js">
<script type="text/javascript" src="./js/jquery.myplugin.js"></script>
</head>
<body>
<h1>MYPLUGIN</h1>
<input type="text" name="txt">
<input type="button" name="btn" value="push">
<!-- ここへ表示 -->
<div id="result"></div>
</body>
</html>
<script type="text/javascript">
$(function() {
// ボタンがクリックされたら
$("input[name=btn]").click(function() {
// id=resultへ時刻表示とテキストボックスの値をボタンへ表示させる
$("input[name=btn]").myplugin({dest:"result", value:$("input[name=tx]").val()});
});
});
</script>
２）プラグイン（jquery）側
(function($) {
var _option; // 値を保持するフィールド
var _dest; // 時刻の表示先ID
var _value; // テキストボックスの値
var _elem; // ボタンエレメント
/**
* コンストラクタ的なもの
* option はhtml側から渡された引数オブジェクト
*/
$.fn.increment = function(option) {
_option = $.extend({
_dest : option.dest, // 時刻表示先ID
_value : option.value, // ボタン表示値
_elem : this // 表示させるボタンエレメント
}, option);
draw();
}
function draw() {
// 日付を指定されたIDに表示させる
var date = new Date();
$("#"+_option._dest).html(date.toGMTString());
// ボタンの表示を変更
_option._elem.val(_option._value);
}
}) (jQuery);こうです。何となく理解できるでしょうか。。。
ちょっと例が悪かったです、、実際にコードを書いて試してみて下さい。
以上でぇぇぇす(´・ω・｀)