dojo是什么?

前端之家收集整理的这篇文章主要介绍了dojo是什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

dojo:

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

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

如果你要使用dojo,首先你要声明:

[javascript] view plain copy
  1. <scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
  2. djConfig="parSEOnLoad:true">
  3. </script>
  4. <linkrel="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.querydojo.query方法使用熟悉的CSS查询(你在你的样式表使用)检索一个节点列表,其中包括支持先进的CSS3选择器

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

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

copy

    <html><head>
  1. <styletype="text/css">
  2. body,html{font-family:helvetica,arial,sans-serif;font-size:90%;}
  3. </style>
  4. <scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
  5. <script>
  6. dojo.require("dijit.Tooltip");
  7. dojo.require("dijit.form.Button");
  8. <linkrel="stylesheet"type="text/css"href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
  9. />
  10. .Box{color:white;background-color:#ba2929;width:200px;height:
  11. 50px;padding:10px;}
  12. </style>
  13. </head>
  14. <bodyclass="claro">
  15. <divclass="Box">
  16. Examplecontentabovebutton
  17. </div>
  18. <buttonid="buttonId"dojoType="dijit.form.Button">
  19. Longanimity
  20. </button>
  21. <buttonid="button2"dojoType="dijit.form.Button">
  22. Tooltipbelow
  23. </button>
  24. <divclass="Box">
  25. Examplecontentbelowbutton
  26. </div>
  27. <divdojoType="dijit.Tooltip"connectId="buttonId"position="above">
  28. a
  29. <i>
  30. disposition
  31. </i>
  32. tobearinjuriespatiently:
  33. <b>
  34. forbearance
  35. </b>
  36. <divdojoType="dijit.Tooltip"connectId="button2"position="below">
  37. </body>
  38. </html>

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

猜你在找的Dojo相关文章