2009-08-17 34 views
2

我想單擊我的鏈接/ div時顯示「下拉對話框」。如何在div上使用dijit.TooltipDialog?

到目前爲止有以下代碼:

<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> 

我怎樣才能讓我的登錄鏈接行爲像登錄按鈕?或者有另外一種方法可以在Dojo中做到這一點?

回答

1

有一個不錯的職位 link -> tooltips on anchors

它不適合tooltipdialogs,但它模擬了它的功能。

- 或 -

<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

謝謝,鏈接幫助。現在唯一的事情是自動關閉工具提示。 – 2009-08-19 17:24:31

1

花葯的方式來做到這一點,是通過使用DropDownButton,但將同與不同風格的按鈕相關的CSS屬性,這將使該按鈕看起來像一個錨。