まあ見ての通りなんですが、

Magic Mouseの底のフタが約4gもあるという事実を確認。
ということで即行で外しました。

軽くなる上に電池の入れ換えも楽だし、いいことずくめ。

使っていて電池が落ちてくるようなこともないので
とっとと外してしまいましょう。w

このシリーズだとアクセス数がめっきり減るけどめげないで続けてみる。

前回登場のanimateを使って、
ページ内リンクでの移動をアニメーションでやってみる。
これよくあるよね。


この程度ならプラグインを使わなくても
そこそこ簡単にjQueryのメソッドだけで実装出来るのだ。
自力で書いてみてこそオトコというものだ。


まずはサンプル ※詳しくはソース見て

サンプル1

これは、リンク先のターゲットと
クリックイベント用のクラスを手動で指定してます。


面倒なのでこんな風に変えて見た。

$(‘a[href*=#]‘).click(function(){

として、#◎◎となっているリンクエレメントを
まとめてクリック判別出来るように記述

var targetTo = $(this.hash);
var targetOffset = targetTo.offset().top;

クリックされたリンク先のハッシュを抜き出して、移動先の位置を取得。


せっかくなので、これも前回登場のeasingプラグインを使って
派手な動きをしてみたサンプル。

サンプル2

シンプルだけど、なかなか面白い。

そろそろ本題(非同期通信）に入ってみたいと思いつつ、いつまで続くこのシリーズ。

jQueryで遊んでみるシリーズ

だらだらと続いているこのシリーズ
ほとんど覚え書き状態になりつつあるけど気にせず突き進むのだ。

Lightbox系のエフェクトが当たり前に使われてて
jQueryのライブラリもたくさん出てる。

こういったエフェクトは、基本的にcssとanimateの組み合わせでできてる。
ということで、jQueryでできるアニメーションの基本部分を見てみたい。

まずはサンプル　

サンプル1

$(this).animate({最終形態のCSS},実行スピード);
こんな感じでアニメーションが簡単に作れる。

サンプル2

toggleを使って、最初のクリックと次のクリックで違う動作を割り当てて
ちゃんと元に戻るように指定。

サンプル3

easingプラグインを使って、加速減速効果を追加してみる。

$(this).animate({最終形態のCSS},実行スピード,easing名);
※easing名を第3引数に追加。

jQuery Easing Plugin

easingプラグイン効果一覧

jQuery Easing

詳しくはサンプルのソースを見て！
あとは工夫次第でいろいろなんとでもできる。

という投げやりなエントリですまぬ。

いつまでつづくこのシリーズ..

jQueryで動的にCSSを割り当てられるのでやってみた。

サンプル→

サンプルのソースはこんなふう

<script type="text/javascript">
 
$(function(){
 
	//初期状態
	$(".camcam").css({
	backgroundColor:"red",
	width:"200px",
	fontSize:"20px"
	});
 
	//ロールオーバー
    $(".camcam").mouseover(function() {
       $(this).css({backgroundColor:"#00ff00"});
	});
 
	//ロールアウト
    $(".camcam").mouseout(function() {
  	  $(this).css({backgroundColor:"red"});
	});
 
});
 
</script>

←その2
jQueryには、いろんなエフェクトが用意されてるので
とやかく考えないでビシバシ使ってみる。

まずはサンプル。

【フェード】←マウスをあわせてみて

適当に画像とテキストを用意してそれぞれidを割り当てる
<p id="fade">【フェード】←マウスをあわせてみて</p>
<img src="1.png"  id="photo" />

<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
 
$(function(){
 
//フェードアウト
    $("#fade").mouseover(function() {
    $("#photo").fadeOut("slow");
    });
 
//フェードイン
    $("#fade").mouseout(function() {
    $("#photo").fadeIn("slow");
    });
});
 
</script>

Effects – jQuery 日本語リファレンス

なんか説明がおおざっぱだけど、ニュアンスでご理解いただきたい(汗

つづく…

今日みたいな爽やかな春の日は、jQueryリファレンスを読みながら
ふっと物思いにふけりたくなりますよね。


（ならねーよ！と言う心のツッコミありがとうございます）


そんなわけでjQueryの非同期通信について書いてみたい。
核心に入る前にまずはjQueryの基本的な解説でもしてみよう。

jQueryはスタイルシートっぽいのだ。
jQueryでのHTMLエレメントの参照はこんなふう。

<div id="camcam">CamCam</div>
だと
$("#camcam")
 
<div class="camcam">CamCam</div>
だと
$(".camcam")
 
HTMLタグの参照は
<form></form>
だと
$("form")

<div id="camcam">CamCam</div>
 
が、クリックされた時アラートを出せ！と言う場合は
 
$("#camcam").click(function() {
	alert("くりっくすんじゃねぇ〜");
}
 
という風になります。

PHPで、HTMLソースから
特定の範囲を抜き出して処理するなんてことが結構あります。（ないか…

tableのセルを抜き出してCSV形式に直すみたいな例

$table=<<<__HTML
<table>
<tr><td>あああ</td><td>いいい</td></tr>
<tr><td>ううう</td><td>えええ</td></tr>
</table>
__HTML;


//1行ごとに抜き出して配列$matchに代入
preg_match_all("/<tr>(.*?)<＜/tr>/",$table,$match);

//1行ごとにループ処理
foreach ( $match[1] as $tr_value ){

//さらに<td>ごとに抜き出す
preg_match_all("/<td>(.*?)<＜/td>/",$tr_value,$td_data);

//セルごとにカンマ区切りで文字列に
$sellData= join(",",$td_data[1]);

print $sellData."＜n";

}

結果
あああ,いいい
ううう,えええ

元ソースの書き方によっては正規表現の部分を変えて下さい。

覚え書きブログになりつつある今日この頃…