2009-08-17 3 views
2

Я хотел бы показать «раскрывающееся диалоговое окно», когда я нажимаю ссылку/div.Как использовать dijit.TooltipDialog на div?

До сих пор есть следующий код:

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

Как я могу сделать мою Войти Link ведет себя как Кнопка входа? Или я могу сделать это в Додзе?

ответ

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

Спасибо, ссылка помогла. Только теперь автоматическое закрытие всплывающей подсказки. –

1

пыльник способ сделать это, является использованием DropDownButton, но заменяя атрибуты CSS, связанные с кнопкой с другим стилем, который будет сделать кнопку выглядеть как якорь.

Смежные вопросы