5509

超シンプルなjQueryのイメージビューアプラグイン m5ImageViewer

色々オプション付けてもいいけど、とりあえず公開時は全部とったろーと思いまして。最小構成のイメージビューアなjQueryプラグインです。その場でチラッと見せたいときに使えるかも。

高機能なやつは探せばいくらでも出ると思うので、たくさん機能ほしい人はそっち使えばいいと思います。

サンプル

Read more

jQueryのセレクタを自作して遊ぶ

jQuery("div:unkomorimori").css("background", "#89640d");

「:unkomorimori」っていうセレクタを作ってみようっていうそういう話です。簡単です。まあunkomorimoriなんてふざけたセレクタなんで、きっと中身はunkoでいっぱいなんでしょう。

結局やってることってfilterと同じような感じなんですけど

  

うんこうんこうんこうんこうんこうんこ

  

うんこ

  

うんこうんこ

  

うんこ

なんかうんこって書いてあるdivがたくさんありました、と。後から気づいたんですけど、これdiv要らないですね。pだけでいい・・・でJSとしてはセレクタの記述をのぞけば

jQuery("div:unkomorimori").css("background", "#89640d");

これだけです。:unkomorimoriの基準は対象要素内で「うんこ」が3回以上出てくるかどうかです。出てきた要素だけを返します。ちなみにfilterでやった場合はこんな感じ。

カスタムセレクタを使う利点は、何回も同じfilter書くときとか、めんどいんでじゃあセレクタでやりましょうか、ってなる感じですね。気をつけないといけないのは、今回の書き方は全てのdiv要素の中身を文字列で取得した上で、正規表現使って「うんこ」を探してるんですけど、処理的にはうんこだけにくそ重いっていう点ですね。うまく落ちたところで、あ、うんこだけに落ちたところで、この辺で。

【必要なかった】動的に読み込んだ画像の高さ・幅が取得できるタイミングでコールバックを実行するm5ImgLoad

追記:うーん、なんか色々あかんっぽい。わかる人以外はとりあえず放置してくださいーそもそも必要なかった感じでした

$("").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

とかやると高さと幅を取得できたりできなかったりするので、.load()に置き換わるようなやつ書いといた。単純に置き換えるだけ使えるはずーだめだった

$("").m5ImgLoad(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

結局のところ、.load()メソッドで取れてた

$("").load(function() {
  alert("width: " + $(this).width() + "\nheight: " + $(this).height());
});

↑これみたいに、width()、height()メソッドを使うと動的に呼び出した画像に対しては0で返されるので、、、

$("").load(function() {
  alert("width: " + $(this).attr("width") + "\nheight: " + $(this).attr("height"));
});

↑画像の属性から取ればいける感じです。これはどんな場合でもいけるんかなぁー

動作サンプル

サンプル
左のボタンはただの.load()メソッドでこれだと高さと幅が取れないけど、右の.m5ImgLoad()メソッドを使えば高さと幅がとれとりますね

img.completeを使ってみたっすよ。

ダウンロードとか

ダウンロードとかソースコードはgithubからどぞー

https://github.com/5509/m5ImgLoad

対応ブラウザ

クロスブラウザ的なのはどうでしょう。手元のIE6~8、Safari5、Fx3、Chrome9、Opera10は問題なかったけど・・・バグとかあったらフォークして教えてください^ω^

第5回リクリセミナー「明日からjQueryがもっと好きになる。」が開催されます

12月に出版された著書の西畑さん中村さんとセミナーを行います。お二人のお話が同時に聞けるセミナーはなかなかないので関西圏の方はぜひ参加を・・・!(僕のセッションはトイレ休憩に行くとか寝るなど有意義におすごしください)

冗談はさておき、僕のセッションではUIの設計からjQueryでの実装までをフローとコードで解説しようと思っています。対象は中級者くらいになると思いますが、なるべくわかりやすく説明しますので、よろしくお願いします :)

明日からjQueryがもっと好きになる。jQuery セミナー - 第5回リクリセミナー

<イベント名>
第5回リクリセミナー 『明日からjQueryがもっと好きになる。』
<日時>
2/20(日) 15:0018:00
<場所>
デジタルハリウッド大阪校 地下セミナールーム
(大阪市北区西天満6-5-17 デジタルエイトビル地下1F)
<参加費>
一般:4,000円
デジハリ生:無料(※学生証をお持ちください。)

※スポンサーの協賛、参加者の人数に応じてディスカウント予定です。
講師陣の書籍、『jQuery逆引きマニュアル』を持参し、受付で提示していただきますと500円割引をいたします。
※対象は一般の参加者のみとなります。

<定員>
80名
<参加方法>
セミナー特設ページから参加表明して下さい

URL:http://www.re-creators.jp/vol5/

<懇親会>
セミナー終了後、18:30から開催予定。

via: 2/20(日)第5回リクリセミナー「明日からjQueryがもっと好きになる。」参加受付開始!

jQuery逆引きマニュアルのモニターを募集しています

先日出版された「」ですが、出版元のインプレスジャパンさんで読者モニターを募集しています。
なんと書籍ではなく、PDFの電子書籍です。電子書籍は非売品なので、興味のある方はよければ応募してみてください :)

申し込みページ(申し込みは終了しました)

<モニター応募要項>
●応募受付期間:2010年12月28日(火)~2011年1月11日(火)
●募集予定人数:最大30名(モニター事務局での選考とさせていただきます)
●応募方法:
最下部の「応募する」ボタンよりエントリーください。
モニター当選の方へは、応募受付終了後別途メールにて詳細をご連絡します。
●モニター実施予定期間:2011年1月14日(金)~2011年2月28日(月)(約1ヶ月間半)
●モニター品:『jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践』電子書籍版(PDF形式。本文のテキストコピー不可。サンプルコードはネット上で公開中 http://www.impressjapan.jp/support/aftercare/2961
●モニター期間中のお願い:
ブログやツイッターなどで以下のような感想・コメントを書いていただき、ぜひ読者の皆様でjQueryについての情報を共有しましょう!
◎本書のこの記事は試してみたい!
◎本書の内容をこんな風に試してみた
◎本書のこの記事は役に立ちそう
◎本書の内容をこんな風に応用した!
◎jQueryでこんなことがしたい!
◎jQueryでこんなことができた!
◎jQueryについてこんな新しい発見があった などなど
情報共有がスムーズに行えるように、本書専用のツイッターアカウントを設置しました。
ツイッターをご利用されている方は、ぜひこちらのアカウントのフォローをお願いいたします。
たくさんのご応募をお待ちしております!

Author

nori
nori
- UI Engineer
Location
- ,