2009-08-17 5 views
2

Je voudrais montrer une "boîte de dialogue déroulante" quand je clique sur mon lien/div.Comment utiliser dijit.TooltipDialog sur un div?

ont jusqu'à présent le code suivant:

<html> 
     <head> 
      <script type="text/javascript" djConfig="isDebug: false, parseOnLoad: true" src="lib/dojo/dojo.js"> 
      </script> 
      <link rel="stylesheet" type="text/css" href="lib/dojo/resources/dojo.css"> 
      <link rel="stylesheet" type="text/css" href="lib/dijit/themes/tundra/tundra.css"> 
      <script type="text/javascript"> 
       dojo.require("dojo.parser"); 
       dojo.require("dijit.TooltipDialog"); 
       dojo.require("dijit.form.Form"); 
       dojo.require("dijit.form.Button"); 
       dojo.require("dijit.form.TextBox"); 
       dojo.require("dijit.form.DropDownButton"); 

       dojo.addOnLoad(function(){ 

        console.log("Hello"); 
       }); 
      </script> 
     </head> 
     <body class="tundra"> 
      <!-- Login DIV --> 
      <div id="login"> 
       <a href="#" title="">Login Link</a> 
      </div> 

       <div dojoType="dijit.TooltipDialog"> 
        <span>Username:</span> 
        <div dojoType="dijit.form.TextBox"> 
        </div> 
        <span>Password:</span> 
        <div dojoType="dijit.form.TextBox" type="password"> 
        </div> 
        <button dojoType="dijit.form.Button" type="submit"> 
         Login 
        </button> 
       </div> 

      <!-- Login Button --> 
      <button dojoType="dijit.form.DropDownButton""> 
       <span>Login Button</span> 
       <div dojoType="dijit.TooltipDialog"> 
        <span>Username:</span> 
        <div dojoType="dijit.form.TextBox"> 
        </div> 
        <span>Password:</span> 
        <div dojoType="dijit.form.TextBox" type="password"> 
        </div> 
        <button dojoType="dijit.form.Button" type="submit"> 
         Login 
        </button> 
       </div> 
      </button> 

     </body> 
    </html> 

Comment puis-je faire mon lien de connexion se comporter comme le bouton de connexion? Ou y a-t-il un autre moyen de le faire dans Dojo?

Répondre

1

il y a un beau poste link -> tooltips on anchors

ce n'est pas pour tooltipdialogs, mais il simule ses fonctionnalités.

-ou-

<div id="login" dojoType="dijit.form.DropDownButton"> 
    <a href="#" title="">Login Link</a> 
    <div id="loginDialog" dojoType="dijit.TooltipDialog" style="display:none" > 
     <span>Username:</span> 
     <div dojoType="dijit.form.TextBox"> 
     </div> 
     <span>Password:</span> 
     <div dojoType="dijit.form.TextBox" type="password"> 
     </div> 
     <button dojoType="dijit.form.Button" type="submit"> 
      Login 
     </button> 
    </div> 

+0

Merci, le lien a aidé. La seule chose maintenant est l'auto ferme l'info-bulle. –

1

anthères façon de le faire, est à l'aide DropDownButton, mais en remplaçant les attributs associés à css sur le bouton avec un style différent qui fera le bouton ressembler à un ancre.

Questions connexes