获得ID（dojo.byId）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>页面布局</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); dojo.addOnLoad(function(){ var button=dijit.byId("myButton"); dojo.connect(button,"onClick",null,function(evt){ var dialog=new dijit.Dialog({ content:"You clicked the button !" ,title:"Message" }).show(); }); }); </script> <button id="myButton" dojoType="dijit.form.Button">Push Me</button> </body> </html>内容窗格（panes）： 内容窗格是最基本的 Dijit 布局组件。它们允许定义一个内容部分，通过直接将 HTML 代码提供给内容属性来载入这一部分，或者通过 XmlHttpRequest 调用异步载入它。
新建一个content.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>页面布局</title> </style> </head> <body class="claro"> <h1>content.html content here!</h1> </body> </html>调用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>页面布局</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dijit.form.Button"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad(function(){ var button=dijit.byId("myButton"); var contentPane=dijit.byId("myContentPane"); dojo.connect(button,"onClick",function(evt){ contentPane.attr("href","content.html"); }); }); </script> <button dojoType="dijit.form.Button" id="myButton"> Load Content using XHR </button> <div dojoType="dijit.layout.ContentPane" id="myContentPane"> <h1>Static Content here!</h1> </div> </body> </html>堆叠容器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>页面布局</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dijit.layout.StackController"); dojo.require("dijit.layout.StackContainer"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad(function(){ }); </script> <div dojoType="dijit.layout.StackContainer" id="stackContainer"> <div dojoType="dijit.layout.ContentPane" title="Satck 1"> This is the content in stack 1. </div> <div dojoType="dijit.layout.ContentPane" title="Stack 2"> This is the content in stack 2. </div> </div> <div dojoType="dijit.layout.StackController" containerId="stackContainer"></div> </body> </html>选项卡容器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>页面布局</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad(function(){ }); </script> <div style="width:535px;height:290px;"> <div dojoType="dijit.layout.TabContainer" style="width:100%;height:100%;"> <div dojoType="dijit.layout.ContentPane" title="Tab 1"> This is the content in tab 1. </div> <div dojoType="dijit.layout.ContentPane" title="Tab 2"> This is the in tab2. </div> </div> </div> </body> </html>折叠容器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>页面布局</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad(function(){ }); </script> <div style="width:535px;height:290px;"> <div dojoType="dijit.layout.AccordionContainer" style="width:100px;"> <div dojoType="dijit.layout.ContentPane" title="Balde 1"> This is the content in blade 1. </div> <div dojoType="dijit.layout.ContentPane" title="Balde 2"> This is the content in blade 2. </div> <div dojoType="dijit.layout.ContentPane" title="Balde 3"> This is the content in blade 3. </div> </div> </div> </body> </html>边框容器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>页面布局</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad(function(){ }); </script> <div style="width:535px;height:290px;"> <div dojoType="dijit.layout.BorderContainer" style="width:100%;height:100%;"> <div dojoType="dijit.layout.ContentPane" region="top" splitter="true"> This is the content in the top section. </div> <div dojoType="dijit.layout.ContentPane" region="left" splitter="true" style="width: 100px;" > This is the content in the left section. </div> <div dojoType="dijit.layout.ContentPane" region="center" splitter="true"> This is the content in the center section. </div> <div dojoType="dijit.layout.ContentPane" region="right" splitter="true" style="width: 100px;" > This is the content in the right section. </div> <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true"> This is the content in the bottom section. </div> </div> </div> </body> </html>DojoX：Dojo 的绑定扩展库 DojoX 包括多种附加函数。下面的列表给出了 Dojox 提供的部分组件示例：音频/视频回放、图表绘制、Comet 客户端、适合多种不同数据源的广泛的数据存储，包括 CouchDB 数据库、CSV 文件，以及Flickr、Google Search、Amazon S3 等 Web API、矢量绘制 API、附加的表单 widget、数据网格、图像 widget（包括图片库、幻灯片放映和灯箱）、JSON 查询、更多布局容器、RPC 支持、多种其他 widget，包括仪表、其他日历和选色器、鱼眼 widget、文件选取器、横幅广告交替组件等。
小例子（星星评价）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>页面布局</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dojox/form/resources/Rating.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit");//这个必须先载入 dojo.require("dojox.form.Rating"); dojo.addOnLoad(function(){ }); </script> <div dojoType="dojox.form.Rating" numstars="5" value="3"></div> </body> </html>学习到此为止就结束了
相关学习： web前端之dojo实际应用及开发六：页面布局（附有源码） web前端之dojo实际应用及开发五：丰富的用户界面（附有源码） web前端之dojo实际应用及开发四：面向对象开发[关键]（附有源码） web前端之dojo实际应用及开发三：dojo.xhr* 增强 Ajax（附有源码） web前端之dojo实际应用及开发二：事件处理（附有源码） web前端之dojo实际应用及开发一：开始dojo（附有源码） web前端之Dojo与jQuery综合比较分析 web前端之dojo(用javascript语言实现的开源DHTML工具包)
