dojo是什么？

最新推荐文章于 2016-10-26 14:35:00 发布

置顶 dojodojo

最新推荐文章于 2016-10-26 14:35:00 发布

阅读量1.9k

点赞数

分类专栏： dojo 文章标签： dojo stylesheet button javascript div css

dojo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

dojo：

Dojo是一个用JavaScript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets, Burstlib, f(m))，这也是为什么叫它a unifined toolkit的原因。Dojo的目标是解决开发DHTML应用程序遇到的那些、长期存在、历史问题，以及DHTML 跨浏览器问题。

Dojo能够让你更容易使Web页面具有动态能力，或者在任何能够稳定支持JavaScript语言的环境中发挥作用。其实就是美化你的网页。

如果你要使用dojo，首先你要声明：

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
 </script>
 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>

一个简单的例子：dojo.query

我们已经有： dojo.byId（类似document.get Element ById) 。然而，应用程序中每个节点的唯一ID，可以是一个艰巨的和不切实际的的任务。这也将是低效找到并在多个节点上单独操作ID。值得庆幸的是，有另一种解决方案：dojo.query。dojo.query方法使用熟悉的CSS查询（你在你的样式表使用）检索一个节点列表，其中包括支持先进的CSS3选择器

  dojo.query("#header　>　h1")　　//ID　为　header　的元素的直接子节点中的　h3　元素　 
　dojo.query("span[title^='test']")　//　属性　title　以字符串　test　开头的　span　元素　 
　dojo.query("div[id$='widget']")　//　属性　id　以字符串　widget　结尾的　div　元素　 
　dojo.query("input[name*='value']")　//　属性　name　包含子串　value　的　input　元素　 
　dojo.query("#myDiv,　.error")　//　组合查询，结果中包含　ID　为　myDiv　的元素和　CSS　类为　error　的元素　 
　dojo.query(".message.info")　//　同时包含了　CSS　类　message　和　info　的元素，注意两个类之间不包含空格　 
　dojo.query("tr:nth-child(even)")　//　出现在父节点的偶数位置的　tr　元素　 
　dojo.query("input[type=checkbox]:checked")　//　所有选中状态的复选框　 
　dojo.query(".message:not(:nth-child(odd))")　//　嵌套子查询，选中包含　CSS　类　message，

dojo开源包中包含主要3个文件夹：dojo，dijit，dojox。dijit是许多ajax的小部件组成，举一个典型的小部件：dijit.Tooltip：

<html> <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
        </script>
        <script>
            dojo.require("dijit.Tooltip");
            dojo.require("dijit.form.Button");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
        <style type="text/css">
            .box { color: white; background-color: #ba2929; width: 200px; height:
            50px; padding: 10px; }
        </style>
    </head>
    
    <body class=" claro ">
        <div class="box">
            Example content above button
        </div>
        <button id="buttonId" dojoType="dijit.form.Button">
            Longanimity
        </button>
        <button id="button2" dojoType="dijit.form.Button">
            Tooltip below
        </button>
        <div class="box">
            Example content below button
        </div>
        <div dojoType="dijit.Tooltip" connectId="buttonId" position="above">
            a
            <i>
                disposition
            </i>
            to bear injuries patiently :
            <b>
                forbearance
            </b>
        </div>
        <div dojoType="dijit.Tooltip" connectId="button2" position="below">
            a
            <i>
                disposition
            </i>
            to bear injuries patiently :
            <b>
                forbearance
            </b>
        </div>
       
    </body>

</html>

一个简单的演示效果，可以看出dojo的tooltip是非常美观的。

dojo官网教程：中文版的dojo教程过于乱，如果你想学习dojo，从它的官方网站由浅到深比较容易学习。官网的搜索条可以找到任何有关dojo的用法。