Dojo JavaScript实现消息滚动出现效果

介绍

这种效果说的就是类似状态监视器一样的应用。实时更新后台或某个监控点的状态消息。主要采用的技术就是定时器和滚动定位。

 

代码示例

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import "../js/dijit/themes/tundra/tundra.css";
@import "../css/main.css";
</style>

</head>
<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
		style="width: 100%; height: 100%; margin: 0px; padding: 0px; ">
	<div data-dojo-type="dojox.layout.ContentPane"
		data-dojo-props="region:'top'"
		style="height:38px;width:100%;background-color: black; color: white;font-family: arial;font-size: 28px;">
		消息监视器
	</div>
	<div data-dojo-type="dojox.layout.ContentPane"
		data-dojo-props="region:'center', splitter: true"
		style="width: 100%; height: 100%; border: none; padding: 0px; background-color: #ffffff;">
		<div style="width: 99%; margin: -3px 0px -2px 2px;">
			<button id="start_btn" data-dojo-type="dijit.form.Button"
				class="menu_button" type="button">开始</button>
			<button id="stop_btn" data-dojo-type="dijit.form.Button"
				class="menu_button" type="button">停止</button>
			<button id="clear_btn" data-dojo-type="dijit.form.Button"
				class="menu_button" type="button">清除</button>
		</div>
		<div data-dojo-type="dijit.layout.BorderContainer"
			data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true"
			style="width: 100%; height: 100px;">
			<div data-dojo-type="dojox.layout.ContentPane" style="font-size: 16px;"
				data-dojo-props="splitter:true,region:'center'">
				<!-- 为了每次都定位到新加的消息,需要对消息所在的容器设定style -->
				<div id="container" style="height: 100%;overflow: auto;width: 100%;"></div>
			</div>
		</div>
	</div>
</div>

<script>
		dojoConfig = {
			isDebug : false,
			parseOnLoad : true,
			async : true
		};
	</script>
	<script type="text/javascript" src="../js/dojo/dojo.js"></script>
	<script>
		require([ "dojo/parser", "dijit/form/Button", 
				"dijit/layout/BorderContainer", "dojox/layout/ContentPane",
				"dojox/timing/_base"]);
	</script>
	<script>
		require(
				[ "dojo/ready", 
				  "dijit/registry",
				  "dojo/dom",
				  "dojo/on"
				  ],
				function(ready, registry, dom, on) {
					ready(function() {
						var container = dom.byId("container");
						
						//创建定时器
						var t = new dojox.timing.Timer();
						
						//当点击开始时,触发定时器,更新消息
						on(registry.byId("start_btn"), "click", function(e){
							t.setInterval(2000);
							t.onTick = update;
							t.start();
						});
						
						//当点击停止时,停止定时器
						on(registry.byId("stop_btn"), "click", function(e){
							t.stop();
						});
						
						//当点击清除时,将所有的消息都清空
						on(registry.byId("clear_btn"), "click", function(e){
							container.innerHTML = "";
						});
						
						var update = function(){
							var content = container.innerHTML;
							container.innerHTML = content + 
									"<div>A new message arrived at " + 
									Date() +
									"</div>";
							
							//确保每次都定位到新加的消息
							container.scrollTop = container.scrollHeight;
						};
					});
				});
	</script>
</body>
</html>

总结

从这个例子可以看出,做前端应用,往往需要同时掌握HTML、JavaScript、CSS。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值