JavaScript Tutorial/Dojo toolkit/query

Материал из Web эксперт
Версия от 18:52, 25 мая 2010; (обсуждение)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Get tag by ID and change inner html

<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script language="JavaScript" type="text/javascript">
      function setup() {
        dojo.byId("innerDiv").onclick = doInnerClick;
      }
 
      function doInnerClick(e) {
        dojo.byId("divOutput").innerHTML += "inner<br>";
        dojo.stopEvent(e);
      }
    </script>
  </head>
  <body onLoad="setup();">
    <div id="innerDiv">
        inner
    </div>
    <div id="divOutput">&nbsp;</div>
  </body>
</html>


Object to query

<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>
    function Foo(  ) {
       var o = dojo.queryToObject("foo=1&bar=2&baz=3");
       alert(o);
       alert(dojo.objectToQuery(o));

    }

    </script>
  </head>
  <body class="tundra" onload=Foo()>

</body>
</html>


Query dojo icon class with dojo.query()

<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.Toolbar");
            dojo.require("dijit.form.Button");
            dojo.addOnLoad(function(  ) {
                var bold = function(  ) {alert("bold");}
                var italic= function(  ) {alert("italic");}
                var underline = function(  ) {alert("underline");}
                var superscript = function(  ) {alert("superscript");}
                var subscript = function(  ) {alert("subscript");}
                dojo.query(".dijitEditorIcon").forEach(function(x) {
                        if (dojo.hasClass(x, "dijitEditorIconBold"))
                            dojo.connect(x.parentNode, "onclick", bold);
                        else if (dojo.hasClass(x, "dijitEditorIconItalic"))
                            dojo.connect(x.parentNode, "onclick", italic);
                        else if (dojo.hasClass(x, "dijitEditorIconUnderline"))
                            dojo.connect(x.parentNode, "onclick", underline);
                        else if (dojo.hasClass(x, "dijitEditorIconSubscript"))
                            dojo.connect(x.parentNode, "onclick", superscript);
                        else if (dojo.hasClass(x, "dijitEditorIconSuperscript"))
                            dojo.connect(x.parentNode, "onclick", subscript);
                });
            });
    </script>
  </head>
  <body class="tundra">
        <div dojoType="dijit.Toolbar" style="width:300px">
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconBold" ></button>
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconItalic" ></button>
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconUnderline" ></button>
            <span dojoType="dijit.ToolbarSeparator"></span>
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconSubscript"></button>
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconSuperscript"></button>
        </div>
  </body>
</html>


Query element id and add action

<html>
<head>
<title>Dojo example</title>
    <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.addOnLoad(function(){
        dojo.query("#showMe").onclick(function(e){
            var node = e.target;
            var a = dojo.anim(node, {
                backgroundColor: "#ff0",
                color: "#00f"
            }, 1000);
            dojo.connect(a, "onEnd", function(){
                dojo.anim(node, { color: "#0ff" }, null, null, function(){
                    node.innerHTML = "Alert!";
                    dojo.anim(node, { color: "red" });
                });
            });
        });
    });
</script>
<body>
<div id="showMe">
    click me
</div>
</body>
</html>


Query style

<html>
  <head>
    <style>
      .myStyle {
        color : #ff0000;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      function testIt() {
        alert(dojo.query(".myStyle"));
      }
    </script>
  </head>
  <body onLoad="testIt();">
    <div id="div1" class="myStyle">&nbsp;</div>
  </body>
</html>


Query style from tag

<html>
  <head>
    <style>
      .myStyle {
        color : #ff0000;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      function testIt() {
        alert(dojo.query(".myStyle", "parentDiv"));
      }
    </script>
  </head>
  <body onLoad="testIt();">
    <div id="parentDiv">
      <div id="div3" class="myStyle">&nbsp;</div>
    </div>
  </body>
</html>


Query to object

<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>
    function Foo(  ) {
       var o = dojo.queryToObject("foo=1&bar=2&baz=3");
       alert(o);
       alert(dojo.objectToQuery(o));

    }

    </script>
  </head>
  <body class="tundra" onload=Foo()>

</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/query&oldid=8606»