开发者社区> 零零水> 正文
阿里云
为了无法计算的价值
打开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>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SAP S/4HANA Cloud 上 in-app 和 side-by-side 两种扩展方式的介绍
SAP S/4HANA Cloud 上 in-app 和 side-by-side 两种扩展方式的介绍
69 0
Doppio: JVM的TypeScript实现 Node和浏览器下直接运行Java
上次我们介绍了node-jvm,一个很酷的Node.js上的JVM实现。它的代码比较直白,很容易理解。可惜的是它用CPS变换来实现每个opcode的handler。这种实现方式是编译器的常见做法。然而由于JavaScript没有尾递归优化,因此爆栈很容易发生。然后实现的细节上也有一点瑕疵,例如long类型、checkcast指令等。
101 0
【nodejs】让nodejs像后端mvc框架(asp.net mvc)一样处理请求--控制器和处理函数的注册篇(4/8)【controller+action】
文章目录 前情概要 前边的文章把一些基本的前置任务都完成了。接下就是比较重要的处理函数action是如何自动发现和注册的拉,也就是入口函数RouteHandler(也是我们的第一个express中间件)里面的一些细节。
802 0
【Java入门提高篇】Day25 史上最详细的HashMap红黑树解析
  当当当当当当当,好久不见,最近又是换工作,又是换房子,忙的不可开交,断更了一小段时间,最重要的一篇迟迟出不来,每次都犹抱琵琶半遮面,想要把它用通俗易懂的方式进行说明,确实有一定的难度,可愁煞我也,但自己挖的坑,哭着也要把它补上。
1116 0
Java网络编程与NIO详解4:浅析NIO包中的Buffer、Channel 和 Selector
Java NIO:Buffer、Channel 和 Selector转自https://www.javadoop.com/post/nio-and-aio 本文将介绍 Java NIO 中三大组件 Buffer、Channel、Selector 的使用。
1208 0
从零开始学_JavaScript_系列(六)——CSS的padding、margin、border属性超详细解释(图文)
结论请看最后的图片 关于定义: margin:层的边框以外留的空白 background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的空白 border:边框 content:内容   关于四个方向: 先上图: 测试:(有些结论是验证后copy现有的,因为纯测试不可能推出必然结果)
1819 0
Java 集合系列14之 Map总结(HashMap, Hashtable, TreeMap, WeakHashMap等使用场景)
概要 学完了Map的全部内容,我们再回头开开Map的框架图。   本章内容包括:第1部分 Map概括第2部分 HashMap和Hashtable异同第3部分 HashMap和WeakHashMap异同 转载请注明出处:http://www.cnblogs.com/skywang12345/admin/EditPosts.aspx?postid=3311126   第1部分 Map概括 (01) Map 是“键值对”映射的抽象接口。
926 0
+关注
零零水
主攻JS
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的函数
立即下载
Javascript中的对象
立即下载