JavaScript DHTML/Dojo toolkit/Dialog

Материал из Web эксперт
Перейти к: навигация, поиск

Create a dialog declaratively

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.Dialog");
      dojo.addOnLoad(showDialogs);
      function showDialogs() {
        dijit.byId("dialog1").show();
      }
    </script>
  </head>
  <body>
  <div dojoType="dijit.Dialog" id="dialog1" title="dialog1"
      href="yourContentPageHere.htm"></div>
  </body>
</html>



Create a dialog with your code

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.Dialog");
      dojo.addOnLoad(showDialogs);
      function showDialogs() {
        var dlg = new dijit.Dialog();
        dlg.setContent("Content");
        dojo.byId("my").appendChild(dlg.domNode);
        dlg.show();
      }
    </script>
  </head>
  <body class="tundra">
    <div id="my"></div>
  </body>
</html>



Create data input dialog

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
       dojo.require("dojo.parser");
       dojo.require("dijit.form.Button");
       dojo.require("dijit.Dialog");
       dojo.require("dijit.form.TextBox");
       function checkPw(dialogFields) {
          alsert(dialogFields.confirmpw);
          
       }
    </script>
  </head>
  <body class="tundra">
    <div dojoType="dijit.form.DropDownButton">
      <span>Login Form</span>
      <div dojoType="dijit.TooltipDialog" id="dialog1" title="Login Form" execute="checkPw(arguments[0]);">
        <table>
          <tr>
          <td><label for="name" title="User name">Username</label></td>
              <td><input dojoType="dijit.form.TextBox" type="text" name="oldpw"></td>
          </tr>
          <tr>
              <td><label for="loc">Password: </label></td>
              <td><input dojoType="dijit.form.TextBox" type="password" name="newpw"></td>
          </tr>
          <tr>
              <td><label for="desc">Confirm Password:</label></td>
              <td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw"></td>
          </tr>
          <tr>
              <td colspan="2" align="center">
                 <button dojoType="dijit.form.Button" type="submit">Login</button></td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>



Dialog button action

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
       dojo.require("dojo.parser");
       dojo.require("dijit.form.Button");
       dojo.require("dijit.Dialog");
       dojo.require("dijit.form.TextBox");
       function checkPw(dialogFields) {
          alsert(dialogFields.confirmpw);
          
       }
    </script>
  </head>
  <body class="tundra">
    <div dojoType="dijit.form.DropDownButton">
      <span>Login Form</span>
      <div dojoType="dijit.TooltipDialog" id="dialog1" title="Login Form" execute="checkPw(arguments[0]);">
        <table>
          <tr>
          <td><label for="name" title="User name">Username</label></td>
              <td><input dojoType="dijit.form.TextBox" type="text" name="oldpw"></td>
          </tr>
          <tr>
              <td><label for="loc">Password: </label></td>
              <td><input dojoType="dijit.form.TextBox" type="password" name="newpw"></td>
          </tr>
          <tr>
              <td><label for="desc">Confirm Password:</label></td>
              <td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw"></td>
          </tr>
          <tr>
              <td colspan="2" align="center">
                 <button dojoType="dijit.form.Button" type="submit">Login</button></td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>



Get date from dialog

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
       dojo.require("dojo.parser");
       dojo.require("dijit.form.Button");
       dojo.require("dijit.Dialog");
       dojo.require("dijit.form.TextBox");
       function checkPw(dialogFields) {
          alsert(dialogFields.confirmpw);
          
       }
    </script>
  </head>
  <body class="tundra">
    <div dojoType="dijit.form.DropDownButton">
      <span>Login Form</span>
      <div dojoType="dijit.TooltipDialog" id="dialog1" title="Login Form" execute="checkPw(arguments[0]);">
        <table>
          <tr>
          <td><label for="name" title="User name">Username</label></td>
              <td><input dojoType="dijit.form.TextBox" type="text" name="oldpw"></td>
          </tr>
          <tr>
              <td><label for="loc">Password: </label></td>
              <td><input dojoType="dijit.form.TextBox" type="password" name="newpw"></td>
          </tr>
          <tr>
              <td><label for="desc">Confirm Password:</label></td>
              <td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw"></td>
          </tr>
          <tr>
              <td colspan="2" align="center">
                 <button dojoType="dijit.form.Button" type="submit">Login</button></td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>



Hide dialog

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
      dojo.addOnLoad(showDialog);
      function showDialog() {
        dijit.byId("dialog1").show();
      }
      function hideDialog() {
        dijit.byId("dialog1").hide();
      }
    </script>
  </head>
  <body class="tundra">
    <div dojoType="dijit.Dialog" id="dialog1" title="Forgot Password">
      <form action="" method="post" validate="true" id="resetPasswordForm">
        <table width="308">
          <tr>
            <td colspan="2"><label>Login Name</label></td>
            <td><input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="userName" id="userName"/></td>
          </tr>
          <tr>
          <td align="right">
          <button dojoType="dijit.form.Button" type="submit" onclick="alert("ok")" id="reset">Ok </button></td>
          <td align="right" valign="top"><button dojoType="dijit.form.Button" type="submit" onClick="hideDialog()"  id="cancel1">Hide Dialog </button></td></tr>
        </table>
      </form>
    </div>   
  </body>
</html>



Login dialog

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
      dojo.addOnLoad(showDialog);
      function showDialog() {
        dijit.byId("dialog1").show();
      }
    </script>
  </head>
  <body class="tundra">
  <div dojoType="dijit.Dialog" id="dialog1" title="Login">
      <form action="Login" method="post" validate="true" id="loginForm">
        <table width="258">
          <tr>
            <td><label>Login</label></td>
            <td><input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId"/></td>
          </tr>
          <tr>
            <td><label>Password</label></td>
            <td><input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="password"/></td>
          </tr>
          <tr><td colspan="2">&nbsp;</td></tr>
          <tr>
            <td colspan="2" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="center" valign="top"><button dojoType="dijit.form.Button" type="submit" id="LoginButton" onClick="alert("ok");">Ok</button></td>
                  &nbsp;
                  <td align="left" valign="top"><button dojoType="dijit.form.Button" type="submit" onclick="document.Login.reset()" id="Cancel">Cancel</button></td>
                  &nbsp;
                  <td><button dojoType="dijit.form.Button" type="submit" onclick="showDialog();" id="resetPassword"> Show Dialog </button></td>
                </tr>
           </table>
           </td>
          </tr>
        </table>
      </form>
    </div>
  </body>
</html>



Popup dialog

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
      dojo.addOnLoad(showDialog);
      dojo.addOnLoad(hideDialog);
      function showDialog() {
        dijit.byId("dialog1").show();
      }
    </script>
  </head>
  <body class="tundra">
   <div dojoType="dijit.Dialog" id="dialog1" title="Login">
      <form validate="true">
        <table width="180" border="0" cellspacing="0" cellpadding="0">
           <tr><td><div dojoType="dijit.form.DropDownButton">
              <span>Change Password</span>
              <div dojoType="dijit.TooltipDialog" id="dialog12" title="First Dialog" execute="checkPw(arguments[0]);">
                <table>
                  <tr>
                      <td><label for="desc">Password: </label></td>
                      <td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw" id="confirmpw"></td>
                  </tr>
                  <tr>
                      <td colspan="2" align="center">
                          <button dojoType=dijit.form.Button type="submit" onclick="alert("submit");">Submit</button></td>
                  </tr>
                </table>
              </div>
          </div>
        </td>
        </tr>
        </table>
      </form>
    </div>
  </body>
</html>



Simple dialog

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.parser");
            dojo.require("dijit.Dialog");
            dojo.addOnLoad(function(  ) {
                dijit.byId("dialog").show(  );
            });
    </script>
  </head>
  <body class="tundra" onload=f()>
 <div id="dialog" dojoType="dijit.Dialog">
          Dialog
        </div>
        
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Dojo_toolkit/Dialog&oldid=1945»