ウェブル » jQuery http://kezy.org なかなか就職できない PHP + MySQL 時々 Javascript を弄る20才 Tue, 27 Jul 2010 02:39:42 +0000 ja hourly 1 http://wordpress.org/?v=3.0 jQuery で世界一簡単に画像を自動スライドすることができる simpleslide.js http://kezy.org/2010/07/22/jquery-simpleslide-js http://kezy.org/2010/07/22/jquery-simpleslide-js#comments Thu, 22 Jul 2010 14:03:52 +0000 Sorai http://kezy.org/?p=4254 ...続きを読む

]]> 本当にスライドだけがしたい場合の jQuery のコードを書いてみました。
ul と li で画像を並べるだけで、勝手にスライドが始まります。
simpleslide.js デモサイト

ただし、作った私は Javascript 初心者なのであしからず。

基本的な使い方

HTML の書き方

以下のようにスライドしたい画像を並べます。
CSS は必要ありません、きっと simpleslide.js が自動で設定してくれます。
id を slide にしておきますと、後々便利ですが、任意の名前でも結構です。

1
2
3
4
5

<ul id="slide">
	<li><img src="image_01.png"></li>
	<li><img src="image_02.png"></li>
	<li><img src="image_03.png"></li>
</ul>

JS の読み込み

simpleSlide() で起動します。 ページ末端に以下のようにコードを追加してください。
HTML の段階で、id 名に slide を設定した場合は simpleSlide() と空で OK です。

1
2

<script type='text/javascript' src='jquery.simpleslide.js'></script> 
<script type='text/javascript'>simpleSlide();</script>

※これだけで動かない場合は以下を読み進めてください…。

堅実な使い方

以上の手順だけで動くには動きますが、全自動すぎて不具合が発生することがありますので、以下の項目を設定することをおすすめします。

ID 名を指定する

HTML の段階で任意の id 名をいれた場合は、第1引数にあなたが設定した id 名を入れます。

1
2

<script type='text/javascript' src='jquery.simpleslide.js'></script> 
<script type='text/javascript'>simpleSlide('hoge');</script>

速度の設定

ちなみにスライドする速度を変更できます。
第2引数にミリ秒でスライドとスライドの間隔を入れます。

1
2

<script type='text/javascript' src='jquery.simpleslide.js'></script> 
<script type='text/javascript'>simpleSlide('hoge', 3000);</script>

枠のサイズ設定

さらに細かい設定ですが、横幅と高さを設定することができます。
要はフレーム枠のサイズです。

1
2

<script type='text/javascript' src='jquery.simpleslide.js'></script> 
<script type='text/javascript'>simpleSlide('hoge', 3000, 500, 300);</script>

第3引数が width、第4引数は height を設定します。
ここを設定しなければ、simpleslide.js が ul の初出の子要素のサイズを取得して、それを width と height として使用します。ですが、少し不調なので、挑戦者以外は設定してください。

ダウンロードはこちら： jquery.simpleslide.js (v1.0)

コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

jQuery.noConflict();
var j$ = jQuery;
 
function simpleSlide(myid, animateInterval, width, height) {
 
	if(typeof(myid) == "undefined") var myid = '#slide';
	var mylist = myid + ' > li';
 
	if(typeof(width) == "undefined") var width = j$(mylist + ':first-child').width();
	if(typeof(height) == "undefined") var height = j$(mylist + ':first-child').height();
 
	if(typeof(animateInterval) == "undefined") var animateInterval = 5000;
	var animeteTime = animateInterval / 5;
 
	j$(myid)
		.css('display', 'block')
		.css('position', 'relative')
		.css('width', width + 'px')
		.css('height', height + 'px')
		.css('overflow', 'hidden');
 
	j$(mylist).each(function(num) { 
		j$(this)
			.css('display', 'block')
			.css('position', 'absolute')
			.css('top', '0px')
			.css('left', (width*num) + 'px');
	});
 
	setInterval("slide('" + myid + "','" + mylist + "'," + width + "," + height + "," + animateInterval + "," + animeteTime + ")", animateInterval);
}
 
function slide(myid, mylist, width, height, animateInterval, animeteTime) {
 
	j$(myid).append(j$(mylist + ':first-child').clone());
	j$(mylist + ':last-child').css('left',(width * (j$(mylist).length - 1)) + 'px');
 
	j$(mylist).each(function(num) { 
		if(j$(mylist).length - 1 == num) {
			j$(this).animate({ left: '-=' + width + 'px' }, animeteTime, null, function() {
				j$(mylist + ':first-child').remove();
			});
		} else {
			j$(this).animate({ left: '-=' + width + 'px' }, animeteTime);
		}
	});
 
}
]]> http://kezy.org/2010/07/22/jquery-simpleslide-js/feed 0 jquery.pngFix.js で画像のサイズが大きくなるバグの解決方法 http://kezy.org/2010/03/30/jquery-pngfix-line-height http://kezy.org/2010/03/30/jquery-pngfix-line-height#comments Tue, 30 Mar 2010 03:02:34 +0000 Sorai http://kezy.org/?p=3934 ...続きを読む

]]> jquery.pngFix.js で以下のようにしてたら、突然画像が大きくなってボヤけてしまいました。

1
2
3
4
5
6
7

<script type="text/javascript" src="js/jquery.pngfix.js" charset="utf-8"></script>
<script type="text/javascript">
$(function($) {
	$("h3 > img").pngfix();
});
</script>
<h3><img src="images.png" width="66" height="18" /></h3>

実際に Javascript で書き換えられたソースを見てみましょう。

1

<span style='DISPLAY: inline-block; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="images.png"); WIDTH: 82px; LINE-HEIGHT: 0; HEIGHT: 18px' jQuery1269915814671="10"></span>

背景にして AlphaImageLoader 使ってたんですね。きっとこの中の CSS がしっかり効いていないのでしょうか。いろいろ探ってるうちに、line-height が効いていないことが分かりましたよ。

なので、span 要素に大して、再度 line-height をかけてあげましょう。

1
2
3

h3 span {
	line-height: 0!important;
}

以前作った人の css が何か悪いことをしているのでしょう。span 要素や div などに大して直に何か指定されていたのかな。何はともあれ、IE シリーズは困ったちゃんですね。IE 作った人も困ったちゃんです。

]]> http://kezy.org/2010/03/30/jquery-pngfix-line-height/feed 1 jQuery と prototype.js のコンフリクトを回避する方法 http://kezy.org/2009/11/01/jquery-prototype-conflict http://kezy.org/2009/11/01/jquery-prototype-conflict#comments Sat, 31 Oct 2009 15:22:21 +0000 Sorai http://kezy.org/?p=3211 ...続きを読む

]]> jQuery と prototype.js を同時に使うとコンフリクトを起こします。なぜなら、jQuery はprototype.js と同じく(正確には同じではないのですが) document.getElementById() のショートカットとして $() を使っているためです。
より正確な説明は以下のページが詳しいです。
prototype.jsとThickBox(jQuery)がコンフリクト｜blog｜たたみラボ

解決策としては、どちらか一方の $ function を別の文字に置き換えてしまえば良いかもしれないというわけで、今回は jQuery の $ function を j$ に変えてみましょう。

例えば以下のコードの場合。

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
	$("table").each(function(){
		$(this).find("tr:even").addClass("even");
	});
	$("tr").hover(
		function() {
			$(this).addClass("hover");
		},
		function() {
			$(this).removeClass("hover");
		}
	);
});

以下のように $ を j$ に置き換えることで解決できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var j$ = jQuery;
j$(function(){ 
	j$("table").each(function(){
		j$(this).find("tr:even").addClass("even");
	});
	j$("tr").hover(
		function() {
			j$(this).addClass("hover");
		},
		function() {
			j$(this).removeClass("hover");
		}
	);
});

確か j$ じゃなくても jQuery と書いても動くはずです。すいません、試してません。短いコードが好きかもなので。

]]> http://kezy.org/2009/11/01/jquery-prototype-conflict/feed 0 [jQuery] Table の偶数行の背景色を変更しオンマウスで行をマークする記述 http://kezy.org/2009/10/08/jquery-table-tr-mouse http://kezy.org/2009/10/08/jquery-table-tr-mouse#comments Thu, 08 Oct 2009 10:00:43 +0000 Sorai http://kezy.org/?p=3026 ...続きを読む

]]> 探せばそこら中にあると思いますが、私も作ってみましたよ。
詳しい方書き方とか改行の位置とか問題ないかアドバイス頂けたら幸いです。

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
	$("table").each(function(){
		$(this).find("tr:even").addClass("even");
	});
	$("tr").hover(
		function() {
			$(this).addClass("hover");
		},
		function() {
			$(this).removeClass("hover");
		}
	);
});

修正(2009/10/8): 1行目を改良しました。

$(document).ready(function()は
$(function()に略せますよ～（内容は全く同じ）。

ありがとうございます！ということで、さっそく修正しました。

実行結果

このソースを実行するとテーブルがこんな風になります。

No Type A Type B Type C Type D
1 A B C D
2 E F G H
3 J K N M
4 L O P Q

コードの解説

1行目

最初に起動しますよーって奴です。これで良いのでしょうか。この段階でまだまだ勉強が足りませんね。

2行目から4行目

ページ内の table の tr の偶数行に class=”even” を設定します。これにより、CSS で .even に対して背景色を設定しておけば楽しいことになりますよ。

5行目~12行目

マウスオーバーで class=”hover” を追加します。CSS で .hover に変化を書いておけば、マウスオーバーでその行をマークできます。ちなみにマウスアウトをするとさ、class=”hover” を削除します。

まとめ

こんな感じですね。

何でもかんでもプラグインを使わなくても、こんな感じで自分で作っていった方が勉強にもなるし、後で融通が聞きます。ちなみにこのソース light box 2 と併用できない ( prottype.js 使ってるからね) みたいなので、light box 2 みたいなのを自分で作る必要がありそうです。

ちなみに本当は縦にもいろいろ小細工したいんですが、元々他のことやってて脱線してここまで来ちゃったんで、早く本来の目的を達成しなければいけないので、今日はこの辺りで。

]]> http://kezy.org/2009/10/08/jquery-table-tr-mouse/feed 2 jQuery に完全にハマりました。PHP が使えるなら jQuery はもっと面白くなります http://kezy.org/2009/09/19/about-jquery http://kezy.org/2009/09/19/about-jquery#comments Sat, 19 Sep 2009 08:29:23 +0000 Sorai http://kezy.org/?p=2812 ...続きを読む

]]> 最近 EC サイトの制作をしておりまして、商品の追加の際にページ全部を読み込み直すのはサーバーにも負荷がかかるし、利用者もストレスがかかると思ったので、部分的に Ajax で読み込んでしまおうと思って、prototype.js でやろうと思ったんですが、jQuery でもひょっとしてできるのかな？と思って調べてみたら、prototype.js より簡単にできるようで…。
Re：zapa氏 今更ですが、jQueryにはまりました*ホームページを作る人のネタ帳

なんか私の人生の転機になるような情報を、ネタ帳の人は流しているような気がします…(笑)

ほんで Javascript を前々からやってる人は以下の記事を読むと、jQuery がどれだけ凄いか分かります。
jQueryの魔法 – ［JavaScript］All About

jQuery のわくわく感を伝えてくれる記事はこれです。
ニュータイプなJSライブラリjQueryを使ってみよう！

んで今回使ったコードはこれだけです。

1

$("#load").load("load.php");

これだけで以下の場所に load.php が読み込めるんです。

1

<div id="load"></div>

読み込んだ load.php を更新したい場合は、もう一度先ほどの jQuery のコードを叩けば良いだけ。中で PHP でタイムスタンプを出力するコードでも書いて実行しまくれば凄さが分かります。

Cookie の書き換えはページを読み込んで何も出力してない状態でしか実行できないです。だから Javascript で書きこむんですが Cookie 書きこんでも一度出力してしまったページでは情報を反映できませんので、ページ全体をリロードさせるなどの対策を取らなければいけませんが、この jQuery を再度実行すればページを部分的に書き換えられますね。だから Cookie の内容を読み込んで DB にアクセスして情報を読み込んで表示させられますね。

まぁそんなこんなで jQuery にハマりだしたので、jQuery 関係の記事を書いていきたいと思います。

]]> http://kezy.org/2009/09/19/about-jquery/feed 0 Cookie を jQuery ならたった一行のコードで発行したり読み込んだりできる http://kezy.org/2009/09/19/cookie-jquery http://kezy.org/2009/09/19/cookie-jquery#comments Sat, 19 Sep 2009 05:16:52 +0000 Sorai http://kezy.org/?p=2813 ...続きを読む

]]> jQuery を使えば今まで Javascript で Cookie を焼いていて、現在の時間を取得して、期限を指定して…ってやってたのが笑えてくるほど簡単になります。

Cookie を焼く

もう、これだけです。

1

$.cookie('cookiename','value',{ expires: 7 });

cookiename

cookie の名前です。

value

焼く内容です。

expires: 7

有効期限7日ってことです。

Cookie を読み込む

1

$.cookie('cookiename')

これだけなんです。

ダウンロード

ちなみにこれを使うには以下が必要です。
jquery.js
jquery.cookie.js

jQuery.js に標準に入れても良いような気がするほど便利ですね。

]]> http://kezy.org/2009/09/19/cookie-jquery/feed 0