DOJO实例

peteronline

浏览: 262940 次
性别:
来自: 杭州

最近访客更多访客>>

gundammew

bigdog001

a4635

Feasea

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

DOJO

DOJO的第一个例子：
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FUN WITH DIGIT</title>
<style type="test/css">
 @import "dojo/dijit/themes/tundra/tundra.css"
 @import "dojo/dojo/resources/dojo.css"
</style>
<link rel="stylesheet" type="text/css" href="dojo/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="dojo/dojo/resources/dojo.css">
<style type="text/css">
 h3{
   margin : 10 px;
   color : red;
 }
 label,input{
   display:block;
   float: left;
   margin-bottom:5px;
 }
 label{
   text-align:right;
   width:70px;
   padding-right :20px;
   color : red;
 }
 br{
  clear: left;
 }
 .grouping{
  width: 300px;
  borer:solid 1px rgb(230,230,230);
  padding: 5px;
  margin:10px;
 }
</style>

<!-- 加载Base 并指定应该在页面加载后解析部件 -->

<script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad : true"></script>//表示页面加载完成以后，启用Dojo的解析模块对页面中的Dojo标签属性（Dojo标签属性是指Dojo定义的一些标记，这些标记只有在被处理以后，才能为浏览器识别执行）进行解析。djConfig是使用Dojo页面的一个全局配置参数。通过对这个参数不同的赋值，可以控制页面中Dojo的解析模块是否运行，Dojo的调试模块是否工作等。

<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.layout.TabContainer");
    dojo.require("dijit.layout.AccordionContainer");//设置AccordionContainer
   //dojo.require("dijit.layout.LinkPane"); //这里看是否需要使用LinkPane，不用的话取消这句

   dojo.require("dijit.layout.ContentPane");
   // dojo.require("dijit.layout.LayoutContainer");
   

</script>
</head>

<!-- 通过为body标签添加class="tundra"属性，指定为页面中所有元素应用默认tundra主题(Dijit 十分依赖css，因此在使用部件时指定主题是非常重要的。) -->

<body class="tundra">
  

   <div dojoType="dijit.layout.AccordionContainer" style ="width :150 px; height :150px; margin :5px" duration="500"><!--duration 用来显示滑动效果的显示时间 单位是毫秒 -->
   <div dojoType="dijit.layout.AccordionPane" title="one">
           <p> One fish...</p>
   </div>
   <div dojoType="dijit.layout.AccordionPane" title="two">
          <p> Two fish...</p>
   </div>
   <div dojoType="dijit.layout.AccordionPane" title="red">
          <p> Red fish...</p>
   </div>
   </div>
    <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>
  <!--  <script type="text/javascript">
       var username=dojo.byId('username').value
    alert(username);
    </script>
     -->
    <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>
 
    <div dojoType="dijit.layout.TabContainer" style="width:225px; height:100px; 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>
 
 
 
DOJO的第二个例子：Dialog 部件（当点击sign up 按钮时 页面被锁住）
 
  <html>
     <head>
          <title>Fun With Dialog!</title>
       <link rel="stylesheet" type="text/css"  href="dojo/dojo/resources/dojo.css"/>
    <link rel="stylesheet" type="text/css"  href="dojo/dijit/themes/tundra/tundra.css"/>
 
    <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad:true"> </script>
       <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.Dialog");
 
        dojo.require("dijit.form.Button");
 
    </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>
 
 
 
DOJO的第三个例子：关于TooltipDialog 和 DropDownButton 作用是给创建的图像就地加标签的功能
 
<html>
  <head>
    <title>TooltipDialog</title>
    <link rel="stylesheet" type="text/css" href="dojo/dojo/resources/dojo.css">
 <link rel="stylesheet" type="text/css" href="dojo/dijit/themes/tundra/tundra.css">
       <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.Button");
      dojo.require("dijit.Dialog");[color=red]//要加载TooltipDialog，必须使用dojo.require("dijit.Dialog"),因为TooltipDialog包含在Dialog的资源文件中[/color]
      dojo.require("dijit.form.TextBox");
    </script>
       <style type ="text/css">
      .customImage{
           background-image : url('img/butterfly.jpg');
     background-repeat : no-repeat;
     width :120px;
     height : 120px;
  }
    </style>
  </head>
  <body class="tundra">
   <button dojoType="dijit.form.DropDownButton" iconClass="customImage" showLabel="false">
          <span>This label is hidden....</span>
 
      <div dojoType="dijit.TooltipDialog" >
       <span>Tag this image...</span>
    <div dojoType="dijit.form.TextBox"></div>
   </div>
 <button>
  </body>
</html>

分享到：