jQueryと再起関数でツリーメニュー

2009.11.17 火曜日

任意の数の多段に対応したツリーメニュー。
リクエストに、階層単位での処理(開く際に同階層の他のメニューを閉じる)があったんで再起関数を使ったんだけど、jQueryのセレクタでちょっと戸惑った。

再起で1階層づつ処理したかったんで、上手いことやる方法ないかと探してたんだけど、

parent > child 
(親子関係を指定して要素を選択する。)

これって、parentを省略して

$(">child", elem)

って書き方でいけるのね。メモメモ。

サンプル

サンプル

ソース

HTML

  1. <script language="javascript" type="text/javascript" src="jquery.js"></script>
  2. <script language="javascript" type="text/javascript" src="treeMenu.js"></script>
  3.  
  4. <ul id="sample01" class="sample_ul treeMenu">
  5.   <li><span>Menu1</span>
  6.     <ul>
  7.       <li><a href="#">Menu1.1</a></li>
  8.       <li><a href="#">Menu1.2</a></li>
  9.       <li><a href="#">Menu1.3</a></li>
  10.     </ul>
  11.   </li>
  12. </ul>

 
JS

Download: treeMenu.js
  1. $(document).ready(function(){
  2.     $(".treeMenu ul").hide();
  3.     $(".treeMenu").each(function(){
  4.         TM_init($(this));
  5.     });
  6.     function TM_init(elem, sp, so){
  7.         if (!sp) sp = 400;
  8.         if (!so) so = false;
  9.         $(">li:has(ul)", elem).each(function() {
  10.             var myTree = this;
  11.             $(">:first-child", myTree).click(function(e){
  12.                 var target = this;
  13.                 $(">li:has(ul)", elem).each(function(){
  14.                     if ($(">:first-child", this).get()[0] == target){
  15.                         $(">ul:first", this).slideToggle(sp);
  16.                     }else if (so == true){
  17.                         $(">ul:first", this).slideUp(sp);
  18.                     }
  19.                 });
  20.             });
  21.             TM_init($(">ul:first", myTree), sp, so);
  22.         });
  23.     }
  24. });

とりあえずデフォルト状態で、class=”treeMenu”と入っているエレメントに対して自動で設定されるようになってるけど、
速度と挙動(メニューを開いた際に同階層の他のメニューを閉じるか残すか)が変更出来るようにしてあるので、
3~5行目を編集して

//-- 速度と挙動を任意で指定
$
(".treeMenu").each(function(){
    
TM_init($(this), 300, true);
});

 

//-- IDを指定して個別設定
TM_init($("#sample01"));
TM_init($("#sample02"), 500, true);

といった感じでも。

時間もないのでとにかくシンプルにって感じで書いたんだけど、
メニューを開くトリガーに画像を使いたいって事だったので、開閉に応じた画像のスワップとかのリクエストもありそう。
コールバック関数とか渡せるようにしといたら便利になるかなぁ。

スムーススクロールのソースをメモっておこう。

2009.9.1 火曜日

よくあるヤツだけど、微妙な間隔でリクエストされて、なんか毎回書き起こしてる気がするのでメモ的に。
(ちゃんとソースを管理しておけと)

サンプル

jQueryと、jQuery.easingを使用。

jquery.js
jquery.easing.1.3.js
の2つと下記のスクリプトをロードして、
スクロールにしたいアンカーリンクにclass=”sScroll”の属性を付けておくだけ。

#で始まるリンクを自動で拾う、という形の物が多いけど、
アンカーリンクを全部スクロールにしたくない、とか、
他のスクリプトで使う為にダミーのアンカーリンクを多用してるとか(自分がよくやる)
そんなケースの事を考えて、”sScroll”というクラス名のついた<a>タグだけを対象にした。

IEだと、jQueryのoffset()の値がスクロール位置によって狂うので、IEの時はoffset()の値にスクロール位置を加算して補正。
(offset()って絶対位置を取るんじゃなかったっけ…?)
何故か、divタグに直接borderのスタイルを設定した場合のみ狂う模様?(IEのみ)
レアケースだと思うので上記補正は除去

Operaの場合、”html,body”をanimateすると表示がおかしくなるので、Operaの場合のみ”html”を指定。

jquery.easingでイージングを付けたりした時、ページのスクロール量が足りないと動きがおかしくなるので、
アンカー先のスクロール位置がページのスクロール量を超える場合は調整。

やっつけ感漂う気がするけどこんな感じですかねぇ。

Download: smoothScroll.js
  1. /*
  2. * jQuery SmoothScroll
  3. * Copyright (C) 2009 Hidemaro Mukai(http://www.maro-z.com).
  4. */
  5.  
  6. var span = 1000;
  7. var effect = 'easeOutExpo';
  8.  
  9. $(function() {
  10.     var ua = $.browser;
  11.     $("a.sScroll").click(function() {
  12.         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  13.             $(this).blur();
  14.             var t = navigator.appName.match(/Opera/) ? "html" : "html,body";
  15.             $(t).queue([]).stop();
  16.             var $targetElement = $(this.hash);
  17.             var scrollTo = $targetElement.offset().top;
  18.             if (window.scrollMaxY) {
  19.                 var maxScroll = window.scrollMaxY;
  20.             } else {
  21.                 var maxScroll = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  22.             }
  23.             if (scrollTo > maxScroll){
  24.                 scrollTo = maxScroll;
  25.             }
  26.             $(t).animate({ scrollTop: scrollTo }, span, effect);
  27.             return false;
  28.         }
  29.     });
  30. });

Windows7 RC 64bitにbblean1.1.7を(以下略

2009.5.30 土曜日

前回、bbleanの1.1.6をWindows7に入れて喜んでたけど、

maro-z.com » Windows7 RC 64bitにbblean1.1.6をインストール。

そういえば、1.1.6で安定利用してたから手を出さなかったけど、1.1.7もリリースされてたよなぁって思って、bbleanのサイトに行ってみた。

bblean06

あれ?

bblean07

64bit!?

こりゃ早速試さないと、と言うことでダウンロード。

今回はexeファイルになっていて、実行するとインストーラが起動する。楽だ。
いやまぁ、実際は、
以前は解凍してポンと置いて起動するだけだったから、逆に手数は増えてるんだけどもw

bblean08

bblean09

bblean10

bblean11

bblean12

bblean13

bblean14

あっさり動いた。

とりあえず、インストール直後はもの凄くドギツイ緑色のスキンになってたので、

bblean15

付属してたbbStyleMaker(デフォルトでメニューの中に入ってた)で、とりあえず見れる程度に、適当に色とか変更。

インストール(デフォルトのシェルに設定)も今回変わってて、

bblean16

設定するシェルが選べるようになってた。
1.1.6の時のように特別なことする必要もなく、普通に設定可能。

一個困ったことがあった。

bbleanは元々Windowsのデフォルトに比べてもかなり軽いシェルで、メモリ消費量も少ない方なんだけど、
「bbMemShrink」+「BroamTimer」というプラグインで、更に劇的にメモリの消費を減らせる。
だけど、どうやらそのプラグインのバージョンがずっと上がっていないようで、

bblean17

bblean18

動かなかった…。
会社のXPに入れた32bit版の1.1.7では動いたので、64bitに対応してないんだな。

プラグイン込みの1.1.6(32bitで動作)と、今回の1.1.7で、メモリの消費量を比べてみた。

bblean19

凄く差が付くなぁ…10倍近く違う。
てか、1.1.6が軽すぎるw
1M使ってないし……。

まぁ6Gも積んでおいて今更7~8M程度のメモリでどうこう言うのもなんだし、
10倍とは言えど、それでもWindowsの標準のシェルと比べたら雲泥の差。
折角64bitで動いてるんだからこっち使おうかな。

Windows7 RC 64bitにbblean1.1.6をインストール。

2009.5.30 土曜日

折角新しいOS入れたのに、ここんとこ忙しくてなかなか触ってられない…。

とりあえず、個人的には必須アイテムのbbleanをセットアップ。
VMwareを使って、32bit版のWindows7では動作を確認してたけど、64bitはどうだろう…?

とりあえず、XPの時に使ってた1.1.6をそのまま…。

bblean01

おー、動く。

そんな訳でインストールを試してみたけども、

bblean02

だめだった…。

そういや、Vistaの頃から、UACっていう厄介な物があったよなぁって思って、

bblean03

試しに、右クリックして「管理者として実行」で起動してからインストールを試してみた。

bblean04

いけた!!

だけど、ログオフ→ログオンしたら、標準のシェルに戻ってた…。

色々試してみたけど、どうやら、

bblean05

この、「全てのユーザのシェルを切り換えますか?」みたいな質問の所で、
「No」を選ばないといけないみたい。

とりあえずこれでインストールまで成功っす。
(「システムの復元」も切ってたので、もしこの手順でダメだったらそちらも関係するかも…?)

Windows7 RC 64bit版インストール

2009.5.25 月曜日

最近家のPCではあまり作業してないなーということで、
Win7のRC版でも試してみようか、と気軽な感じで。

丁度メモリ足したいとも思ってたところなので、折角だからメモリ増設して64bit版を入れることに。
1G+1G=2Gの状態に、2Gを2枚増設して、合計6G。
もう32bitには戻れなさそうな容量に。

Win7インストール中。
インストール中。

spec
インストールはあっさり完了。
RAMも6G認識してるし、
OS入れたばっかりの状態で
Geforce7900GS
SoundBlaster
Wacom Intuos3
もそれぞれドライバ食ってたみたいで、全部動作した。
いきなり最大解像度のデュアルスクリーンの状態で起動してくるから逆にビックリしたw

こりゃ下手にベンダー製のドライバ入れないほうが無難かなぁ、と思ってしばしそのまま使用。

score
スコアはこんな感じ。
悪くはなさそう。

ちょこっと触った感じ、シェルがゴテゴテしてて派手な割には、かなりサクサク動作する印象。

評判どおり?w
エクスプローラもちょっと賢くなってるし、検索とかの使い勝手も上昇してる。

まぁ、すぐにbbleanとX-Finderで置き換えちゃうだろうけど…。
VMwareで、32bit版のWindows7上でのbblean稼動&インストールと、X-Finderの稼動は確認済み。

さて…ここまでは順調だったんだけど…。

ちょこっと触って満足しちゃって、WindowsUpdateの再起動の際に触るのをいったん終了。
Ubuntu9.04の64bit版をデュアルブートで入れたら、
そっちが妙に気に入っちゃって、そっちばかり触ってたんだけど、

Win7に戻ってきたら、音が出なくなってる。
なんだか急にドライバ食わなくなった?WindowsUpdateのせい?
どうしようもなくなって、インストールCDとか持ってきたけど、対応してない。
creativeのサイトにも行ってみたけど、SoundBlaster5.1はVista以降ドライバのリリースがないらしく、
仕方なくXP版の最新を落としてきたけど、「64bitOSでは使えません」みたいなエラーが出る。

そして…今度は再起動後に急に画面の解像度が小さく…。
グラボのドライバも食わなくなったみたい…。

nVidiaのサイトに行ってドライバ検索してみると、こちらはWindows7-64bit版のドライバがもうリリースされてた。素敵。

nVidiaのドライバをインストール
→再起動
→解像度戻る。
→WindowsUpdate
→再起動
→解像度小さくなってる。(ドライバ無効になってる)

なんですか一体!w
デバイスマネージャーからドライバの更新をしたらとりあえず復活。

SoundBlaster5.1のほうはとりあえずお手上げかなぁ…。
オンボードのHDオーディオがBIOSで切ってある状態なので、そっち生き返らせればよさそうだけど、UbuntuではSB使えてるし、プラグ差し替えたくないなぁ。
もうちょっとあがいてみますか。

あと、時々ブルーバックが出たり、起動直後に強制再起動が入ったりしてたのが気になった。
ドライバをあれこれと非推奨っぽい作業やってる時だったから、そのせいだとは思うけど。

追記:2009/05/27
結局、Soundblaster5.1を外し、BIOSでオンボのHDオーディオを復活させました。
急に安定して、使い物になりそうな状態になってきたw