从零开始学_JavaScript_系列（14）——dojo(7)（饼图，BorderContainer，hashchange，弹窗）...

5/5更新。BorderContainer自适应在本地时正常使用的方法，请查看原文代码之前那一段话

（60）创建一个饼形图

比较简单的标签声明法：（只需要修改数据即可）

①首先，加载dojo文件和样式文件：（关于style.css，需要根据自己找到的路径修改，或者使用我从官网上找到的链接：https://dojotoolkit.org/documentation/tutorials/1.10/charting/demo/style.css）

    <link rel="stylesheet" href="style.css" media="screen"><script>var dojoConfig = { parseOnLoad: true }</script><script src="js/dojo-1.10.5/dojo/dojo.js" data-dojo-config="isDebug: true ,async: true"></script>

②插件：

require(["dojo/parser",   //插件"dojox/charting/widget/Chart",  //2d模块"dojox/charting/themes/Claro",    //样式"dojox/charting/plot2d/Pie" //饼图类型的图
]);

③插入的HTML标签：

<!-- 父标签 -->
<div data-dojo-type="dojox/charting/widget/Chart"data-dojo-props="theme:dojox.charting.themes.Claro" style="width:550px; height: 550px;"><!-- 饼图的文字 --><div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div><!-- 饼图的数据 --><div class="series" name="Last Week's Visits" array="chartData"></div>
</div>

注：

<1>父标签的style中的width和height，影响饼图和其背景图大小，饼图大小主要受其中更小的那个影响；

<2>饼图文字的radius根据我自己观察，数值越大，饼图越明亮；而fontColor影响饼图的文字颜色；

<3>labelOffset影响饼图相对于文字的偏移。就是说，文字的位置不变，这个数字越小（-20——》-120），那么饼图就越小（外围和文字更远了）；

<4>饼图数据数据的array中的chartData，指的是饼图的数据来源的变量名（见下）

④数据：

chartData = [
{ x: 1, y: 19021,text:"a",color:"red"},
{ x: 1, y: 12837 },
{ x: 1, y: 12378 },
{ x: 1, y: 21882 },
{ x: 1, y: 17654 },
{ x: 1, y: 15833 },
{ x: 1, y: 11122 }
];

说明：
<1>由于是饼图，所以x坐标不影响，主要受y坐标影响（注意是y，而不是第二个参数）；

<2>text的值，是显示在饼图外围的值；

<3>color属性的值，影响饼图对应块的颜色

编程法：（更复杂一些，但是更可控）

①HTML代码：

<div id="chartNode" style="width: 550px; height: 550px;"></div>

②数据（同上的charData）

③dojo代码：

require(["dojox/charting/Chart","dojox/charting/themes/Claro",   //参数theme"dojox/charting/plot2d/Pie","dojo/domReady!"], function(Chart, theme, PiePlot){var pieChart = new Chart("chartNode");  //在指定节点创造变量pieChart.setTheme(theme);    //然后设置样式，不设置的话很丑pieChart.addPlot("default", {    //第一个参数指图标的name属性，如果一个，那么就用defaulttype: PiePlot, //这个参数指饼形图radius: 200,   //fontColor: "black",   //文字颜色labelOffset: -20  //饼图偏离文字距离（控制饼图大小）});pieChart.addSeries("January",chartData); //添加数据，参数1这部分数据的名称，参数2是数据，参数3不清楚pieChart.render(); //渲染图});

④其他：比如dojo的设置，加载，略掉。

⑤效果：和上面的效果图都是这样

（61）让div块自适应BorderContainer

①当我们在dojo里面，使用属性：data-dojo-type="dijit/layout/BorderContainer"时，可以实现块和块之间的自适应；

②其中：（注意，都是div块的属性）

外部容器：data-dojo-type = "dijit/layout/BorderContainer"

最底层的容器（被BorderContainer包含）：data-dojo-type = "dijit/layout/ContentPane"

让块和块之间有距离的：data-dojo-props = "gutters:true"

设置为侧边栏：data-dojo-props = "design:'sidebar' "

停靠靠左：data-dojo-props = "region:'left' " 中间用center，上top等，具体有两种情况，请参照⑥中的第《3》条解释

带分离器（大小可拖拽）：data-dojo-props ="splitter:true"

注：data-dojo-props的不同值，可以用逗号分隔放在一起。

③假如一个父容器（用BorderContainer）下的子元素都有（ContentPane），那么这些子元素是可以互相自适应的，但前提是，需要预设其中两个的宽度或高度。具体摆放形式请参照⑥中的《3》

④假如加了分离器属性（值为true），那么相邻块是可以拖拽大小的；

⑤例子：3层，最外层左右，次外层上下，最里层上中下左

（注意，如果需要在本地环境下正常显示，那么加载dojo.js的时候，需要加上绿色字体部分的内容<scriptsrc='dojo/dojo.js' data-dojo-config="async:true"></script>）

<html>
<head><meta charset=utf-8"/><link href="js/dojo-1.10.5/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet"></link><script>var dojoConfig = { parseOnLoad: true }</script><script src='dojo/dojo.js'data-dojo-config="async:true"></script><script>require(["dijit/layout/ContentPane", "dijit/layout/BorderContainer"]);</script>
<style>
body {padding: 0;margin: 0;font-size: 14px;color: #333;
}
#borderContainer {width: 100%;height: 100%;
}
#nav_pane {width: 200px;color: #fff;background: #3e424d;
}
#nav_menu {font-size: 20px;
}
#main {background: #f2f2f2;
}
#main_top {
}
</style>
</head><body class="claro">
<div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer"data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true"><div id="nav_pane" data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'left', splitter:true">最外层左边栏</div><div id="main" data-dojo-type="dijit/layout/BorderContainer"data-dojo-props="region:'center'"><div id="main_top" style="background-color:#aaa;height:100px" data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'top'">次外层上面</div><div id="main_center" data-dojo-type="dijit/layout/BorderContainer"data-dojo-props="design:'sidebar',region:'center'"><div style="background-color:#888;width:100px" data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'left'">最里层left</div><div style="background-color:#888;height:100px" data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'top'">最里层TOP</div><div style="background-color:#ddd" data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'center'">最里层center</div><div style="background-color:#aaa;height:100px" data-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'bottom'">最里层bottom</div></div></div>
</div>
</body>
</html>

⑥一些属性解释：

《1》data-dojo-props="gutters:true" 这个默认值是true，效果是给其所有的子元素加5px的margin。根据测试，当其子元素含有分隔条（就是那个可以拖动然后变换其左右元素的宽度/上下元素的高度的那个玩意），这个值改为false，可能会导致分隔条的一部分染上分隔条的父元素的背景颜色（在引入claro样式的情况下）。

《2》data-dojo-props="liveSplitters:false"默认值为true。当为true时，拖动分隔条，分隔条会实时移动（左右两边的会实时跟着变）；当为false时，拖动分隔条，当鼠标按键松开时，左右两边才会根据被拖动的分隔条当时的状态而变化。

《3》data-dojo-props="design:'sidebar'默认值是headline，值有两种，sidebar和headline。用于描述这个borderContainer的状态，具体看图就懂。

图片引自（请注意实际使用中，应该是小写的）：

https://blogs.esri.com/esri/arcgis/2009/01/21/using-the-dojo-bordercontainer-to-design-application-layouts/

（62）设置事件让BorderContainer再次自适应窗口

插件：dijit/registry

参数：registry

①通过js/jquery修改块的css属性（比如width或height），不会导致块会自动自适应。

因此，需要通过获取父块的id，然后使用 .resize() 来启动自适应。

②方法：

假如父块<div id="abc" data-dojo-type="dijit/layout/BorderContainer">

我们知道其id为abc；

子块若干（这里列一个）：

然后women通过jquery修改id="m"的css属性（假如比之前小）：

$("#m").css("width", "100px");

此时，我们会发现被缩小的子块和其他子块之间出现一定空白。但若通过更改浏览器窗口大小，他会再次自适应。当然，这样太麻烦了。

③因此，我们通过父块id获取其 var parent =registry.byId("abc");

注意，获取方式和之前不同。

然后，使用 parent.resize();

我们会发现，其再次自适应了。问题解决

（63）动画的同时，让BorderContainer保持自适应状态

①思路：

<1>在（62）的中，我们是通过修改css，从而使得其从一种布局瞬间变为另一种布局，然后调用resize()使得其自适应的。

<2>但假如我们不是通过css，而是通过动画效果，使得左边页面逐渐变窄，右边页面跟着变宽，我们便不能简单的通过resize()来达成我们的目的了。

<3>原因在于，左边变窄的同时，右边并不会变宽，而我们为了使得最终自适应，必然是在动画结束后调用resize()函数，使其自适应，但也因此导致左边变窄的同时，右边不会跟着变化。（因此左右两边之间会在动画时有一空白处）

<4>解决方案：左边动画的时候，右边也跟着调用动画。假如除左右之外还有切分条（调整左右两边width的），也要对其进行动画处理

②代码比较长

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
<style type="text/css">
html, body {height: 100%;width: 100%;margin: 0;padding: 0;border: 0;
}
#borderContainer {height: 100%;width: 100%;
}
#leadingPane {background-color: blue !important;
}
#centrePane {background-color: pink !important;
}
.tundra .dijitSplitter {background-color: red;
}
</style>
<script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script>
</head><body class="tundra "><div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer"><div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 300px;" id="leadingPane"></div><div dojoType="dijit.layout.ContentPane" splitter="true" region="center" id="centrePane"><button id="slideLeftButton" type="button" dojoType="dijit.form.Button">向左滑动变窄</button></div></div>
</body><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">dojo.require("dijit.layout.ContentPane");dojo.require("dijit.layout.BorderContainer");dojo.require("dijit.form.Button");dojo.require("dojo.fx");dojo.addOnLoad(function() {var bc = dijit.byId("borderContainer");var leading = dijit.byId("leadingPane");var centre = dijit.byId("centrePane");var splitter = bc.getSplitter('left');dojo.connect(dijit.byId("slideLeftButton"), "onClick", function(){var leadingWidth = dojo.style(leading.domNode, "width");var slideSplitter = dojo.fx.slideTo({node: splitter.id, duration: 500, left: (dojo.coords(splitter.domNode).l - 50).toString(),top: dojo.style(splitter.domNode, "top"), unit:"px"});var slidePane = dojo.animateProperty({node: leading.domNode,duration: 500,properties: {width: {end: dojo.style(leading.domNode, "width") - 50}}});var slideCentre = dojo.animateProperty({node: centre.domNode,duration: 500,properties: {width: {end: dojo.style(centre.domNode, "width") + 50},left: {end: dojo.style(centre.domNode, "left") - 50}}});var anim = dojo.fx.combine([slideSplitter, slidePane, slideCentre]);dojo.connect(anim, "onEnd", function() {bc.resize();});anim.play();});});
</script>
</html>

③变宽原理一样，只需要修改值（加减号颠倒）即可。

④代码解释：

html、css略

js：先获取最外面的容器，然后获取左边部分和右边部分，再通过最外面的获取切分条（splitter）；然后通过动画修改其left属性和width属性；合并动画；执行动画即可。

⑤防止动画连续执行：添加一个事件，点击按钮后隐藏按钮，动画结束后显示按钮即可。

（64）dojo的监视hashchange

插件：dojo/hash, dojo/topic

参数：hash, topic

①解释：hashchange指的是url后面加符号#之后再加字符串（假设为http://ww.baidu.com#abc），当字符串abc改变时（比如变为http://ww.baidu.com#def），触发事件。常用于单页面技术

②原理：

订阅hashchange改变的事件，改变后触发回调函数。

③代码：（同时使用了jquery）

topic.subscribe("/dojo/hashchange",function(hash){    //订阅事件，返回值是hash地址（比如上面的abc）var id = "iframe_" + hash;  //设置iframe的idvar iframe = $("#"+id);        //利用jquery，得到该id的标签if(iframe.length == 0)        //如果找不到，则添加该标签{$("#iframe_section").append("<iframe id='" + id + "' class='iframe' src='"+hash+".html' />");       //append是jquery的方法，添加子标签}$(".iframe").hide();        //隐藏所有class="iframe"的$("#"+id).show();      //显示指定id的iframe
})

④解释：

《1》首先需要一个触发hashchange的事件（即改变哈希地址的事件）

例如：$("#abc").click(function(){window.location= "#abc"});

其效果是id="abc"的点击后，其哈希地址更改为#abc，于是就能触发上面的事件了。

《2》事件触发后，代码执行到到获取$("#abc")的标签，然后进行if判断；

如果标签不存在，则添加标签（添加到id="iframe_section"的标签下），其为iframe框架，class="iframe"（其通过css来控制样式）id="iframe_abc"（从哈希值得到的，后面需要用），

《3》然后该iframe的地址比如是abc.html（从获取到的hash地址得到的结果），由于没有前缀，因此是相对路径。

《4》可以从《2》看出，有很多个iframe，但我们肯定只想看懂自己想要的那个，因此先隐藏所有的（通过类选择器），然后只显示我们需要的那个（通过id选择器）

《5》于是，我们可以通过改变哈希地址，使得显示我们需要的iframe窗口。当然，也可以用于触发事件，而hash地址是传递给事件的参数（判断哈希地址的值，用一个函数综合管理决定触发哪个事件）；

（65）鼠标点击出现一个弹窗tooltipdialog

插件：dijit/TooltipDialog, dijit/popup

参数：TooltipDialog popup

①效果解释：

点击后，出现这个tooltipdialog，假如鼠标离得远了，那么这个弹框会自动隐藏。

②代码：

var tips = new TooltipDialog({              //新建一个tooltipdialogid: "tips",                          //给其一个idstyle: "",                              //可以设置其样式content:"<h2>消息</h2>",         //内容（可以加html标签）onMouseLeave: function(){          //鼠标离开会关闭该tooltipdialogpopup.close(tips);}
});
$("#abc").click(function(){                 //点击后触发事件popup.open({                       //显示tooltipdialogpopup: tips,                   //显示哪个（上面定义的tips）around: dom.byId("abc"),     //在点击的附近显示（也可以是别的地方）orient:["below-alt","above-centered"] //显示位置（这个是左下）});
});

③更多内容，可以搜dojo tooltipdialog关键词

（66）弹窗dialog

插件：dijit/Dialog

参数：无

样式表：dijit/themes/claro/claro.css

其他：加载dojo前需要<script>vardojoConfig = { parseOnLoad: true }</script>

①效果

弹窗出现后，页面上的东西全部被遮蔽了（变灰，不能点击）；

②要求：

弹窗的html：

<div data-dojo-type="dijit/Dialog" data-dojo-id="ff" title="test">
测试用，测试用，测试用
</div>

解释：

《1》标签属性第一个用于设置类型是弹窗，第二个用于显示其时使用，第三个是弹窗标题。

《2》除弹窗外，body内至少还有一个<div>块（正常使用不会遇见这个问题）

③示例：（除html代码，自行添加）（这里调用了jquery）

<script src="jquery-1.9.1.min.js"></script>
<script>var dojoConfig = { parseOnLoad: true }</script>
<script src="dojo/dojo.js"></script>
<link href="dijit/themes/claro/claro.css" rel="stylesheet"></link><script>
require([ "dijit/Dialog"]);
$(document).ready(function(){$("#a").click(function(){ff.show();});
});
</script>

从零开始学_JavaScript_系列（14）——dojo(7)（饼图，BorderContainer，hashchange，弹窗）...相关推荐

从零开始学_JavaScript_系列（五）——dojo（基础，动画移动，重力模拟，动画合并，添加标签）
关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版如果需要讨论,请评论.或者站内信,我会尽快回复. (1)加载 ①首先 ...
从零开始学_JavaScript_系列（五）——dojo（基础，动画移动，重力模拟，动画合并，添加标签）...
关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版如果需要讨论,请评论.或者站内信,我会尽快回复. (1)加载 ①首先 ...
从零开始学_JavaScript_系列（21）——dojo(8)（手把手教你封装一个widget）
(73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的. 首先,什么是widget? 简单来说,就是一个 ...
从零开始学_JavaScript_系列（22）——dojo(9)（表单、JsonRest的post方法，widget的使用思路）...
(74)dojo的表单模块插件:dojo/dom-form 参数:domForm 解释: 当我们需要像服务器提交很多内容时(比如很多个input输入框,还有一些单选按钮.多选按钮),我们必须将这些输 ...
从零开始学_JavaScript_系列（九）——dojo(2)（AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅）
如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载, ...
从零开始学_JavaScript_系列（四）——jquery（基础，选择器，触发条件，动画，回调函数）...
jQuery语法 (1)引用jquery文件及下载库: http://jquery.com/download/ 下载 Download the compressed, production jQuer ...
从零开始学_JavaScript_系列（24）——查看对象属性，合并数组
(35)查看对象是否有某个属性(转) 来源: http://www.cnblogs.com/snandy/archive/2011/03/04/1970162.html 内容: 两种方式,但稍有区别 ...
从零开始学_JavaScript_系列（16）——CSSlt;3gt;（文本、对齐、圆角、盒模型、背景）...
注意,有些CSS属性对于低版本浏览器(典型的就是IE),可能不支持,所以在面向低版本浏览器的时候需要注意的说. 关于CSS属性的兼容性检测的网站:http://caniuse.com/ 部分图片来自网 ...
从零开始学_JavaScript_系列（六）——CSS的padding、margin、border属性超详细解释（图文）...
结论请看最后的图片关于定义: margin:层的边框以外留的空白 background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的空白 ...

从零开始学_JavaScript_系列（14）——dojo(7)（饼图，BorderContainer，hashchange，弹窗）...

从零开始学_JavaScript_系列（14）——dojo(7)（饼图，BorderContainer，hashchange，弹窗）...相关推荐

最新文章

热门文章