JavaScript DHTML/Dojo toolkit/Dialog — различия между версиями

Версия 09:59, 26 мая 2010

Содержание

1 Create a dialog declaratively
2 Create a dialog with your code
3 Create data input dialog
4 Dialog button action
5 Get date from dialog
6 Hide dialog
7 Login dialog
8 Popup dialog
9 Simple dialog

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>

JavaScript DHTML/Dojo toolkit/Dialog — различия между версиями

Версия 09:59, 26 мая 2010

Содержание

Create a dialog declaratively

Create a dialog with your code

Create data input dialog

Dialog button action

Get date from dialog

Hide dialog

Login dialog

Popup dialog

Simple dialog

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:20, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Версия 09:59, 26 мая 2010 (просмотреть исходный код) (обсуждение) Следующая правка →
(нет различий)