articles

2010 年 5 月 3 日

jQuery プラグイン修正版

CATEGORYjQuery   TAG 2:48 AM

前回のエントリーを修正しました。
というより前のがひどすぎました。

jQuery.fn.biyoon = function(scale,duration,easing){

		//var target = this;
		return this.each(function(){
			ini_width=jQuery(this).attr("width");
			ini_height=jQuery(this).attr("height");
			jQuery(this).data({"ini_width":ini_width,"ini_height":ini_height});
			jQuery(this).bind("mouseover",biyon).bind("mouseout",rbiyon);
		//return target;
		});
		
		//拡大
		function biyon(e){
			selector=e.target;
			after_width=selector.width*scale+"px";
			after_height=selector.height*scale+"px";
			$(selector).stop().animate({width:after_width,height:after_height},duration,easing);
		}
		
		//戻す
		function rbiyon(e){
			selector=$(e.target);
			selector.stop().animate({width:selector.data("ini_width"),height:selector.data("ini_height")},duration,easing);
		}
		
	};

2010 年 5 月 1 日

jQuery はじめてのjQueryプラグイン(駄作)

CATEGORYjQuery   2:51 AM

初めてのjQueryぷらぐいんです。しょぼー!
画像がびよーんってなります。
jquery.easing.jsが必要です。

2010.5.1 追記:
この内容、あまりにひどすぎたので修正版を次回エントリーに。
http://blog.macaroniworks.net/2010/05/jquery-プラグイン修正版/

jQuery.fn.biyoon = function(scale,duration,easing){

		var target = this;
		target.bind("mouseover",biyon).bind("mouseout",rbiyon);
		ini_width=target.attr("width");
		ini_height=target.attr("height");
		return target;
		
		function biyon(e){
			selector=e.target;
			after_width=selector.width*scale+"px";
			after_height=selector.height*scale+"px";
			       target.animate({width:after_width,height:after_height},duration,easing);
		}
		
		function rbiyon(e){
			target.animate({width:ini_width,height:ini_height},duration,easing);
		}
		
};

2010 年 4 月 22 日

jQuery 要素の高さを取得

CATEGORYCore   3:10 PM

http://www.atmarkit.co.jp/fdotnet/jqueryref/02attribute/attribute_14.html

要素の高さを取得するのは

height()、width()
innerHeight()、innerWidth()
outerHeight()、outerWidth()
outerHeight( true )、outerWidth( true )

があります。便利ですね。

それぞれ
・なにも含まない
・padding を含む
・border-width を含む
・margin を含む

となっていました。

2010 年 4 月 19 日

jQuery aのイベントでリンクさせない処理2

CATEGORYEventsjQuery   TAG 11:42 PM

参考
http://semooh.jp/jquery/cont/doc/event/

eventオブジェクト.preventDefault()でブラウザの初期アクションをキャンセルできるそうです。
前述のreturn falseの方がお手軽な気がします。
使いどころだと思います。

$("#test a").click(function (e) {
 e.preventDefault();
}

http://blog.macaroniworks.net/2010/03/jquery-aのイベントでリンクさせない処理/

2010 年 3 月 30 日

jQuery 知らなかった子要素の選択方法

CATEGORYEventsjQuerySelectors   TAG 6:44 PM

DesignReviver
http://designreviver.com/wp-content/uploads/2008/10/example.html

に下記の記述があったのですが、なにかよくわかりませんでした。

$("ul",this)

これは$(this)の中のul要素を選択する時などに使うと思われますが、
初めて見てしまいました。
知らないとはおっかないね。

2010 年 3 月 9 日

jQuery スライドショーでフェードイン、フェードアウト2010

CATEGORYjQuery   TAG 10:16 PM

前々からやってはいましたが、データの形式(配列からJSONに)とコールバックの仕方を変えてシンプルにしたので一応メモっておきます。
もちろんこれだけでは動かず一定間隔ごとにchange()関数を実行する必要があります。

ちなみにJSONは(JavaScript Object Notation)だそうです。


//初期フェーズ
slide_phase=-1;

//データ
pickup_data=new Array();
slide_data[0]={"href":"test_url1.html","comment":"テスト1","img_path":"1.jpg"};
slide_data[1]={"href":"test_url2.html","comment":"テスト2","img_path":"2.jpg"};
slide_data[2]={"href":"test_url3.html","comment":"テスト3","img_path":"3.jpg"};

slide_num=slide_data.length;

function change(){
	if(slide_phase < slide_num-1){
		slide_phase ++;
	}else{
		slide_phase =0;
	}
	$("#slide img").fadeOut(500,changeSrc);
	$("#slide a").attr("href",slide_data[slide_phase].href);
	$("#slide .comment").text(slide_data[slide_phase].comment);
}
//コールバック
// $(this)でイベントが発生したオブジェクトを受け取れる。
function changeSrc(){
	$(this).attr("src", slide_data[slide_phase].img_path).fadeIn(2500);
}

2010 年 3 月 4 日

jQuery oneで1回だけの処理

CATEGORYEventsjQuery   TAG 11:48 AM

これ知りませんでした。
用済みになると、普通にunbind()していました。

$(function(){
    $("a").one("click",function(){
       alert("もう出てきませんよ。");
    })
})

2010 年 3 月 1 日

jQuery aのイベントでリンクさせない処理

CATEGORYEventsjQuery   TAG 5:51 PM

aにclickなどのイベント処理をする場合、hrefのリンク先に飛んでしまうので
困っていました。

例えば、下の処理です。

$(function(){
    $("a").click(function(){
            $("#test_img").attr("src","test.jpg");
    })
})

このような時は関数の返り値をfalseにしてやることで
aがリンクするのを回避する事が出来るそうです。

$(function(){
    $("a").click(function(){
            $("#test_img").attr("src","test.jpg");
            return false;
    })
})

これ、もっと早く知っておきたかったです。