【Dojo学习之三】dojo的组件大放送

从网上搜罗到的，包括选项卡、模仿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",col3: 'Because',col4: 9.33},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',{'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",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',type: dojox.grid.cells.Bool 
		      },'field': 'id'},'field': 'col2'},'width': '230px'},'width': '230px'}];
	      /*create a new grid:*/
	    var grid = new dojox.grid.EnhancedGrid({
	                 id: 'grid',plugins: {  
		                 dnd: true,pagination: {                         
		                       pageSizes : [ 10,25,50,Infinity ],maxPageStep : 8,gotoButton : true,defaultPage : 1,defaultPageSize : 25
		                       },},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","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',{ id: 'Nairobi',name:'Nairobi',type:'city',parent: 'KE' },{ id: 'Mombasa',name:'Mombasa',{ id: 'SD',name:'Sudan',{ id: 'Khartoum',name:'Khartoum',parent: 'SD' },{ id: 'AS',name:'Asia',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>

原文链接：https://www.f2er.com/dojo/291346.html

【Dojo学习之三】dojo的组件大放送

猜你在找的Dojo相关文章