【Dojo学习之三】dojo的组件大放送
来源：互联网 发布：制作app软件多少钱 编辑：程序博客网 时间：2024/06/09 21:14
从网上搜罗到的，包括选项卡、模仿qq面板组件、日历组件、树形组件等等，希望这些组件可以帮助到你，全部放出：
（打包下载地址：http://download.csdn.net/detail/victoryboss/6405509）
（代码下载后请放到dojo同文件夹下，而且要放在你的服务器文件夹下面哦亲）
1.TabContainer选项卡组件
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TabContainer组件</title><style type="text/css">@import "dojo/dijit/themes/claro/claro.css";@import "dojo/dojo/resources/dojo.css";</style><script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script type="text/javascript">dojo.require("dojo.parser");dojo.require("dijit.layout.TabContainer");dojo.require("dijit.layout.ContentPane");</script></head><body class="claro"> <h3>Sign-up for our great offers:</h3> <form id="registration_form"> <div dojoType="dijit.layout.TabContainer" style="width:300px; height:200px; margin:5px; border:solid 1px;"> <div dojoType="dijit.layout.ContentPane" title="one"> one fish.... </div> <div dojoType="dijit.layout.ContentPane" title="two"> Two fish... </div> <div dojoType="dijit.layout.ContentPane" title="red" closable="true"> Red fish..... <script type="dojo/method" event ="onClose" args="evt"> console.log("Closing",this.title); return true; </script> </div> <div dojoType="dijit.layout.ContentPane" title="blue"> Blue fish... </div> </div> </form> </body></html>2.AccordionContainer模仿QQ面板组件
代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AccordionContainer</title><script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script type="text/javascript">require([ "dijit/dijit", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", ]);</script><style>@import "dojo/dijit/themes/claro/claro.css";</style> <style type="text/css"> body, html { width:100%; height:100%; margin:0; padding:0 } </style> </head><body class="claro" > <span data-dojo-type="dijit/layout/AccordionContainer" style="min-width: 1em; min-height: 1em; width: 200px; height: 300px;"><div data-dojo-type="dijit/layout/ContentPane" title="Pane 1" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" selected="true" closable="false" doLayout="false"></div><div data-dojo-type="dijit/layout/ContentPane" title="Pane 2" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" selected="true" closable="false" doLayout="false"></div><div data-dojo-type="dijit/layout/ContentPane" title="Pane 3"></div></span></body></html>3.BorderContainer布局组件
代码如下：
<!DOCTYPE html><html ><head> <title>BorderContainer_use</title> <link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" type="text/css" /> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } body{ background-color:white; overflow:hidden; font-family: "Trebuchet MS"; } .roundedCorners{ -moz-border-radius: 4px; } #header { border: solid 2px #7EABCD; background-color:white; color:blue; font-size:18pt; text-align:center; font-weight:bold; height:60px; } #leftPane{ background-color:yellow; color:red; border: solid 2px cornflowerblue; width:250px; height:300px; overflow:hidden; } #rightPane{ background-color:green; color:yellow; border: solid 2px cornflowerblue; width:250px; height:300px; overflow:hidden; } #centerPane{ background-color:orange; color:blue; border: solid 2px cornflowerblue; overflow:hidden; } #footer { border: solid 2px #7EABCD; background-color:white; color:blue; font-size:10pt; text-align:center; height:40px; } </style> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="dojo/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.SplitContainer"); dojo.require("dijit.layout.StackContainer"); </script></head><body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;"> <div id="header" dojotype="dijit.layout.ContentPane" region="top"> top </div> <div id="rightPane" dojotype="dijit.layout.TabContainer" region="right"> <div dojotype="dijit.layout.ContentPane" title = "Tab 1" selected="true"> first </div> <div dojotype="dijit.layout.ContentPane" title="Tab 2" > second </div> </div> <div id="leftPane" dojotype="dijit.layout.AccordionContainer" region="left" > left </div> <div id="centerPane" dojotype="dijit.layout.SplitContainer" region="center"> center </div> <div id="footer" dojotype="dijit.layout.StackContainer" region="bottom"> bottom </div> </div></body></html>4.Diaolog可移动对话框组件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Diaolog</title> <link rel="stylesheet" type="text/css" href="dojo/dijit/themes/tundra/tundra.css" /> <style type="text/css"> body, html { width:100%; height:100%; margin:0; padding:0 } </style> <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dijit.Dialog"); dojo.debug(true); </script> </head> <body class="tundra"> <button dojoType="dijit.form.Button" id="hello">sign up</button> <script type="text/javascript"> function sayhello(){ dijit.byId("dialog").show(); }; dojo.addOnLoad(function(){ var btn= dojo.byId("hello"); dojo.connect(btn,"onclick",sayhello); }); </script> <div id="dialog" dojoType="dijit.Dialog"> <p color="red">Hello</p> </div> </body> </html>5.输入框组件（验证邮箱，以及弹出框）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Email&Text</title><style type="text/css">@import "dojo/dijit/themes/tundra/tundra.css";@import "dojo/dojo/resources/dojo.css";</style><script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script type="text/javascript">dojo.require("dojo.parser");dojo.require("dijit.form.TextBox");dojo.require("dijit.form.ValidationTextBox");dojo.require("dijit.form.Button");dojo.require("dijit.Dialog");</script></head><body class="tundra"> <h3>Sign-up for our great offers:</h3> <form id="registration_form"> <!-- 通过定义一些标签并分别为它们添加相应的dojoType属性来指定所要使用的部件，以便解析器找到他们并将部件插入到页面中--> <div class="grouping"> <label>First Name:</label> <input type="text" maxlength=25 name="first" id="username" dojoType="dijit.form.TextBox" trim="true" propercase="true"/><br> <label>Last Name:</label> <input type="text" maxlength=25 name="last" dojoType="dijit.form.TextBox" trim="true" propercase="true"/><br> <label>Your Email:</label> <input type="text" maxlength=25 name="email" dojoType="dijit.form.ValidationTextBox" trim="true" lowercase="true" regExp="[a-z0-9._%+-]+@[a-z0-9-]+/.[a-z]{2,4}" required="true" invalidMessage="please enter a valid e-mail address"/> <button dojoType="dijit.form.Button" onclick ="alert('Boo!')">Sign Up!</button> </div> </form> <hr/> <button dojoType="dijit.form.DropDownButton" showLabel="false"> <span>This label is hidden....</span> <div dojoType="dijit.TooltipDialog" > <span>Tag this image...</span> <div dojoType="dijit.form.TextBox"></div> </div></body></html>6.Grid表格组件
代码如下：
<!DOCTYPE html><html ><head><link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css"><style type="text/css">@import "dojo/dojox/grid/resources/claroGrid.css";/*Grid need a explicit width/height by default*/#grid { width: 43em; height: 20em;}</style><script>var dojoConfig = {parseOnLoad: true}</script><script src='dojo/dojo/dojo.js'></script><script>dojo.require("dojox.grid.DataGrid");dojo.require("dojo.data.ItemFileWriteStore");dojo.ready(function(){ /*set up data store*/ var data = { identifier: 'id', items: [] }; var data_list = [ { col1: "normal", col2: false, col3: 'But', col4: 29.91}, { col1: "important", col2: false, col3: 'Because', col4: 9.33}, { col1: "important", col2: false, col3: 'Signs', col4: 19.34} ]; var rows = 60; for(var i=0, l=data_list.length; i<rows; i++){ data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l])); } var store = new dojo.data.ItemFileWriteStore({data: data}); /*set up layout*/ var layout = [ { name:'slector', field: 'Sel', editable: true, width: '55px', cellStyles: 'text-decoration: none; cursor:default; text-align: center;position: relative; left: -10px', headerStyles: 'text-align: center;', type: dojox.grid.cells.Bool }, {'name': 'Column 1', 'field': 'id', 'width': '100px'}, {'name': 'Column 2', 'field': 'col2', 'width': '100px'}, {'name': 'Column 3', 'field': 'col3', 'width': '200px'}, {'name': 'Column 4', 'field': 'col4', 'width': '150px'} ]; /*create a new grid:*/ var grid = new dojox.grid.DataGrid({ id: 'grid', store: store, structure: layout, rowSelector: '20px'}, document.createElement('div')); /*append the new grid to the div*/ dojo.byId("gridDiv").appendChild(grid.domNode); /*Call startup() to render the grid*/ grid.startup();});//dojo griddojo.addOnLoad(function() { grid.onRowClick= function(e){ var idx = e.rowIndex; var item1 = this.getItem(idx); alert(item1.row); var store = this.store; alert("you have clicked on rows " + store.getValue(item1,"index"));} //grid.onRowDblClick=function(e) //{ // window.location.href='?op=update&id='+this.getItem(e.rowIndex).row; // }});</script></head><body class="claro"> <div id="gridDiv"></div></body></html>7.EnhancedGrid加强版表格组件
代码如下：
<!DOCTYPE html><html ><head><link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css"><style type="text/css">@import "dojo/dojox/grid/enhanced/resources/claroEnhancedGrid.css";/*Grid need a explicit width/height by default*/#grid { width: 43em; height: 20em;}</style><script>var dojoConfig = {parseOnLoad: true}</script><script src='dojo/dojo/dojo.js'></script><script type="text/javascript">dojo.require("dojo.parser");dojo.require("dojox.grid.EnhancedGrid");dojo.require("dojo.data.ItemFileWriteStore");dojo.require("dojox.grid.EnhancedGrid");dojo.require("dojox.grid.enhanced.plugins.DnD");dojo.require("dojox/grid/enhanced/plugins/Pagination");dojo.require("dijit.form.Button");</script><script>var data = { identifier: 'id', items: [] };var data_list = [{ col1: "normal", col2: false, col3: 'But', col4: 29.91},{ col1: "important", col2: false, col3: 'Because', col4: 9.33},{ col1: "important", col2: false, col3: 'Signs', col4: 19.34}];var rows = 60;for(var i=0, l=data_list.length; i<rows; i++){data.items.push(dojo.mixin({ id: i+1 }, data_list[i%l]));}var store = new dojo.data.ItemFileWriteStore({data: data});</script><script> //griddojo.ready(function(){ /*set up layout*/var layout = [ { name:'slector', field: 'Sel', editable: true, width: '55px', cellStyles: 'text-decoration: none; cursor:default; text-align: center;position: relative; left: -10px', headerStyles: 'text-align: center;', type: dojox.grid.cells.Bool }, {'name': 'Column 1', 'field': 'id'}, {'name': 'Column 2', 'field': 'col2'}, {'name': 'Column 3', 'field': 'col3', 'width': '230px'}, {'name': 'Column 4', 'field': 'col4', 'width': '230px'}]; /*create a new grid:*/ var grid = new dojox.grid.EnhancedGrid({ id: 'grid', store: store, structure: layout, plugins: { dnd: true, pagination: { pageSizes : [ 10, 25, 50, Infinity ], maxPageStep : 8, gotoButton : true, defaultPage : 1, defaultPageSize : 25 } , }, rowSelector: '20px'}, document.createElement('div')); /*append the new grid to the div*/ dojo.byId("gridDiv").appendChild(grid.domNode); /*Call startup() to render the grid*/ grid.startup(); }); </script> </head><body class="claro"> <div id="gridDiv"></div></body></html>8.Calendar日历组件
代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Untitled</title><script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script><script type="text/javascript">require([ "dijit/dijit", "dojo/parser", "dijit/Calendar" ]);</script><style>@import "dojo/dijit/themes/claro/claro.css";</style> <style type="text/css"> body, html { width:100%; height:100%; margin:0; padding:0 } </style> </head><body class="claro" > <input data-dojo-type="dijit/Calendar" style="width: 97px; height: 103px;"></input></body></html>9.Tree树形组件
代码如下
<!DOCTYPE html> <html > <head> <style type="text/css">@import "./dojo/dojo/resources/dojo.css";@import "./dojo/dijit/themes/tundra/tundra.css";</style><script type="text/javascript" djConfig="parseOnLoad: true, isDebug: true" src="./dojo/dojo/dojo.js"></script><script>require([ "dojo/ready", "dojo/_base/window", "dojo/store/Memory", "dijit/tree/ObjectStoreModel", "dijit/Tree" ], function(ready, win, Memory, ObjectStoreModel, Tree){ // Create test store, adding the getChildren() method required by ObjectStoreModel var myStore = new Memory({ data: [ { id: 'world', name:'The earth', type:'planet', population: '6 billion'}, { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km', timezone: '-1 UTC to +4 UTC', parent: 'world'}, { id: 'EG', name:'Egypt', type:'country', parent: 'AF' }, { id: 'KE', name:'Kenya', type:'country', parent: 'AF' }, { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' }, { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' }, { id: 'SD', name:'Sudan', type:'country', parent: 'AF' }, { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' }, { id: 'AS', name:'Asia', type:'continent', parent: 'world' }, ], //方法重写，有parent和id来确定children数据 getChildren: function(object){ return this.query({parent: object.id}); } }); // 创建tree需要的核心model，其中重要的为store属性 //query相当于确定tree中的root（根节点） var myModel = new ObjectStoreModel({ store: myStore, query: {id: 'world'} }); //在页面加载完，触发此方法 ready(function(){ var tree = new Tree({ model: myModel }); //将创建好的tree节点放到body处。 tree.placeAt(win.body()); //渲染tree tree.startup(); }); });</script> </head> <body class="tundra"> </body> </html> - 【Dojo学习之三】dojo的组件大放送
- 【Dojo学习之二】dojo的网上资料地址
- dojo学习笔记三
- 【Dojo学习之四】Dojo语法
- Dojo 学习笔记 之 Dojo hitch&partial
- 学习Ajax框架之dojo：dojo widget
- dojo学习之button
- dojo学习之1
- 【DOJO学习经验总结】强大的DOJO：dojo/aspect模块
- dojo学习笔记（三）
- dojo学习笔记（三）
- dojo的dojo.mixin
- DOJO Study Note(5) - Dojo 的 UI 组件库 - Dijit
- web前端之精通dojo三：载入Dojo
- Dojo学习之环境搭建
- dojo学习笔记之调用
- dojo学习
- Dojo学习
- TQ2440 LED驱动程序
- 关于无法保存Visual Studio自定义布局的问题
- Xcode如何查看内存中的数据
- getopt_long()函数作用
- SIM卡读卡器的研究与设计
- 【Dojo学习之三】dojo的组件大放送
- 自定义Toast格式，觉得有用，就记录下来了
- ADB起不了，提示ADB SERVER DIDNOT ACK （腾讯QQ导致）
- Xenserver VPS挂起
- sws_scale的技巧
- SetTimer函数和 KillTimer函数
- JS事件委托
- 深入浅出Node.js（三）：深入Node.js的模块机制
- 堆排序算法原理与实现
