かなり使いやすく、自由度も高いツールチップ系jQuery プラグイン qTip 。
ちょっと前からそこかしこで紹介されているので使い方云々は割愛しつつ、うっかり jQuery の 1.4.2 で使おうとしててドハマり。
jQuery1.4.2 環境下だと、Win の IE（6,7,8）で " tip " が表示されません。推奨の 1.3.2 と 1.4.2 との差異を掘って最適化する時間も精神的余裕もなく、設定方法をあれこれいじり倒して小1時間。そもそもアタマに「今、推奨の 1.3.2 を使っていない」という意識が無かったのが敗因。
大人しく推奨の 1.3.2 を使いましょう。
前エントリの jQuery.lightpop.js だと、Win の IE でうまく swf が表示されなかった...。
で、もういっちょたどり着いたのが prettyPhoto 。milkbox という mootools ベースのものもありましたが、これについては既に実装している jQuery と強烈にコンフリクト起こしたので断念。モノはよかったので惜しい。
まだ若干の微調整が必要なものの、やっとなんとかなりそう。
というか、こんなことで時間を浪費してる場合じゃ無いんだが...。
全部 IE のせい。誰か、IE を勝手に消去するウイルスを世界中にバラ撒かへんかな。
...に、swf を張り込みたくて深夜に死んでました。
巷には知らない間にたくさん派生プラグインが公開されていて、どれも一長一短。とりあえず、今動かしていた案件に於いては、ほとんどのプラグインが、すでに組み上げた css やら jQuery とコンフリクトを起こして参った。
そんな中、あきらめかけた頃に発見した jQuery.lightpop.js というプラグインはなかなか僕のニーズにマッチしてくれました。セッティングも簡素でソースコードも分かりやすかったので、ひとまず機能面の取捨選択、カスタマイズが簡単に出来た。
（今回はとにかく swf にスムーズにリンクできるものを探してましたが、他にもリンク可能なメディアも多くて設置方法も簡単）
Bumpbox もなかなか派手で（笑）面白かったですが、構造を掘る時間がなくてカスタマイズに難あり、とりあえず保留。
理想的だった某方法は、使用する jQuery のバージョンを下げねばならない、という痛恨の方法だった。これで２時間無駄にした...。そしてもう朝。
2009年も数多の素晴らしいWebサイトが出現して、それらを見るたびに、自分もまだまだ目指す頂は遠く、頑張らねばならないことだらけだ、と戒めるわけですが、Flash によるテクニックや、jQuery の目新しい活用法などはさておき、個人的に一番グッときたのが、冒頭のキャプチャにある株式会社島井不動産さんのサイトです（ by 5ive さん）。
最初は、すっきりしてきれいなデザインだなぁ～、と思いながら拝見してたんですが、文字組みの整然さに気づき、ソースを覗かせてもらって、目から鱗でした。
10年ほど前の、世の中の猛者たちが群雄割拠して、まだまだ技術的なセオリーや定番化したテクニック、みたいなものが固まりきっていなかった頃は、『 なるほどそう来たか！ 』という感動がそこかしこにありました。
久しく感じていなかった感動が、このサイトの文字組みにありました（大袈裟 !?ｗ）。
CSS の達者な人たちにとっては、すでに定番な組み方なんでしょうか。不勉強だった僕にとってはまさに『 なるほど！ 』でした。
******* 追記 *******
このエントリを書くにあたって、再度しっかりと（拝見した当時は激務で荒い見方してました）隅々まで拝見しましたが、感動した文字組部分には、jQuery のプラグインが活用されていたんですね！
なんだか結局 jQuery プラグインが感動した、て話にすり替わったようなエントリになってしまってますが決してそんな意図はないことを付け加えておきます。島井不動産さんのサイトが気づかせてくれたことは大切なことだったし、きっちりそういうプラグインの存在も熟知しつつデザインに取り入れているところなど、見習うところの多いサイトだ、という認識はまったく変わってません。
（なんか言い訳がましくなって泣けてきた（反省））
いいのが思いつかなかったので適当なエントリタイトルですが、Firefox で html に embed した swf を読んだとき、そのswf の stage.stageWidth や stage.stageHeight が正常に取得できてない時がちょこちょこありました。
その都度、変数宣言で直接 var sW:uint = 800、とかやっちゃってとりあえずその場を凌いでました。
で、さっき気がついたんですが、そう感じるときはいつも、先のエントリで雑感を述べた Center element plugin を使っている気がします。
ちょっと今検証する余裕がありませんが、おそらく embed した swf を囲っている <div> タグを、css でゴニョゴニョしているせいではないか、という仮説です。
同じ症状で悩んだ誰か、検証してくれないかなぁ。
ボックスを上下左右中央にセンタリングしてくれる Center element plugin ですが、一般的にこのプラグインって利用頻度どうなんでしょう？ 個人的には、センタリングしたい場面がたくさんあるので、こういったプラグインはもの凄く助かるんですが、もっと普及しているこの手のプラグインがあるんでしょうか？
というのも、これ Win IE でうまくいった記憶ないんですよね。画面のずいぶん左下にボックスが配置されたりとか、症状のすべてを把握はしてませんがとにかくセンタリングされない、という。
ググってみてもそんなこと言ってる記事見つからないしで、みんなはうまくいってるんだろうか？それとも他の何かを使って既に幸せなのか？とか勘ぐってます。
で、久々にセンタリングしたいコンテンツがあって、うまくセンタリングできないのも忘れてまた使ってみたんですが、今度はなんの苦もなくセンタリングされた。
しっかりとした検証はしてませんが、センタリングしたいボックスに " border " を設定するといいっぽいです。
ナビゲーション上で現在いるページを示すボタンにだけ、「今ココ」な装飾をつけたいときの処理。
最初ココをを見つけて、あーこれこれー、と軽い気持ちで利用しようとしたらなんかうまく行かない。ので、ちょっとアレンジ。
jQuery(document).ready(function() {
if(location.pathname != "/") {
var now = location.href.split('/');
var endDir = now.slice(now.length-2,now.length-1);
jQuery('ul#navigation li a[href$="'+endDir+'/"]').addClass('active');
}
});
少々回りくどいですが now にまず現在のURLを " / " ごとに分割した配列にして代入。でもってその配列の最後にくる文字列を endDir に保存。つまり今たとえば
http://www.hogehoge.com/hello/myname/
という URL のページにいるとすると、now には ' http:,,hogehoge.com,hello,myname ' という値が入ってて、その最後にある myname をendDir に保存してる。
でもって指定した<a>タグの href の文字列の末尾と照らし合わせて、マッチするかどうかの判定して、マッチしたら class="active" を追加という命令をしてるので、css で active 要素に対する処理を好きなようにかけばOK。
とりあえずメモ。
適当に整理すること ＞ 自分
ヘッダ
内容
ヘッダ
内容
ヘッダ
内容
jQuery UI - Configure your download ここ便利。
＊＊＊追記＊＊＊
アクセス当初は全部のアコーディオンが閉じられてる状態にしたいんですが、2つ目のブロックを開いた状態から1つ目のヘッダをクリックするとエラーが出ます。
なんでだー
＊＊＊さらに追記＊＊＊
原因判明。
jQuery UI - Configure your download 経由で最初からカスタマイズして利用するjQueryのセットは、従来の
みたく ui 群を読み込むんじゃなくて、用意された
を読み込むんですね。
要するにダウンロードしたフォルダの index.html にあるまま読み込めばいい、と。
余計なことをして時間を費やした感じ。
発想のメモ。
アコーディオンだスライドショーだとガチャガチャ動かせるのもいいけど、今日ちょっと見てた某海外サイトの構造を調べてて、jQueryってもっと多様な可能性があるんだな、と感動した次第。
例えばcssの『補助』としての実装とか。
実際こっちを突き詰める方がjQueryの恩恵を最大限受けられる気がした。
