开发者社区> 零零水> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 5/5更新。BorderContainer自适应在本地时正常使用的方法,请查看原文代码之前那一段话 (60)创建一个饼形图 比较简单的标签声明法:(只需要修改数据即可) ①首先,加载dojo文件和样式文件:(关于style.css,需要根据自己找到的路径修改,或者使用我从官网上找到的链接:https://dojotoolkit.org/documentation/tutorial
+关注继续查看

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属性,如果一个,那么就用default
					type: 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;

 

子块若干(这里列一个):

<div id="m" data-dojo-type=" dijit/layout/ContentPane">

 

然后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的id
  var 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({				//新建一个tooltipdialog
	id: "tips",							//给其一个id
	style: "",								//可以设置其样式
	content:"<h2>消息</h2>",			//内容(可以加html标签)
	onMouseLeave: function(){			//鼠标离开会关闭该tooltipdialog
		popup.close(tips);
	}
});
$("#abc").click(function(){					//点击后触发事件
	popup.open({						//显示tooltipdialog
			popup: 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_系列(22)——dojo(9)(表单、JsonRest的post方法,widget的使用思路)
(74)dojo的表单模块 插件:dojo/dom-form 参数:domForm 解释:        当我们需要像服务器提交很多内容时(比如很多个input输入框,还有一些单选按钮、多选按钮),我们必须将这些输入框的值变成一个对象(也许还要转为一个json字符串),在post的时候将其传递给服务器;          假如一个一个读过去,这也太傻了。所以这就是dom-for
1430 0
从零开始学_JavaScript_系列(21)——dojo(8)(手把手教你封装一个widget)
(73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的。   首先,什么是widget? 简单来说,就是一个dom结点,比如像这样: <div>     这是一个dom结点 </div>   为什么需要widget呢? 很简单,比如,我们想在这样一个地方:
1913 0
从零开始学_JavaScript_系列(18)——dojo(7)(dojo中类的继承)
关于声明及封装一个类,请查阅我的上一篇博客: http://blog.csdn.net/qq20004604/article/details/51456809 (72)继承一个类 在(71)的基础上,我们继续。 我们之前声明了一个类add,那么计算时,仅仅只有add显然是不够的。我们还需要minus(减去)。 那么我们重新建一个文件minus,然后把add的内容复制过
1120 0
从零开始学_JavaScript_系列(十一)——dojo(4)(GRID表格进阶:格式化、style、数据获取、多重排序、点击事件)
如果没有阅读过gridx表格的基本运用教程,建议先阅读这篇(4天点击量已经接近5k): http://blog.csdn.net/qq20004604/article/details/51170919 里面很详细的说明了gridx表格的创建,常用模块,和基本使用。 如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article
1790 0
从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)
如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo。 关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论、或者站内信,我会尽快回复。
2605 0
从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)
关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论、或者站内信,我会尽快回复。   (1)加载 ①首先,先设置   <script>      //替代使用data-dojo-config,我们创建一个dojoConfig对象(是个设置)在我们调
2640 0
js: 实现一个cached缓存函数计算结果
js: 实现一个cached缓存函数计算结果
22 0
js实现页面滑动到最底部触发内容加载
js实现页面滑动到最底部触发内容加载
19 0
通过JS实现Json序列化操作
分享JS实现的JSON序列化操作
13 0
js实现css、addClass、removeClass和toggleClass
JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性css(name,function(index,value)):在所有匹...
684 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载