FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

感動しました。jQuery

たまには、今やっているコーディングってやつを

テーマに書いてみます。

一昨日、とあるサイトをみて、

「このサイトの動きっていいなぁ、すごいなぁ!」と思い、

そのページのソースを見ていたら、

いままで、見たことがない羅列を発見!!!

<中略>
menu = parseInt($(name).css("top").substring(0.$(name).css("top").indexOf("px")))
<中略>

ん?なんだこりゃ?

スクリプトタグに囲まれているから、javascriptなのか?と思い、

javascriptのリファレンス(辞書みたいなもんです)で急いで調べてみても、

単体の意味はわかるが、

全体が何を意味しているのか、まったくわからん・・・・・。

なんだこの書き方????
うちのニャン6
う~~~~~~~~~~~んとパソコンの前で悩み

ネットで調べまくっていたら、

発見しました。jQuery!!


このjQueryってjavascriptの拡張ライブラリって”す・ご・い・で・す・ね・!!”
(なにをいまさらっていう、Webデザイナの皆様。いいプラグインがあったら教えてください)

超・超簡単にページに動きをつけられるじゃ、あ~りませんか。

とりあえず簡単なサンプルを作ってみました。
ここをクリックでサンプル実行できます。

このソースを従来の?方法で書いてみると、
(私だけ~~ってだいたひかるって、今どうしてらっしゃる?)


fadeOpacity("my",-1); //フェードイン
 fadeOpacity("my",1); //フェードアウト

function fadeOpacity(id,swt,callback){
if(!window.fadeOpacity[id])fadeOpacity[id] = 0;
var fd = (swt == 1)?"0123456789":"9876543210"

・・・・・・
   ・・・・・・・・・・・・・・・・・

こんな感じの羅列が20行ほど続きます。

それが、jQueryだと、

$(#"my")
.fadeIn(3000)
.animate({width:300},3000)
.animate({height:500},5000)
.fadeOut(3000)>

こんだけ!!!!!!!

いままで、「この動きはどうやって表現したらいいんだ?」と考えていた自分は何なんでしょう?

これだけでこんなにも、リッチな(高機能なってことです)ものができるとは!!!。
ニャンおどろく
うちのニャンもびっくり!!!

今回、劇的な発見をしたところで、jQueryについて学ぶために買った本がこちら
jQuery入門―魔法のJavaScriptリファレンス&サンプルjQuery入門―魔法のJavaScriptリファレンス&サンプル
(2009/11)
高橋 登史朗

商品詳細を見る


この本は、関数のリファレンスが主なので、HTMLやCSSについてこれからという人には、
jQuery+JavaScript実践リファレンス―Webデザインを強化するためのjQuery+JavaScript実践リファレンス―Webデザインを強化するための
(2009/04)
葛西 秋雄

商品詳細を見る
jQueryで作る AjaxアプリケーションjQueryで作る Ajaxアプリケーション
(2008/06/19)
沖林 正紀

商品詳細を見る


これらの本に、HTMLやCSSの
ホームページ辞典 第4版ホームページ辞典 第4版
(2008/01/29)
株式会社アンク

商品詳細を見る


この辺があれば良いかと思います。

このプログでjQueryをつかうことができるかどうかは、いまだわかりませんが、

ほかでページを作っている方で、

「ページデザインなんて時間かかるだけだよ」

という方、一度お試しあれ、見栄えが劇的に変わりますよ。

しかも、短時間で!!!!

ねっWebデザイナさん。



スポンサーサイト

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック

http://benrinyan.blog122.fc2.com/tb.php/9-4e62978d

 | HOME | 

猫のブログ満載!「ねこのきもちweb」

Appendix

iwanyan

iwanyan

ネコとPCがすきな便利屋です。
その日に感じたことをジャンル問わず書いてます

Calendar

« | 2018-09 | »
S M T W T F S
- - - - - - 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 - - - - - -

Categories

Recent Entries

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。