道场学习第一天Tab标签的实现

否则用《精通Dojo》的话来说就是Dojo不仅仅是一个程序库，而是一个工具包’，比其他所有JS库插件都更全面、更广泛。它包含大约40个用户界面控件、一个图形框架、cometd support、一个打包系统和其他东西。从dojo官网下载最新的1.6版本并解压。它有三个文件夹：。

1.dojo:是dojo的基础，其他所有需要做的事情都是基于它，类似于jquery.js文件，但是其他功能比它更丰富；2.Dijit : Dojo的小部件框架和内置小部件集(大概有40个HTML用户小部件)；dojox:的扩展库包括从表单小部件到绘图库的所有功能。知道这些就够了。虽然它只发布到1.6，而不是像jquery那样发布到6.1，但是dojo绝对强大。选择它将是你一生不变的追求。(广告词)(注：道场始于2004年，由alex发起，后由众多DHTML专家开发，所以现在已经非常成熟。接下来，我们将配置第一个示例。你准备好了吗？道场之旅正式开始，我们将以表单注册为例。首先，我们将引用它的主题样式：并将代码复制如下： style @ importurl(./dijit/themes/tundra/tundra . CSS)；@导入url(./Dojo/resources/Dojo . CSS)；/style themes就是主题风格，里面已经有好几个了。我在其中选择了‘tundra’，然后引用了dojo.css然后参考dojo基础文件dojo.js:script src='./Dojo/Dojo . js“Djconfig=”解析onload:true脚本。在这里，我们应该关注djconfig，因为我们需要声明性小部件，所以我们需要parse，这将更容易使用。如果我们使用编程写作，我们就不需要它，只需要关注它。然后参考parser.js和ContentPane，js解析器需要使用声明式风格，ContentPane需要使用内容面板。在dojo中引用的方式是调用require方法，类似于PHP中的require_once，即只引用文件一次。复制代码如下： scriptojo . require(' Dojo . parser ')；Dojo . require(' dijit . layout . content pane ')；Dojo . require(' dijit . layout . TabContainer ')；/脚本“.”的编写这里可以理解为一个文件夹下的类或命名空间，类似于AS3中的类或命名空间。你有没有发现多了一个TabContainer？这是我们将使用的选项卡切换小部件？如果您调用这个插件，它非常简单，只需使用dojoType属性来指示我们想要在哪里使用它。复制的代码如下： div Dojo类型=' dijit . layout . tab container ' class=' my form ' div Dojo类型=' dijit . layout . content pane ' title='个人信息'标签为='firstName'First。name :/label input type=' text ' id=' first name '/Br label for=' last name ' last name :/label input type=' text ' id=' last name '/Br label for=' middleInitial ' middle initial 3360/label input type=' text ' id=' middleInitial '/Br/div Dojo type=' dijit . layout . content pane ' title='联系地址' label ame 3360/label input type=' text ' id=' 标签类型=' text ' id=' phone '/br/div/div那我们一句一句来理解，Dojo类型=' dijit.layout.tabcontainer '表示容器有tab功能，Dojo类型=' dijit.layout.contentpane '表示容器是一个内容块，也就是单个tab。 最后，你觉得我们没有再写一行代码就完成了这个函数很奇怪吗？这是声明性小部件的优势，因为当您声明dojoType时，它会自动解除绑定该函数。好了，这是我正式接触道场的第一天。理解上可能有一些错误。你可以指出它们，我们可以一起学习和进步。如果你愿意，我会写第二个甚至更多。关于本文的最后一个例子，请参考图： demo:http://www.lovewebgames.com/dojoroot/myStudy/study_001.html(9501 . 163.com)。

完整代码：复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。' DTD ' HTML标题第一天/title元名称='发电机'内容='EditPlus '元名称='作者'内容元名称=“关键词”内容元名称=“描述”内容style @ import url(./dijit/themes/tundra/tundra。CSS)；@导入url(./Dojo/resources/Dojo。CSS)；/style脚本' src='./Dojo/Dojo。js ' djConfig=' parsonload : true '/脚本脚本Dojo。require(' Dojo。解析器')；道场。需要(' dijit。布局。内容窗格’)；道场。需要(' dijit。布局。tab container’)；/脚本风格myForm { width:600px高度：300 px线高：1.6;} .我的表单标签{ width :150 pxfloat 3360 left }/style/head body class=' tundra ' div Dojo type=' dijit。布局。tabbcontainer ' class=' my form ' div Dojo type=' dijit。布局。内容窗格' title='个人信息label for=' first name ' first name :/label input type=' text ' id=' first name '/br label for=' last name ' last name :/label input type=' text ' id=' middleInitial '/br/div Dojo type=' dijit。布局。内容窗格' title='联系地址标签邮件：/标签输入类型=' text ' id=' email '/br label ladder :/label input类型=' text ' id=' address '/br标签状态：/标签输入类型=' text ' id=' state '/br标签itiy :/标签输入类型=' text ' id=' country '/br/div dojootput联系电话标签工作电话：/标签输入类型='text' id=' workPhone '/br标签家庭电话：/标签输入类型=' text ' id=' homePhone '/br标签手机：/标签输入类型=' text ' id='手机/br/div/div/正文/html