<

script>

Dojo 学习笔记–TabContainer
让页面更有系统:dijit.layout.TabContainer
当贰个页面内容比较多,比较复杂的时候,能够用标签页,将功效相近的有些表
格大概音信放在同二个标签页内,客户能够低价的在分化的标签页之间切换,关
闭有个别标签页,可能去除某些标签页。
三个最简易的例证:
<html>
<head>
<title>Button Widget Dojo Tests</title>
<style type=”text/css”>
       @import “../js/dojo/resources/dojo.css”;
       @import “../js/dijit/themes/tundra/tundra.css”;
</style>          
<script type=”text/javascript”
       djConfig=”parseOnLoad: true, isDebug: true”
       src=”../js/dojo/dojo.js”></script>
<script type=”text/javascript”>
       dojo.require(“dijit.layout.ContentPane”);
       dojo.require(“dijit.layout.TabContainer”);
</script>
</head>
<body class=”tundra”>
<div id=”mainTabContainer” dojoType=”dijit.layout.TabContainer”
style=”width: 100%; height: 20em;” selectedChild=”tab1″>
       <div id=”tab1″ dojoType=”dijit.layout.ContentPane” title=”Tab
1″
closable=”true”>hi</div>
       <div id=”tab2″ dojoType=”dijit.layout.ContentPane”
title=”Tab
2″>hi2</div>
</div>
</body>
</html>
 
 
若是不一致的价签也是独自不通的文件,大家得以在dijit.layout.ContentPane
构件上安装 href 属性,内定到三个外表文件。供给在意的是,这些页面必得是
utf-8 的字符集,不然的话普通话会冒出乱码。举个例子:<div id=”tab2″
dojoType=”dijit.layout.ContentPane” href=”tab2.html”
refreshOnShow=”true” title=”Tab 2″></div>
 
只要要动态拉长三个标签页的话能够尝试下边包车型客车例证:
<script> 
function fff(){ var rrr=document.createElement(“DIV”);     
var tmp = new
dijit.layout.ContentPane({title:”tab3″,closable:true},rrr);
tmp.setContent(” <iframe style=’width:100%;height:100%;border:1px’
border=1 src=’;”);
dijit.byId(“mainTabContainer”).addChild(tmp);
dijit.byId(“mainTabContainer”).selectChild(tmp);
//dijit.byId(“mainTabContainer”).removeChild(dijit.byId(“tab2”));
}
</script>
以这件事例中利用了iframe,首要缘由:假如三个页面包车型大巴话,很有望有八个form,
form 之间即使有嵌套就能相比乱,所以分成了单独的iframe,当然完全能够在
新建二个 ContentPane 的时候设置一下 href 属性,直接加载三个页面。
 
 

script>

html>

html>

<

<p id=”p2″ dojoType=”dijit.layout.ContentPane”>

</

</p>

<

head>

script>

“dijit.layout.StackContainer”);

<

<

<button dojoType=”dijit.form.Button” id=”helloButton”>

style>

</head>

<

</

“dojo.parser”);

DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

</script>

       
首先,到下载dojo包。解压后放在工程的WebContent下。若是以为名字太长能够改成dojo。
        给贰个简易的弹出框例子:

<

</

DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

button>

<script type=”dojo/method” event=”onClick”>

新建一个index.html:

</p>

script type=”text/javascript” src=”dojo/dojo/dojo.js”

</

    dojo.require(“dijit.form.Button”);

dijit.byId(‘main’).forward();

       
注意,要在head中引进叁个css样式,这里是tundra.css,dojo.css是需求的。然后再引进dojo.js。注意body要写一个class=”tundra”。本例中,使用了dojo的button,所以还要在head中参预一句dojo.require(“dijit.form.Button”卡塔尔国;然后在button中,通过script来管理onClick事件。

<

style>

<

<

script type=”text/javascript”>

        alert(“Hello world!”);

button>

<

</

style type=”text/css”>

</p>

djConfig=”parseOnLoad: true”>

<

body class=”tundra”>

It’s the 1st page you see.

<!

<!

head>

<p id=”p3″ dojoType=”dijit.layout.ContentPane”>

<

“dijit.form.Button”);

script type=”text/javascript”>

dojo.require(

<

Previous

</

meta http-equiv=”Content-Type” content=”text/html;
charset=ISO-8859-1″>

title>DOJO: Hello world!</title>

dijit.byId(‘main’).back();

    Hello World!

dojo.require(

<

<p id=”p1″ dojoType=”dijit.layout.ContentPane”>

</body>

Next

meta http-equiv=”Content-Type” content=”text/html;
charset=ISO-8859-1″>

div>

    </script>

</

</

This is in page 1.

html>

This is in page 2.

@import “dojo/dijit/themes/tundra/tundra.css”;

</

    <script type=”dojo/method” event=”onClick”>

script type=”text/javascript” src=”dojo/dojo/dojo.js”

@import “dojo/dojo/resources/dojo.css”

<

title>Stack Container</title>

html>
       
须要团结写二个style来加框,这里没写。使用那些Container须要开辟职员写调控翻页的控件。

This is in page 3.

</

button dojoType=”dijit.form.Button” id=”previous”>

djConfig=”parseOnLoad: true”>

Good good study, day day up.

div dojoType=”dijit.layout.StackContainer” id=”main”>

dojo.require(

</script>

<

@import “dojo/dijit/themes/soria/soria.css”;

body>

dojo.require(

</

</

head>

<

button>

style type=”text/css”>

</

body class=”soria”>

script>

“dijit.layout.ContentPane”);

button dojoType=”dijit.form.Button” id=”next”>

<

</

@import “dojo/dojo/resources/dojo.css”

At last, I shall have revenge.

<script type=”dojo/method” event=”onClick”>