介紹
這種效果說的就是類似狀態監視器一樣的應用。實時更新後臺或某個監控點的狀態消息。主要採用的技術就是定時器和滾動定位。
代碼示例
<%@ 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。
