javascript - 初心者向けヘルプ jQuery に関数を追加する

Question

これらのパラメーターで表される jQuery メニューがあります。

<script type="text/javascript">
            jQuery(document).ready(function(){


                jQuery('#promo').pieMenu({icon : [
                        { 
                            path : "/wp-content/themes/Tersus/images/piemenu/winamp.png",
                            alt  : "Winamp",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}
                        },  { 
                            path : "/wp-content/themes/Tersus/images/piemenu/vlc.png",
                            alt  : "VLC Media Player",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}  
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/QuickTime.png",
                            alt  : "Quick Time Player",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.qtl';return false}
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/WMP.png",
                            alt  : "Windows Media Player",
                            fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.asx';return false}
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/popup.png",
                            alt  : "נגן Popup",
                            fn   : function(){$("#popupplay").click();return false}
                        },{ 
                            path : "/wp-content/themes/Tersus/images/piemenu/iTunes.png",
                            alt  : "iTunes",
                            fn   : function(){alert('...בקרוב');return false}
                        }],
                    beforeMenuOpen: function(){
                        jQuery('<div id="shadow"></div>').css(
                        {
                            'position':'fixed',
                            'background-color':'#000000',
                            'opacity': 0.6,
                            'width':'100%',
                            'height':'100%',
                            'z-index' :999,
                            'top':0,
                            'left':0
                        }).appendTo('body');
                    },
                    beforeMenuClose: function(){
                        jQuery('#shadow').remove();
                    }
                });
            });

        </script>   

そのメニューは右クリックで操作します。ホバーするように変更する必要があります。

プラグインの作成者は、何を挿入するかのスニペットを提供しました:

$(document).ready(function(){
//init my jPie
   var jPieMenu = $(#myelement').pieMenu({icon : [ { 
                               path : "path/to/images.png",
                               alt  : "icon",
                               fn   : function(){alert('Click:: icon');return false;}
                          }] });
   $('#myelement').hover(function(){
      if($('#'+jPieMenu.id).css('display') != 'block') //if jpie is not visible
          jPieMenu.initMenu(200,200);
   })
})

唯一の問題は、どこに何を挿入すればよいかわからないことです..常に予期しないトークンを取得します。誰かが上記の私のコードを見て、それを挿入する場所を提案できますか?

事前にサンクス。

Answer 1

$('#myelement').pieMenu宣言を既存のコードに置き換えるだけです。

$(document).ready(function(){
//init my jPie
   var jPieMenu = $('#promo').pieMenu({icon : [ {   // replace these lines with your existing code
                               path : "path/to/images.png",
                               alt  : "icon",
                               fn   : function(){alert('Click:: icon');return false;}
                          }] });
   $('#promo').hover(function(){ // This ID needs to be the same as your element
      if($('#'+jPieMenu.id).css('display') != 'block') //if jpie is not visible
          jPieMenu.initMenu(200,200);
   })
})

Answer 2

まず、ID を参照できるように、パイ メニューを変数に設定する必要があります。

変化する：

jQuery('#promo').pieMenu({icon : [

に

var pieMenu = jQuery('#promo').pieMenu({icon : [

これで、メニュー自体とそれを含む要素 #promo の両方を参照する方法ができました。これは、ホバーしたときにメニューを開始する必要がある単なる div であると想定しています。

とにかく、これを追加してください：

$('#promo').hover(function(){
      if($('#'+pieMenu.id).css('display') != 'block') //if jpie is not visible
          pieMenu.initMenu(200,200);
   })

の最後の 2 セットの間で、準備完了})です。

編集：ええ、そのコードを提供した作成者は引用を逃しました。ただし、その部分は既にコーディングされているため、問題にはなりません。

Answer 3

また、3 行目の 2 番目のコード ブロックでは、#myelement の先頭に引用符がありません。これにより、その行の他のすべてが文字列として機能します。

Answer 4

<script type="text/javascript">
        jQuery(document).ready(function(){


            jQuery('#promo').pieMenu({icon : [
                    { 
                        path : "/wp-content/themes/Tersus/images/piemenu/winamp.png",
                        alt  : "Winamp",
                        fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}
                    },  { 
                        path : "/wp-content/themes/Tersus/images/piemenu/vlc.png",
                        alt  : "VLC Media Player",
                        fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}  
                    },{ 
                        path : "/wp-content/themes/Tersus/images/piemenu/QuickTime.png",
                        alt  : "Quick Time Player",
                        fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.qtl';return false}
                    },{ 
                        path : "/wp-content/themes/Tersus/images/piemenu/WMP.png",
                        alt  : "Windows Media Player",
                        fn   : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.asx';return false}
                    },{ 
                        path : "/wp-content/themes/Tersus/images/piemenu/popup.png",
                        alt  : "נגן Popup",
                        fn   : function(){$("#popupplay").click();return false}
                    },{ 
                        path : "/wp-content/themes/Tersus/images/piemenu/iTunes.png",
                        alt  : "iTunes",
                        fn   : function(){alert('...בקרוב');return false}
                    }],
                beforeMenuOpen: function(){
                    jQuery('<div id="shadow"></div>').css(
                    {
                        'position':'fixed',
                        'background-color':'#000000',
                        'opacity': 0.6,
                        'width':'100%',
                        'height':'100%',
                        'z-index' :999,
                        'top':0,
                        'left':0
                    }).appendTo('body');
                },
                beforeMenuClose: function(){
                    jQuery('#shadow').remove();
                }
            });
            jQuery('#promo').hover(function(){ // This ID needs to be the same as your element
                if(!jQuery('#'+jPieMenu.id).is(":visible")) //if jpie is not visible
                    jPieMenu.initMenu(200,200);
            })
        });

    </script>