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

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

Текущая версия на 08:24, 26 мая 2010

Create TextBox

<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.TextBox");
      dojo.addOnLoad(show);
      
      
      function show() {
        var myDijit = new dijit.form.TextBox({
          value : 12.34
        });
        dojo.byId("my").appendChild(myDijit.domNode);
      }
    </script>
  </head>
  <body class="tundra">
     <div id="my">&nbsp;</div>
  </body>
</html>


Get value from dijit.form.TextBox and do the validation

<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.TextBox");
            function help(  ) {
                var msg="Help";
                alert(msg);
                return false;
            }
            function validate(  ) {
                var f = document.getElementById("registration_form");
                if (f.first.value == "" ||f.last.value == "" ||f.email.value == "") {
                        alert("All fields are required.");
                        return false;
                }
                return true;
            }
    </script>
  </head>
  <body class="tundra">
      <form id="registration_form"
            onsubmit="javascript:return validate()"
            action="">
            First Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="first"><br>
            Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last"><br>
            Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email"><br>
            <button type="submit">Sign Up!</button>
            <button type="reset">Reset</button>
            <button type="button" onclick="javascript:help()">Help</button>
      </form>
</body>
</html>


Set prompt message for TextBox

<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.ValidationTextBox");
    </script>
  </head>
  <body class="tundra">
<div class="formContainer">
  <form action="" method="get" name="custForm">
        <label for="firstName">Name: </label>
        <input type="text" id="firstName" name="firstName" 
           dojoType="dijit.form.ValidationTextBox"
           required="true" 
           propercase="true" 
           promptMessage="Enter first name."
           invalidMessage="First name is required."  
           trim="true"  
           style="width: 10em;"
        />
    
</form>
</div>
  </body>
</html>


Simple TextBox

<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.TextBox");
    </script>
  </head>
  <body class="tundra">
     <input type="textbox" dojoType="dijit.form.TextBox">
  </body>
</html>


TextBox proper case

<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.TextBox");
            function help(  ) {
                var msg="Help";
                alert(msg);
                return false;
            }
            function validate(  ) {
                var f = document.getElementById("registration_form");
                if (f.first.value == "" ||f.last.value == "" ||f.email.value == "") {
                        alert("All fields are required.");
                        return false;
                }
                return true;
            }
    </script>
  </head>
  <body class="tundra">
      <form id="registration_form"
            onsubmit="javascript:return validate()"
            action="">
            First Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="first"><br>
            Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last"><br>
            Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email"><br>
            <button type="submit">Sign Up!</button>
            <button type="reset">Reset</button>
            <button type="button" onclick="javascript:help()">Help</button>
      </form>
</body>
</html>


Trim dijit.form.TextBox

<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.TextBox");
            function help() {
                var msg="Help";
                alert(msg);
                return false;
            }
            function validate(){
                var f = document.getElementById("registration_form");
                if (f.first.value == "" ||f.last.value == "" ||f.email.value == "") {
                        alert("All fields are required.");
                        return false;
                }
                return true;
            }
    </script>
  </head>
  <body class="tundra">
      <form id="registration_form"
            onsubmit="javascript:return validate()"
            action="">
            First Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="first"><br>
            Last Name:<input dojoType="dijit.form.TextBox" propercase=true trim=true name="last"><br>
            Your Email:<input dojoType="dijit.form.TextBox" length=25 name="email"><br>
            <button type="submit">Sign Up!</button>
            <button type="reset">Reset</button>
            <button type="button" onclick="javascript:help()">Help</button>
      </form>
</body>
</html>


Use your own format function to format a dijit.form.TextBox

<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.TextBox");
            function mixedCapitalization(value) {
              var newValue = "";
              dojo.forEach(value.toLowerCase(  ), function(x) {
                   newValue += x.toUpperCase(  );
                });
              return newValue;
            }
    </script>
  </head>
  <body class="tundra">
      <form id="registration_form"
            onsubmit="javascript:return validate()"
            action="">
            First Name:<input dojoType="dijit.form.TextBox" format="mixedCapitalization" name="first"><br>
           
      </form>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/TextBox&oldid=8633»