将div插入jQuery菜单

Question

I have a jQuery menu plugin that looks like this

<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(){('Click:: Plus');window.location.href = 'http://www.tranceil.fm/wp-content/plugins/fullwidth-audio-player/popup.html';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> 

How do i insert a div from my header to one of the icons? i want one of the icons to call that div (its an audio player button that opens a popup window with the player)

<div class="fap-track-buttons"><a href="http://94.23.250.14:8000/live" title="TranceIL.FM" rel="http://www.tranceil.fm/wp-content/uploads/2012/05/logo-tranceil-1024x5761.png" target="" data-meta="#fap-meta-3227" class="fap-play-button fap-single-track">Play</a>
                </div>

You can check http://www.tranceil.fm/ and and press the 'play' button in the middle to check it out.

Any thoughts?

Answer 1

Depending on what your data-meta meta-attribute does, you might be able to get away with adding this to the menu:

,{ 
  path : "/wp-content/uploads/2012/05/logo-tranceil-1024x5761.png",
  alt  : "Play",
  fn   : function(){window.location.href = 'http://94.23.250.14:8000/live';return false}

If not, you could definitely do this:

,{ 
  path : "/wp-content/uploads/2012/05/logo-tranceil-1024x5761.png",
  alt  : "Play",
  fn   : function(){$("#yourID").click();return false}

and then you just need to add id= "yourID" to the play button (not the div, the <a> element)