2010-01-21 4 views
3

J'ai une liste non-ordonnée avec des ancres vivant dans un widget. Ce widget peut être placé n'importe où sur l'écran par l'utilisateur. Un utilisateur doit cliquer sur un élément et un div caché doit apparaître. Mon script gère généralement une position fixe qui peut poser un problème si l'utilisateur déplace cette largeur vers un autre emplacement sur l'écran. Je suis à la recherche de plugin ou de conseils sur la façon de rendre le plus flexible compte tenu des circonstances. Toute aide serait grandement appréciée.JQuery Flyout Menu

Voici mon code jusqu'à présent. CSS est assez simple pour gérer le positionnement absolu.

$(document).ready(function(){ 

     /* 
      TODO 
     1. swap classes after clicking 
     */ 


      $("a#link1").click(function(){ 
       $("a#link2").removeClass("on"); 
       $("#linkContentsWrap2").hide(); 
       $(this).addClass("on"); 
       $("#linkContentsWrap").show(); 

       return false; 
      }); 



      $("a#link2").click(function(){ 
       $("a#link1").removeClass("on"); 
       $("#linkContentsWrap").hide(); 
       $(this).addClass("on"); 
       $("#linkContentsWrap2").show(); 

       return false; 
      }); 



      }); 

      $(document).click(function(e){ 
         if (!$(e.target).parents().filter('#linkContentsWrap').length) { 
            // close your dialog 
            $("a#link1").removeClass("on"); 
            $("#linkContentsWrap").hide(); 
         } 
      }); 
      $(document).click(function(e){ 
         if (!$(e.target).parents().filter('#linkContentsWrap2').length) { 
            // close your dialog 
            $("a#link2").removeClass("on"); 
            $("#linkContentsWrap2").hide(); 
         } 
      }); 

Répondre

2

Le widget doit être absolument positionné dans un div contenant (comme il semble que vous avez fait), mais le menu doit être absolument positionné dans un div relativement placé dans le widget. Il y a beaucoup de couches de divs mais la div du milieu relativement positionnée devrait garder le menu flyout en place tout en déplaçant le div du widget parent.

0

Je vous suggère fortement d'utiliser le menu de jQuery UI (http://wiki.jqueryui.com/Menu). Non seulement vous pouvez utiliser ThemeRoller (http://jqueryui.com/themeroller/), mais vous avez l'architecture familière jQuery/jQuery UI que vous avez avec les onglets, etc.