jQueryプラグインの作り方

Xbox実績解除ブログパーツ、なんとか体裁が整った。

ライブドアブログでのサンプル（右上）

javascriptが貼れるブログだと大体大丈夫みたい。ブラウザもfirefox、safari、クロームで確認済み。でもはてなはアウトな。
ブログパーツ化するにあたって、jQueryを直書きしていたものをプラグイン化した。
拙いものだけどパーツ以外の用途でネタ的に楽しんでもらえるかも。
まずはもともとのjqueryが

$(function(){
    $("a.open").click(function(){
        $.sound.play("xbox360score.mp3");
        $("#floatWindow").fadeIn("fast");
        return false;
    })
    $("#floatWindow").click(function(){
        $("#floatWindow").fadeOut("fast");
        return false;
    })
})

かなり単純なことがわかると思います。ほぼ参考サイトの丸写し…
openというclassのaタグクリックしたらidがfloatWindowのdivをフェードインで見せるよ！そんで、floatWindowをクリックすると消えるよ！っていう命令です。

htmlは

<div id='floatWindow'><div class='inner'>
<img src='xboxlogo.gif'><div class='unlock'>
実績のロックが解除されました<p>実績項目
</div></div></div>

な感じ。

#floatWindow{
    display:none;
    position:absolute;
    bottom:50px;
    left:100px;
    width:600px;
    height:80px;
}
//以下略

さて、これをどうやったらjQueryプラグインにできるのか？
cssは置いておくとして、動きだけでもできるようにしよう。

参考にさせていただいた

HugeDomains.com - Shop for over 300,000 Premium Domains

面倒くさいので、一気にプラグインの中身を公開します。
後々配布予定なんであくまで参考程度に。

(function($){
    $.fn.xboxunlock = function(options) {
	
		var flag = false;
		
		var sHtml = "";
		sHtml  += "<div id='xbox_floatWindow'>";
		sHtml  += "<img src='xboxlogo.gif'><div class='unlock'>";
		sHtml  += "実績のロックが解除されました<p>実績項目</p>";
		sHtml  += "</div></div>";
		
        // 初期値を設定
        var defaults = {
            'item'    : 'ここに実績項目が入ります'
        };

        // オプションの初期値を設定
        var setting = $.extend(defaults, options);

        // プラグインで使用するメソッド
        var method = function() {
            // 処理を書く
		if(flag == false){
			
		$("body").append(sHtml);
        
		$("#xbox_floatWindow p").html(setting.item);
        $("#xbox_floatWindow").fadeIn("fast",function(){
		$.sound.play("xbox360score.mp3");
		});	
		
		flag = true;
        return false;
		
		}else{
		

        $("#xbox_floatWindow").fadeOut("fast",function(){
		$("#xbox_floatWindow").remove();
		});		

		flag = false;
        return false;

		}

        };

        // セレクタで指定した要素を処理
        this.each(function() {
            $(this).click(method);
        });

        // メソッドチェーン用
        return this;
    };
})(jQuery);

解説後回しにして。
使い方はjavascript

$(function(){
$("a.trigger").xboxunlock({item:"実績の項目"});
});

これでtriggerクラスのaタグをクリックすると簡単に実績表示ができるわけです。
今までは表示のタグもわざわざhtmlで用意していましたが、プラグイン内に書いたことで煩雑さを防ぎました。（sHtmlのところ）
前まではfloatWindowをクリックすると消えましたが再度対象リンクをクリックすることで消えるようにしています（腕が未熟で消せなかったw）
それを判断しているのが変数flagで、表示を消すときに追加したhtmlも同時に削除（$("#xbox_floatWindow").remove();）
しているのがわかると思います。

なお、このプラグインはjqueryと音をだすためのライブラリsound.js、表示のための所定のCSSが必須です。
実際に使っているものとは多少違いがありますのであしからず。

ブログパーツは今週中に公開したいですねー。