2010-08-01
最近做项目时,公司要在Ext的ToolBar中添加个滚动公告栏,不但要向上滚动,而且可以向左滚动。滚动方向可以由用户选择。
以下是在Ext平台下运行的,UICtrl.StatusBarNoNotice 返回个TextItem。可以直接添加到Toolbar的Items中,进行测试。
- UICtrl.StatusBarNoNotice = function() {
- var noticeArray = [];
- // [id,title]
- noticeArray.push(["100", "部门周例会会议通知1"]);
- noticeArray.push(["200", "部门周例会会议通知2"]);
- noticeArray.push(["300", "部门周例会会议通知3"]);
- noticeArray.push(["400", "部门周例会会议通知4"]);
- noticeArray.push(["500", "部门周例会会议通知5"]);
- var total = noticeArray.length;// 公告数量
- // 公告栏
- var noticeTxt = new Ext.Toolbar.TextItem({
- id : 'noticeTxt',
- text : noticeArray[0][1]
- });
- if (noticeArray.length == 0)
- noticeArray.push(["-1", "今天没有公告"]);
- /***************************************************************************
- * 公告栏 start
- */
- var marqueeInterval = new Array();
- var marqueeId = 0;
- var marqueeDelay = 3000;// 停顿时间 (ms)
- var marqueeHeight = 16; // 公告栏高度
- var marqueeWidth = 300;// 公告栏宽度
- var dir = Sys.agentInfo.noticeScrollDir;// 滚动方向up/left up为向上滚动,left为向左滚动
- var separator = " ● ";
- if (dir == "left")
- leafscroll();
- else
- upscroll();
- /**
- * 向左滚动
- */
- function leafscroll() {
- var str = "";
- if (noticeArray[0][0] == "-1")
- return;
- for (var i = 0; i < noticeArray.length; i++) {
- str += separator;
- var item = '<a οnclick="new UICtrl.ShowNoNotice('
- + String(noticeArray[i][0]) + ')" style="cursor:pointer;">'
- + noticeArray[i][1] + '</a>';
- str += item;
- }
- noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
- + marqueeHeight
- + 'px;width:'
- + marqueeWidth
- + 'px;"><div style="float:left;width: 800%;"><div id="notice1" style="float:left;">'
- + str + '</div><div id="notice2" style="float:left;">' + str
- + '</div></div></div>';
- if (document.getElementById("noticeTxt")) {
- var noticeText = document.getElementById("noticeTxt");
- noticeText.innerHTML = noticeDiv;
- } else
- noticeTxt.text = noticeDiv;
- var mytask = new Ext.TaskMgr.start({
- run : function() {
- var noticeText = document.getElementById("noticeTxt");
- // noticeText.innerHTML = noticeDiv;
- var dir1 = Sys.agentInfo.noticeScrollDir;
- if (dir1 == "up") {
- noticeText.innerHTML = "";
- Ext.TaskMgr.stop(mytask);
- upscroll();
- return;
- }
- var marqueeBox = document.getElementById("marqueeBox");
- var notice1 = document.getElementById("notice1");
- var notice2 = document.getElementById("notice2");
- if (notice2.offsetWidth - marqueeBox.scrollLeft <= 0)
- marqueeBox.scrollLeft -= notice1.offsetWidth
- else {
- marqueeBox.scrollLeft++;
- }
- marqueeBox.onmouseover = function() {
- Ext.TaskMgr.stop(mytask);
- };
- marqueeBox.onmouseout = function() {
- Ext.TaskMgr.start(mytask);
- };
- },
- interval : 10
- });
- }
- /**
- * 向上滚动
- */
- function upscroll() {
- var str = "<a οnclick='javascript:new UICtrl.ShowNoNotice("
- + noticeArray[0][0] + ");' style='cursor:pointer;'>"
- + noticeArray[0][1] + "</a>";
- if (noticeArray[0][0] == "-1")
- str = noticeArray[0][1];
- else
- marqueeId++;
- noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
- + marqueeHeight + 'px;width:' + marqueeWidth + 'px;"><div>'
- + str + '</div></div>';
- if (document.getElementById("noticeTxt")) {
- var noticeText = document.getElementById("noticeTxt");
- noticeText.innerHTML = noticeDiv;
- } else
- noticeTxt.text = noticeDiv;
- marqueeInterval[0] = new Ext.TaskMgr.start({
- run : function() {
- var dir1 = Sys.agentInfo.noticeScrollDir;
- var noticeText = document.getElementById("noticeTxt");
- if (dir1 == "left") {
- noticeText.innerHTML = "";
- Ext.TaskMgr.stop(marqueeInterval[0]);
- Ext.TaskMgr.stop(marqueeInterval[1]);
- leafscroll();
- return;
- }
- var marqueeBox = document.getElementById("marqueeBox");
- if (noticeArray[marqueeId])
- var str = "<a οnclick='javascript:new UICtrl.ShowNoNotice("
- + noticeArray[marqueeId][0]
- + ");' style='cursor:pointer;'>"
- + noticeArray[marqueeId][1] + "</a>";
- if (noticeArray[0][0] == "-1")
- str = noticeArray[0][1];
- marqueeId++;
- if (marqueeId >= noticeArray.length)
- marqueeId = 0;
- if (marqueeBox.childNodes.length == 1) {
- var nextLine = document.createElement('DIV');
- nextLine.innerHTML = str;
- nextLine.style.width = marqueeWidth;
- marqueeBox.appendChild(nextLine);
- } else {
- marqueeBox.childNodes[0].innerHTML = str;
- marqueeBox.appendChild(marqueeBox.childNodes[0]);
- marqueeBox.scrollTop = 0;
- }
- marqueeBox.onmouseover = function() {
- Ext.TaskMgr.stop(marqueeInterval[0])
- }
- marqueeBox.onmouseout = function() {
- Ext.TaskMgr.start(marqueeInterval[0]);
- }
- // /marqueeBox.onclick = function() {
- // /new UICtrl.ShowNoNotice();
- // /}
- if (marqueeInterval[1])
- Ext.TaskMgr.stop(marqueeInterval[1]);
- marqueeInterval[1] = new Ext.TaskMgr.start({
- run : function() {
- var marqueeBox = document.getElementById("marqueeBox");
- marqueeBox.scrollTop++;
- if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {
- Ext.TaskMgr.stop(marqueeInterval[1]);
- }
- },
- interval : 20
- });
- },
- interval : 3000
- });
- }
- return [noticeTxt];
- }
今天下班没有什么干,于是将上面的Ext的滚动公告功能做了一些修改。做成一个纯JS的版本。
以下是js的版本代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>滚动公告(横向/纵向)</title>
- </head>
- <body style="margin: 5px;">
- <div>
- <button οnclick="left()">横向滚动</button>
- <button οnclick="up()">纵向滚动</button>
- </div>
- <div id="noticeBar">notice</div>
- <hr>
- <script type="text/javascript" language="javascript">
- var noticeArray = [];
- //[id,title]
- noticeArray.push( [ "100", "部门周例会会议通知1" ]);
- noticeArray.push( [ "200", "部门周例会会议通知2" ]);
- noticeArray.push( [ "300", "部门周例会会议通知3" ]);
- noticeArray.push( [ "400", "部门周例会会议通知4" ]);
- noticeArray.push( [ "500", "部门周例会会议通知5" ]);
- var total = noticeArray.length;// 公告数量
- if (noticeArray.length == 0)
- noticeArray.push( [ "-1", "今天没有公告" ]);
- /*******************************************************************************
- * 公告栏 start
- */
- var marqueeInterval = new Array();
- var marqueeId = 0;
- var marqueeDelay = 3000;// 停顿时间 (ms)
- var marqueeHeight = 16; // 公告栏高度
- var marqueeWidth = 300;// 公告栏宽度
- var dir = 'left';// 滚动方向up/left up为向上滚动,left为向左滚动
- var separator = " <font color='#999999'>●</font> ";
- if (dir == "left")
- leafscroll();
- else
- upscroll();
- /**
- * 向左滚动
- */
- function leafscroll() {
- var str = "";
- if (noticeArray[0][0] == "-1")
- return;
- for ( var i = 0; i < noticeArray.length; i++) {
- str += separator;
- var item = '<a οnclick="alert(' + String(noticeArray[i][0])
- + ')" style="cursor:pointer;">' + noticeArray[i][1] + '</a>';
- str += item;
- }
- noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
- + marqueeHeight
- + 'px;width:'
- + marqueeWidth
- + 'px;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;"><div style="float:left;width: 800%;"><div id="notice1" style="float:left;">'
- + str + '</div><div id="notice2" style="float:left;">' + str
- + '</div></div></div>';
- var noticeBar = document.getElementById("noticeBar");
- noticeBar.innerHTML = noticeDiv
- marqueeInterval[3] = window.setInterval(LeftStartFn, 10);
- function LeftStartFn() {
- if (dir == "up") {
- noticeBar.innerHTML = "";
- window.clearInterval(marqueeInterval[3]);
- upscroll();
- return;
- }
- var marqueeBox = document.getElementById("marqueeBox");
- var notice1 = document.getElementById("notice1");
- var notice2 = document.getElementById("notice2");
- if (notice2.offsetWidth - marqueeBox.scrollLeft <= 0)
- marqueeBox.scrollLeft -= notice1.offsetWidth
- else {
- marqueeBox.scrollLeft++;
- }
- marqueeBox.onmouseover = function() {
- window.clearInterval(marqueeInterval[3])
- };
- marqueeBox.onmouseout = function() {
- marqueeInterval[3] = window.setInterval(LeftStartFn, 10)
- };
- }
- }
- function upscroll() {
- var str = "<a οnclick='javascript:new UICtrl.ShowNoNotice("
- + noticeArray[0][0] + ");' style='cursor:pointer;'>"
- + noticeArray[0][1] + "</a>";
- if (noticeArray[0][0] == "-1")
- str = noticeArray[0][1];
- else
- marqueeId++;
- noticeDiv = '<div id="marqueeBox" style="overflow:hidden;height:'
- + marqueeHeight
- + 'px;width:'
- + marqueeWidth
- + 'px;margin:5px;border:2px solid #1d953f;font-size:12px;color:red;"><div>'
- + str + '</div></div>';
- var noticeBar = document.getElementById("noticeBar");
- noticeBar.innerHTML = noticeDiv
- marqueeInterval[0] = window.setInterval(upStartFn, 3000);
- function upStartFn() {
- if (dir == "left") {
- noticeBar.innerHTML = "";
- window.clearInterval(marqueeInterval[0]);
- window.clearInterval(marqueeInterval[1]);
- leafscroll();
- return;
- }
- var marqueeBox = document.getElementById("marqueeBox");
- if (noticeArray[marqueeId])
- var str = "<a οnclick='javascript:alert("
- + noticeArray[marqueeId][0]
- + ");' style='cursor:pointer;'>"
- + noticeArray[marqueeId][1] + "</a>";
- if (noticeArray[0][0] == "-1")
- str = noticeArray[0][1];
- marqueeId++;
- if (marqueeId >= noticeArray.length)
- marqueeId = 0;
- if (marqueeBox.childNodes.length == 1) {
- var nextLine = document.createElement('DIV');
- nextLine.innerHTML = str;
- nextLine.style.width = marqueeWidth;
- marqueeBox.appendChild(nextLine);
- } else {
- marqueeBox.childNodes[0].innerHTML = str;
- marqueeBox.appendChild(marqueeBox.childNodes[0]);
- marqueeBox.scrollTop = 0;
- }
- marqueeBox.onmouseover = function() {
- window.clearInterval(marqueeInterval[0])
- }
- marqueeBox.onmouseout = function() {
- marqueeInterval[0] = window.setInterval(upStartFn, 3000);
- }
- if (marqueeInterval[1])
- window.clearInterval(marqueeInterval[1]);
- marqueeInterval[1] = window.setInterval(scrollFn, 10);
- }
- function scrollFn() {
- var marqueeBox = document.getElementById("marqueeBox");
- marqueeBox.scrollTop++;
- if (marqueeBox.scrollTop % marqueeHeight == (marqueeHeight - 1)) {
- window.clearInterval(marqueeInterval[1]);
- }
- }
- }
- function left() {
- dir = 'left';
- }
- function up() {
- dir = 'up';
- }
- </script>
- </body>
- </html>