Posts Tagged ‘ jquery ’

0
13
Jul

jQueryのlightboxプラグイン[2010.7.13 12:45追記]

lightboxのプラグイン。

jQuery lightBox plugin
http://leandrovieira.com/projects/jquery/lightbox/  

画像のtitleに入れた物がキャプションで表示できるけど、これを忘れるとFirefoxでCloseボタンを押すときに数pxずれる。

2010.7.13 12:45追記

とかいたらハムさんが教えてくれました。

@mersy そのCloseボタンを押すときに数pxずれ、aタグに付いているCSSを、その親要素に変更するとバグなくなるハズです。
http://twitter.com/h2ham/statuses/18402532797  

なるほどね。あとで試してみよっと。
ありがとうございます！！

1
10
Jul

変数にセットしてjsの無駄を減らす

どういうイベントで表示させるかは別の話なのでおいときますが、なんかのイベント時にメッセージをjsで表示させたいときに、という話。
表示させる場所はCSSで指定してるとして。

$("#hoge_btn").click(function(){      var Message="メッセージ";
Message=$('<div id="hogehoge">'+Message+'</div>');
$("body").append(Message);
Message.delay(1000).fadeOut(500,function(){
Message.remove();
});
});

まぁ、↑のこんな感じでかくのがとりあえずのゴールだとします。

jQuery(function($){
$("#hoge_btn").click(function(){$("body").append('<div id="hogehoge">めっせーじ</div>');
$("#hogehoge").delay(1000).fadeOut(500);
});
});

なにも考えずに↑のかんじで書くと最初はいいけど２回目クリックすると#hogehogeが複数存在してるのでうまいこと消えません。fadeOutはOpacityをいじるだけなので、要素自体は無くなりません。

んじゃということで。

$("#hoge_btn").click(function(){$("body").append('<div id="hogehoge">メッセージ</div>');
$("#hogehoge").delay(1000).fadeOut(500,function(){
$(this).remove();
});
});

こんな感じで書いてみます。まぁ、とりあえずの問題は解決します。でもこれではまだまだムダが多いとのこと。

$("#hoge_btn").click(function(){
var Message =$('<div id="hogehoge"> メッセージ </div>');$("body").append(Message);
Message.delay(1000).fadeOut(500,function(){
Message.remove();
});
});

こんなかんじで表示させる部分ごと変数に入れてしまえば無駄を減らすことが出来ます。
appendのところがちょっと理解不足かもな。
とはいえまだ無駄があるらしいのでそれはまたオイオイつぶすとします。。。。

rewさんを始め、noriさん、tinybeansさん、hogenishiさんに教えてもらいました。
いつもありがとうございます＞＜

1
8
Apr

jQueryを1から勉強し直すvol2「セレクタあれこれ」

もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）：第2回　楽にリストをストライプ模様にする｜gihyo.jp … 技術評論社
http://gihyo.jp/design/serial/01/jquery-site-production/0002  

忘れそうなのでメモ。

要素の数え方。最初は0番目となります。:oddや:evenもその0番目から考えての偶数奇数

:nth-child(odd)や:nth-child(even)も偶数番目と奇数番目を選択するのですが，最初が1となるため，:oddや:even なども選択される位置が逆になる

わすれて勘違いしそうだ。

サイト内リンクかどうかの判定方法。

$(’a[href^="http://"]:not(a[href^="http://site.domain"])’)

あぁ、なるほどね。

var domain = location.href.match(/^https?(:\/\/[a-zA-Z0-9.]+)\//i)[1];
$(’a[href^=http]‘).not(’[href*="'+domain+'"]‘)

と書くよりは手軽かな。使い回すかどうかとかもあるか。

Web制作の現場で使う jQueryデザイン入門
Web制作の現場で使う jQueryデザイン入門
西畑 一馬
アスキー・メディアワークス ( 2010-02-12 )
ISBN: 9784048684118
おすすめ度:アマゾンおすすめ度

を読み始めてみて普段あんまり使ってない物がぽつぽつとでてるなぁ。。。。。

0
6
Apr

jQueryを1から勉強し直すvol3「not()をうまいこと使ってアコーディオン」

もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）：第3回　アコーディオンパネルの実装｜gihyo.jp … 技術評論社
http://gihyo.jp/design/serial/01/jquery-site-production/0003  

Firebugのconsoleに出すサンプルソース

$(function(){
$('#sample1').click(function(){
console.log($(this).text());
});
});

表示／非表示のサンプル

$('dt','#sample2').click(function(){
var next = $(this).next();
if(next.is(':visible')){
next.hide();
}else{
next.show();
}
});

表示されてればnextは非表示に。表示されてなければ表示させる。

is()

is(expr) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/traversing/is/expr/

状態に応じて。

簡単なアニメーション。

slideUp(),slideDown() を指定することで可能。

slideUp([speed], [callback]) - jQuery 日本語リファレンスhttp://semooh.jp/jquery/api/effects/slideUp/%5Bspeed%5D%2C+%5Bcallback%5D/

slideDown([speed], [callback]) - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/effects/slideDown/%5Bspeed%5D%2C+%5Bcallback%5D/ 

$('dt','#sample3').click(function(){
var next = $(this).next();
if(next.is(':visible')){
next.slideUp();
}else{
next.slideDown();
}
});


http://gihyo.jp/design/serial/01/jquery-site-production/0003  

速度も指定可能。

not()

notメソッドは対象の要素群から条件に一致しないものを省いた状態で要素を返します。

http://gihyo.jp/design/serial/01/jquery-site-production/0003  

なるほど。

ddは変数であることに注意。勘違いしないように。

var dd = $('dd','#sample3');
dd.hide();

http://gihyo.jp/design/serial/01/jquery-site-production/0003  

nextも同様に変数。勘違いしないように。

var next = $(this).next();
dd.not(next).slideUp();

http://gihyo.jp/design/serial/01/jquery-site-production/0003  

not()を組みあわせることで、クリックした物をはずして非表示（slideUp）させる、という流れ。
納得。

1
6
Apr

jQueryを1から勉強し直す（ハムさん、noriさん連載vol1を見直す）

ようやっと緑本（と勝手に呼んでる）を読み終わった。1月の予定だった気がするけど。。。。
JavaScriptの本の中ではすごくいい本でした。最初からちゃんと読んでおくべきだった、、。
このきっかけをくれたハムさん、noriさんには感謝感謝です。
ということで、そんなハムさん、noriさんの連載を改めて最初から見直して勉強し直そうと思うわけです。

もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）：第1回　jQueryにふれる｜gihyo.jp … 技術評論社
http://gihyo.jp/design/serial/01/jquery-site-production/0001   

containsはつかったことがないな。

contains(”文字”)

セレクタの属性とかあんま使ってないのでメモ。

「^=」属性値のはじめに一致
「=」属性値の一致
「!=」属性値の不一致
「$=」属性値の最後に一致
「*=」属性値に含まれている