dojo:
Dojo是一个用JavaScript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它a unifined toolkit的原因。Dojo的目标是解决开发DHTML应用程序遇到的那些、长期存在 、历史问题,以及DHTML 跨浏览器问题。
Dojo能够让你更容易使Web页面具有动态能力,或者在任何能够稳定支持JavaScript语言的环境中发挥作用。其实就是美化你的网页。
如果你要使用dojo,首先你要声明:
- <scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
- djConfig="parSEOnLoad:true">
- </script>
- <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.query。 dojo.query 方法使用熟悉的CSS查询(你在你的样式表使用)检索一个节点列表,其中包括支持先进的CSS3选择器
dojo.query("#header > h1")
- dojo.query("span[title^='test']")
- dojo.query("div[id$='widget']")
- dojo.query("input[name*='value']")
- dojo.query("#myDiv, .error")
- dojo.query(".message.info")
- dojo.query("tr:nth-child(even)")
- dojo.query("input[type=checkbox]:checked")
- dojo.query(".message:not(:nth-child(odd))")
dojo开源包中包含主要3个文件夹:dojo,dijit,dojox。dijit是许多ajax的小部件组成,举一个典型的小部件:dijit.Tooltip:
copy
<html><head>
- <styletype="text/css">
- body,html{font-family:helvetica,arial,sans-serif;font-size:90%;}
- </style>
- <scriptsrc="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
- <script>
- dojo.require("dijit.Tooltip");
- dojo.require("dijit.form.Button");
- <linkrel="stylesheet"type="text/css"href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
- />
- .box{color:white;background-color:#ba2929;width:200px;height:
- 50px;padding:10px;}
- </style>
- </head>
-
- <bodyclass="claro">
- <divclass="box">
- Examplecontentabovebutton
- </div>
- <buttonid="buttonId"dojoType="dijit.form.Button">
- Longanimity
- </button>
- <buttonid="button2"dojoType="dijit.form.Button">
- Tooltipbelow
- </button>
- <divclass="box">
- Examplecontentbelowbutton
- </div>
- <divdojoType="dijit.Tooltip"connectId="buttonId"position="above">
- a
- <i>
- disposition
- </i>
- tobearinjuriespatiently:
- <b>
- forbearance
- </b>
- <divdojoType="dijit.Tooltip"connectId="button2"position="below">
- </body>
- </html>
一个简单的演示效果,可以看出dojo的tooltip是非常美观的。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|