web-dev-qa-db-ja.com

JavaScriptメニューの競合

静的なWebサイトをJoomla 3.3テンプレートに変換しています。これは、1レベルのドロップダウンボックスのjavascriptメニューがあり、これが「index.html」に含まれている関数です。

 $（function（）{
 /**
 *各メニュー要素について、mouseenterで、
 *画像を拡大し、sdt_activeスパンと
 * sdt_wrap span。要素にサブメニュー（sdt_box）がある場合、
 *それをスライドさせます-要素がメニューの最後の要素である場合
 *スライドさせます左側、それ以外の場合は右側
 */
 $（ '＃sdt_menu> li'）。bind（ 'mouseenter'、function（）{
 var $ elem = $ （これ）; 
 $ elem.find（ 'img'）
 .stop（true）
 .animate（{
 'width'： '170px'、 
 'height'： '170px'、
 'left'： '0px' 
}、400、 'easeOutBack'）
 .andSelf（）
 .find（ '。sdt_wrap'）
 .stop（true ）
 .animate（{'top'： '140px'}、500、 'easeOutBack'）
 .andSelf（）
 .find（ '。sdt_active'）
 .stop（true）
 .animate（{'height'： '170px'}、300、function（）{
 var $ sub_menu = $ elem.find（ '。sdt_box'） ; 
 if（$ sub_menu.length）{
 var left = '170px'; 
 if（$ elem.parent（）。children（）。length == $ elem。 index（）+ 1）
 left = '-170px'; 
 $ sub_menu.show（）。animate（{'left'：left}、200）; 
} 
}）; 
}）。bind（ 'mouseleave'、function（）{
 var $ elem = $（this）; 
 var $ sub_menu = $ elem .find（ '。sdt_box'）; 
 if（$ sub_menu.length）
 $ sub_menu.hide（）。css（ 'left'、 '0px'）; 
 
 $ elem.find（ '。sdt_active'）
 .stop（true）
 .animate（{'height'： '0px'}、300）
 .andSelf（）。find（ 'img'）
 .stop（true）
。 animate（{
 'width'： '0px'、
 'height'： '0px'、
 'left'： '85px' 
}、400） 
 .andSelf（）
 .find（ '。sdt_wrap'）
 .stop（true）
 .animate（{'top'： '15px'}、 500）; 
}）; 
}）;

そして、それはeasing.jsを使用し、私は頭に含まれていました。

joomlaのインデックスはPHPにあるため、以下のようにeasing.jsを含めました。

$ doc-> addScript（ '/ templates /'。$ this-> template。 '/js/easing.js'、 'text/javascript'）;

関数をmain.jsにコピーして貼り付け、index.phpにロードしましたが、機能しませんでした。

それで、スクリプトをindex.phpの中に入れました-うまくいきませんでした...

どうやって動かすのか分からない。 （私はカスタムHTMLモジュールとしてメニューを作成しました）

だから私は何をすべきですか？

joomla-3.3.xmodulejavascript
2
Elhamy

Joomlaでは、mootoolsと競合しないことを確認せずに、jQueryで_$_文字を使用しないでください。 Joomlaは改善されましたが、私の考えでは_$_ではなくjQueryを使用するのが最善です。他の方法よりもはるかにストレスが少ないです。

また、HTMLは正常に読み込まれると思いますか？ Javascriptはありませんか？これを助けるためのいくつかの考えがあります：

$(function () {

これを切り替える

jQuery(document).ready(function(){

どちらも最終的には同じことを行いますが、.readyは「onload」関数として見やすく、必要に応じて後で追加するのも混乱しにくくなります。また、上記の_$_をjQueryで置き換えると、 （Joomlaの他のJSライブラリと共に）mootoolsの互換性を支援します。

また、何も起こっていないことを追跡するエラーがない場合は、_console.log_を使用します。スクリプトが読み込まれていませんか？最初の関数の中にconsole.log('loaded');のようなものを含めようとすると、スクリプトがロードされたかどうかがわかります。次に、それらをバインドイベントにも追加して、mouseenterイベントが呼び出されていないかどうかを確認します。すべてがロードされているように見える場合は、関数のチェーンを分割し、出力を_console.log_に分割して、期待どおりかどうかを確認できます。ただし、これはすべて少なくとも一部のJavascriptノウハウに基づいていますが、より明確な答えを与えるには、フォームのHTMLも確認する必要があります。

以下の残りは私の元の投稿であり、通常のメニューモジュールを想定しています。ここまでたどり着くまでカスタムであることがわかりませんでしたが、他の人を助ける可能性があるのでそのままにしておきます。

メニューモジュールのIDが正しく設定されていることを確認し、メニューを調べて、すべてのID /クラスが正しいことを確認してください。

ルートクラスが必要な場合は、接尾辞に注意してください。クラスを追加するように思わせますが、実際には現在のクラスの最後に何でも追加するので、スペースを使用して、デフォルトとは別に独自のクラスを追加します。これは、いくつかのWebサイトやメニューのカスタムJSで見た1つの問題です。したがって、メニューモジュールを作成するときは、

_" sdt_menu"_

3
Jordan Ramstad