rollover.js作ってみた

そろそろサイコロふるのが怖くなりそうなKameです。

qripttypeを作っていこうと思いましたが、色々と相談して決めなきゃいけないこともあるので、
まずはAraiさん同様オレオレライブラリを作ってしまおうと思いました。その第1弾です。

第1弾はこれまたAraiさん同様にimage rolloverを作ってみました(未完成)。

目指す形

ロールオーバーのスクリプトは結構探せばゴロゴロと出てきてあまり作る必要もないかなとも思ったのですが、
ロールオーバーの動きは考えてみれば結構あるもんだなと思った次第です。

  • tabのナビゲーション部分
  • accordionのナビゲーション部分

などなどリンクのナビゲーション以外にも他のスクリプトを絡めた部分でも用途がありそうです。
かと言って上記に挙げた部分で通常のロールオーバーを使ってしまいますと、
アクティブになっているナビゲーションは画像反転したままにならないし、結局ホバーの動きにしか対応出来ない!みたいなことになってしまいます。

なので作るスクリプトの目指す形としてはあらゆる場合を想定して・・・

  • 画像を変更/画像を元に戻す の操作を分断
  • 反転状態を維持できるように
  • 上記で反転状態を維持する場合、「_on」以外の接尾辞が指定できるように
  • 他のスクリプトからはメソッド叩くだけで利用可能

みたいな感じが理想的だと思いました。

作ったやつ

まだ反転維持状態「_on」以外の画像指定が実装できていない状態ですが、作ってみたのがこれです。

(function($){
	// document ready
	$(function(){
		$('img.rollover').rollover({
			'keep':{
				suffix:'_cr' // これはまだ
			}
		});
	});
	
	$.RollOver = function(_this,options){
		this.$elem = $(_this);
		this.setting = $.extend({
			'suffix':'_on',
			'keep':false
		},options);
		this.init();
	};
	
	$.RollOver.prototype = {
		init:function(){
			var self = this;
			this._src = this.$elem.attr('src');
			this._srcRo = this._src.replace(/\./,self.setting.suffix+'.');
			if(this._src.match(/\_on\./)){
				this._srcRo = this._src;
				this._src = this._src.replace(self.setting.suffix+/\./,'.');
			};
			this.preload();
			this.act();
		},
		preload:function(){
			var self = this;
			$('<img />').attr('src',self._srcRo);
		},
		act:function(){
			var self = this;
			if(!self.setting.keep){
				this.$elem.hover(function(){
					self.over();
				},function(){
					self.out();
				});
			}else{
				self.over();
			};
		},
		over:function(){
			var self = this;
			this.$elem.attr('src',self._srcRo);
		},
		out:function(){
			var self = this;
			this.$elem.attr('src',self._src);
		}
	};
	
	$.fn.rollover = function(options){
		this.each(function(){
			return new $.RollOver(this,options);
		});
	};
})(jQuery);

Optionで「_on」が気に入らない場合は変更できるのと、keepをtureにすれば反転した状態で保ってくれます。
一応「over」と「out」の関数で反転/戻すを分断することに成功しています。

しかしながらここまで書いて思ったのが、ロールオーバだけで長くないかなーということです・・・。

こういう書き方しかできないのでいつも同じような書き方になってしまう・・・。
yuga.js見てると発狂しそうになりますね。

JSもストクロも壁を打ち壊さねば・・・