从网上搜罗到的,包括选项卡、模仿qq面板组件、日历组件、树形组件等等,希望这些组件可以帮助到你,全部放出: (打包下载地址:http://download.csdn.net/detail/victoryboss/6405509) (代码
从网上搜罗到的,包括选项卡、模仿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 grid dojo.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> //grid dojo.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>