top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1278

jQuery アコーディオンメニュー:Drupal でjQuery利用したアコーディオンメニューやろうとして1日費やす。何やってんだか ・・・ 【今日のDrupal、そして jQuery】

 2010-02-23
 Drupalサイト構築。
 メニュー処理で、
  ・jQuery 利用させていただき
   ・アコーディオン型のメニューを実装したし

 簡単でしょ・・・と思ったら1日嵌る。
 原因は簡単なことだったんだけど・・・


 作業苦労を生かし、サンプルとしても
 用意しておきます。


  追記に  ▼


 ところで、こちらは・・・


◇今日のGoogle(2010/02/20)
今日のGoogle(2010/02/20)
 ※バンクーバー2010
※葛西、残念でしたね。
 明日は 真央ちゃんかぁ。

FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎  Drupal でjQuery・アコーディオンメニュー の巻
           :Drupalはどう?、そして jQuery

************************************************


 「アコーディオンメニュー
 有名なのは、
  あの Apple でしょうかね。

アップル - ダウンロード - Dashboard ウィジェット
アップル - ダウンロード - Dashboard ウィジェット Dashboardウィジェット
 で利用されてますね。

 ・・・親カテゴリに
    マウスオーバーすると
    子明細が開く。



 実現方法はいくつも、ざまざまなところで紹介されてます。


 ・Aplleのソースを見させていただくと
  "prototype.js" の文字がみえますねぇ。
  ・Apple は jQueryじゃないのかなぁ?
  ・アコーディオンメニューの位置には
  ・"drawers" というクラスが見えます。


 これについて解説している頁が、

Slide out and drawer effect
Slide out and drawer effect これ見ると、
 jQueryのようなんですがねぇ。
 まぁ。実現方法はくつもあるので。




 【トライ】
  ・今回は、構築中の Drupal サイトで実装するため
   いくつか特有の条件があります。


   ・Drupal のモジュールで、すでに
    Ajax.js および jQuery.js を 利用している。


 ■jQuery plugin: Accordion
  ※有名なのはこれですね。
   私も単独頁で利用したこともあり、これで
   問題ないだろう・・・と。


jQuery plugin: Accordion
jQuery plugin: Accordion ・jquery.dimensions.js
 ・jquery.accordion.js
  を利用します。

 ・・・ところがこれが
    うまくゆかない。
    ・マウスオーバーを認識してくれないんですねぇ。



 Drupal の場合、
 ・モジュールとして、Ajax.jsjQuery.js が用意されていて
  なんらかのコンフリクトがあるのか・・・


 手段が目的になってはやばいので、すかざす
 他の方法でアプローチ。
 ■ddaccordion.js


  ※これも有名ですね。

Apple style Accordion Menu
Apple style Accordion Menu まんま、Apple ですね。
 素晴らしい。

 ・・・ところがこれも!
    最初はうまくゆきませんでした。
    ・マウスオーバーを認識してくれない・・・。



 で。そんなこんなで半日消化。
 わかってしまえば、なぁ~んだ、と思いましたが、
 通常の使い方で、
 <head> ~ </head> の間に
 init処理を書いたのでは、
 ・用意したオブジェクトを認識してくれないんですねぇ。

  ※Drupalの場合、頁の最後に closure処理というのを
   やってて、大量のJavaScritが吐き出されるんですが、
   その後に記述することで、回避。


 やれやれ。

 1日費やしたので、(せっかくですから)
 習作おいておきます。
 誰かの参考になる・・・かも。


jQuery利用した、アコーディオンメニュー習作サンプル
jQuery利用した、アコーディオンメニュー習作サンプル



 jQuery って、ほんと楽し。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1278-8e37034e
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

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