当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 写了几个类，希望对大家有用。

技术文章搜索

关键字

Javascript 中的 写了几个类，希望对大家有用。

---

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 99 ::
收藏到网摘: n/a

取得一定长度的内容，处理中文 Javascript MD4

1.日历

点击运行可以看到效果:<style type="text/css"> #oContainer { width: 193px; padding: 3px; background-color: menu; border-left: buttonhighlight 1px solid; border-top: buttonhighlight 1px solid; border-right: buttonshadow 1px solid; border-bottom: buttonshadow 2px solid; } .DateTable { font: 10pt; word-break: break-all; } .WeekTd, .BlankTd { font: 10pt; border: 1px solid menu; } .Today { font: 10pt; color: red; cursor: hand; position: relative; left: 1px; top: 1px; border-left: 1px solid dimgray; border-top: 1px solid dimgray; border-right: 1px solid white; border-bottom: 1px solid white; } .MonthTd { font: 10pt; font-family: webdings; cursor: hand; border: 1px solid menu; zmm: expression(onmouseenter = function() { style.color = 'red'; }, onmouseout = function() { style.color = ''; }); } .SelectTd { border: 1px solid menu; } .over { position: relative; cursor: hand; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; border-left: 1px solid buttonhighlight; border-top: 1px solid buttonhighlight; } .out { border-left: 1px solid buttonface; border-top: 1px solid buttonface; border-right: 1px solid buttonface; border-bottom: 1px solid buttonface; } .down { position: relative; left: 1px; top: 1px; border-left: 1px solid dimgray; border-top: 1px solid dimgray; border-right: 1px solid white; border-bottom: 1px solid white; } </style> <script language="javascript"> var oDate = new Object(); function DateClass(_container) { this.author = '51JS.COM-ZMM'; this.version = 'Web Calendar 1.0'; this.container = _container; this.weekArr = ['日', '一', '二', '三', '四', '五', '六']; this.dateArr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; this.showTable = function(_year, _month) { this.container.innerHTML = this.getDateTable(_year, _month); } this.getDateTable = function(_year, _month) { if (this.checkArgs(_year, _month)) { _year = parseInt(this.checkDate(_year, _month).split('-')[0]); _month = parseInt(this.checkDate(_year, _month).split('-')[1]); this.Thead = '<table cellpadding="5" cellspacing="0" class="DateTable">\n'; this.Thead += '<tr><td align="center" class="MonthTd" onclick="oDate.showTable(' + _year + ', ' + eval(_month-1) + ');">3</td>'; this.Thead += '<td align="center" colspan="5" class="SelectTd"><select onchange="oDate.showTable(options[selectedIndex].value, ' + _month + ');">'; for (var i=1900; i<2101; i++) this.Thead += '<option value="' + i + '" ' + ((_year==i) ? 'selected' : '') + '>' + i + '年</option>'; this.Thead += '</select><select onchange="oDate.showTable(' + _year + ', options[selectedIndex].value);">'; for (var i=1; i<13; i++) this.Thead += '<option value="' + i + '" ' + ((_month==i) ? 'selected' : '') + '>' + i + '月</option>'; this.Thead += '</select></td>'; this.Thead += '<td align="center" class="MonthTd" onclick="oDate.showTable(' + _year + ', ' + eval(_month+1) + ');">4</td></tr>\n'; this.Thead += '<tr>'; for (var i=0; i<this.weekArr.length; i++) this.Thead += '<td align="center" class="WeekTd">' + this.weekArr[i] + '</td>'; this.Thead += '</tr>\n'; this.Tbody = '<tr>'; this.dateArr[1] = (!this.checkYear(_year)) ? 28 : 29 ; for (var i=0; i<this.firstPos(_year, _month); i++) this.Tbody += '<td class="BlankTd"></td>'; for (var i=1; i<=this.dateArr[_month-1]; i++) { if (this.firstPos(_year, _month) == 0) { if (i!=1 && i%7==1) this.Tbody += '</tr>\n<tr>'; } else { if ((i+this.firstPos(_year, _month))%7==1) this.Tbody += '</tr>\n<tr>'; } if (!this.today(_year, _month, i)) { this.Tbody += '<td align="center" class="out" onmouseover="className=\'over\';" onmouseout="className=\'out\';" onmousedown="className=\'down\';" onclick="oDate.showDateStr(' + _year + ', ' + _month + ', ' + i + ', \'' + this.weekArr[new Date(_year, _month-1, i).getDay()] + '\');">' + i + '</td>'; } else { this.Tbody += '<td align="center" class="Today" onclick="oDate.showDateStr(' + _year + ', ' + _month + ', ' + i + ', \'' + this.weekArr[new Date(_year, _month-1, i).getDay()] + '\');">' + i + '</td>'; } } for (var i=0; i<6-this.lastPos(_year, _month); i++) this.Tbody += '<td class="BlankTd"></td>'; this.Tbody += '</tr>\n'; this.TFoot = '</table>\n'; this.Table = this.Thead + this.Tbody + this.TFoot; return this.Table; } else { return 'Arguments Error!'; } } this.firstPos = function(_year, _month) { return new Date(_year, _month-1, 1).getDay(); } this.lastPos = function(_year, _month) { return new Date(_year, _month-1, this.dateArr[_month-1]).getDay(); } this.checkYear = function(_year) { return ((_year % 4 == 0) && (_year % 100 != 0)) || (_year % 400 == 0); } this.today = function(_year, _month, _date) { return (new Date().getFullYear() == _year) && (new Date().getMonth() == _month-1) && (new Date().getDate() == _date); } this.checkArgs = function(_year, _month) { if (_year<1900 || _year>2100) return false; if (_month<0 || _month>13) return false; return (!isNaN(_year) && !isNaN(_month)); } this.checkDate = function(_year, _month) { if (_month<1) { _year --; _month = 12; } if (_month>12) { _year ++; _month = 1; } return _year + '-' + _month; } this.showDateStr = function(_year, _month, _date, _week) { window.alert(_year + '年' + _month + '月' + _date + '日 星期' + _week); } } window.onload = function() { oDate = new DateClass(self.oContainer); oDate.showTable(new Date().getFullYear(), new Date().getMonth()+1); } </script> <div id="oContainer"></div>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

2.简单的下拉菜单

点击运行可以看到效果:<style type="text/css"> #oData { display: none; } #oPanel { width: 120px; font-size: 12px; border: 1px solid menu; padding: 2px; position: absolute; display: none; } span { font-size: 12px; cursor: hand; } </style> <script language="javascript"> var oMenu = new Object(); function Menu(_data, _panel) { this.author = '51JS.COM-ZMM'; this.version = 'Menu 1.0'; this.data = _data; this.panel = _panel; this.drawMenu = function(_number, _offsetX, _offsetY) { var nodeArr = this.data.childNodes; var _handle = window.event.srcElement; for (var i=0; i<nodeArr.length; i++) { if (nodeArr[i].id == ('item_' + _number)) { with (this) { panel.innerHTML = nodeArr[i].innerHTML; panel.style.left = this.getPosition(_handle).left + _offsetX; panel.style.top = this.getPosition(_handle).top + _offsetY; return true; } } } return false; }; this.getPosition = function(_object) { var _top = _left = 0; var _root = document.body; while (_object != _root) { _top += _object.offsetTop; _left += _object.offsetLeft; _object = _object.offsetParent; } return { top: _top, left: _left }; }; this.showMenu = function(_number, _offsetX, _offsetY) { if (this.drawMenu(_number, _offsetX, _offsetY)) { this.panel.style.display = 'inline'; } else { window.alert('arguments error!'); } }; this.hideMenu = function() { this.panel.style.display = 'none'; }; } window.onload = function() { oMenu = new Menu(self.oData, self.oPanel); document.onclick = new Function('oMenu.hideMenu();'); } </script> <div id="oPanel"> </div> <div id="oData"> <menu id="item_0"> <li> 命令一 <li> 命令二 </menu> <menu id="item_1"> <li> 命令三 <li> 命令四 <li> 命令五 <li> 命令六 </menu> <menu id="item_2"> <li> 命令七 <li> 命令八 </menu> </div> <div align="center"> <span onmouseover="oMenu.showMenu(0, -2, 15);">菜单一</span> <span onmouseover="oMenu.showMenu(1, -2, 15);">菜单二</span> <span onmouseover="oMenu.hideMenu();">菜单三</span> <span onmouseover="oMenu.showMenu(2, -2, 15);">菜单四</span> </div>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

3. QQ菜单效果

点击运行可以看到效果:<style type="text/css"> #oContainer { width: 130px; height: 300px; border: 1px solid menu; } </style> <script language="javascript"> var oTime, oTencent = new Object(); function Tencent(_container) { this.author = '51JS.COM-ZMM'; this.version = 'Tencent 1.0'; this.container = _container; this.box = (function(_object) { var _box = document.createElement('DIV'); _box.id = 'TencentBox'; _box.style.width = _object.offsetWidth; _box.style.height = _object.offsetHeight; return _box; })(this.container); this.container.appendChild(this.box); this.toolRecord = new Object(); this.barCount = 0; this.drawTencent = function(_barList, _barHeight, _barDelay, _barAmount) { var _bool = true; this.barList = []; this.toolList = []; this.barHeight = _barHeight; this.barDelay = _barDelay; this.barAmount = _barAmount; for (var i in _barList) this.barCount ++; this.toolHeight = parseInt(this.box.style.height) - this.barCount * this.barHeight; for (var i in _barList) { var _bar = document.createElement('BUTTON'); _bar.style.width = this.box.style.width; _bar.style.height = _barHeight; _bar.style.textAlign = 'center'; _bar.value = i.toString(); _bar.hideFocus = true; _bar.attachEvent('onclick', this.doClick); this.box.appendChild(_bar); var _tool = document.createElement('DIV'); _tool.align = 'center'; _tool.style.width = this.container.offsetWidth - 2; _tool.style.overflowY = 'auto'; _tool.style.fontSize = '9pt'; _tool.style.height = (_bool) ? this.toolHeight : 1 ; _tool.style.display = (_bool) ? 'inline' : 'none' ; _tool.innerHTML = (function(_array) { var _html = new String(); var _bool = new Boolean(true); _bool = _bool & (typeof(_array[1]) == 'object'); _bool = _bool & (typeof(_array[2]) == 'object'); _bool = _bool & (typeof(_array[3]) == 'object'); if (_bool) { _bool = _bool & (_array[1].length == _array[2].length); _bool = _bool & (_array[1].length == _array[3].length); _bool = _bool & (_array[2].length == _array[3].length); if (_bool) { for (var j=0; j<_array[0]; j++) { _html += '<div style="padding-top: 5px;">'; _html += '<button onclick="window.open(\'' + _array[2][j] + '\', \'_blank\');" style="background-color: transparent;cursor: hand;border: 0px;">'; _html += '<img src="' + _array[1][j] + '"> ' + _array[3][j]; _html += '</button>'; _html += '</div>'; } } else { window.alert('arguments error!'); } } else { _bool = _bool & (typeof(_array[1]) == 'string'); _bool = _bool & (typeof(_array[2]) == 'string'); _bool = _bool & (typeof(_array[3]) == 'string'); if (!_bool) { _html += '<div style="padding-top: 5px;">'; _html += '<button onclick="window.open(\'' + _array[2] + '\', \'_blank\');" style="background-color: transparent;cursor: hand;border: 0px;">'; _html += '<img src="' + _array[1] + '"> ' + _array[3]; _html += '</button>'; _html += '</div>'; } else { window.alert('arguments error!'); } } return _html; })(_barList[i]); this.box.appendChild(_tool); this.barList[this.barList.length] = _bar; this.toolList[this.toolList.length] = _tool; if (_bool) { this.barCurrent = _bar; this.toolCurrent = _tool; _bool = false; } } } this.doClick = function() { var _eventBar = window.event.srcElement; with (oTencent) { if (!oTime && (barCurrent != _eventBar)) { for (var i=0; i<barList.length; i++) { if (barList[i] == _eventBar) { barCurrent = barList[i]; toolRecord = toolCurrent; toolCurrent = toolList[i]; toolCurrent.style.display = 'inline'; changeTool(); return true; } } } else { return false; } } } this.changeTool = function() { if (parseInt(this.toolCurrent.style.height) < this.toolHeight) { with (this.toolRecord.style) { height = ((parseInt(height) - this.barAmount) > 0) ? (parseInt(height) - this.barAmount) : 1 ; } with (this.toolCurrent.style) { height = ((parseInt(height) + this.barAmount) < this.toolHeight) ? (parseInt(height) + this.barAmount) : this.toolHeight ; } oTime = window.setTimeout('oTencent.changeTool()', this.barDelay); } else { this.toolRecord.style.display = 'none'; oTime = window.clearTimeout(oTime); } } } window.onload = function() { var _barList = new Object(); _barList['我的同学'] = [3, ['http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg'], ['1.htm', '2.htm', '3.htm'], ['华华', '南南', '振振']]; _barList['我的同事'] = [4, ['http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg'], ['4.htm', '5.htm', '6.htm', '7.htm'], ['妖妖', '星空网络', '蛋蛋', '冰雪']]; _barList['管理设置'] = [2, ['http://www.ctrl.net.cn/zmm/Sample.jpg', 'http://www.ctrl.net.cn/zmm/Sample.jpg'], ['8.htm', '9.htm'], ['修改密码', '个人资料']]; _barList['黑 名 单'] = [1, 'http://www.ctrl.net.cn/zmm/Sample.jpg', '10.htm', '松松']; var _barHeight = 21; var _barDelay = 10, _barAmount = 50; oTencent = new Tencent(self.oContainer); oTencent.drawTencent(_barList, _barHeight, _barDelay, _barAmount); } </script> <div id="oContainer"></div>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

4.对联效果

点击运行可以看到效果:<script language="javascript"> var oCouplet = new Object(); function Couplet(_top, _width, _height, _offset, _delay, _amount) { this.author = '51JS.COM-ZMM'; this.version = 'Couplet 1.0'; this.top = _top; this.width = _width; this.height = _height; this.offset = _offset; this.delay = _delay; this.amount = _amount; this.drawCouplet = function(_content) { this.content = _content; var _client = document.body.clientWidth; var _css = new String(); _css += 'top: ' + this.top + 'px;'; _css += 'width: ' + this.width + 'px;'; _css += 'height: ' + this.height + 'px;'; _css += 'position: absolute;'; _css += 'font-size: 12px;'; _css += 'border: 1px solid menu;'; _css += 'overflow: auto;' var _html = new String(); _html += '<div id="oCouplet_left" style="' + _css + 'left: ' + this.offset + 'px;">'; _html += this.content; _html += '</div>'; _html += '<div id="oCouplet_right" style="' + _css + 'left: ' + (_client - this.width - this.offset) + 'px;">'; _html += this.content; _html += '</div>'; return _html; } this.doScroll = function() { var _left = document.getElementById('oCouplet_left'); var _right = document.getElementById('oCouplet_right'); var _oTop = parseInt(_left.style.top); var _nTop = parseInt(document.body.scrollTop) + this.top; if (_oTop < _nTop) { if ((_nTop - _oTop) > 0) { _left.style.top = _right.style.top = _oTop + 1 + 'px'; var oTime = window.setTimeout('oCouplet.doScroll()', this.delay); } else { window.clearTimeout(oTime); } } else { if ((_oTop - _nTop) > 0) { _left.style.top = _right.style.top = _oTop - 1 + 'px'; var oTime = window.setTimeout('oCouplet.doScroll()', this.delay); } else { window.clearTimeout(oTime); } } } } window.onload = function() { var oTop = 50, oWidth = 120, oHeight = 250, oOffset = 20; var oDelay = 80, oAmount = 1; oCouplet = new Couplet(oTop, oWidth, oHeight, oOffset, oDelay, oAmount); with (document.body) { innerHTML += oCouplet.drawCouplet(self.oContent.innerHTML); onscroll = function() { oCouplet.doScroll(); } } } </script> <comment id="oContent"> <div align="center"> 对联内容 </div> </comment> <pre> </pre>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

5.图片轮换

点击运行可以看到效果:<script language="javascript"> var oInterval, oTime, oRotator = new Object(); function Rotator(_container, _width, _height, _array, _delay) { this.author = '51JS.COM-ZMM'; this.version = 'Rotator 1.0'; this.container = _container; this.width = _width; this.height = _height; this.box = (function(_container, _width, _height) { var _box = document.createElement('DIV'); _box.id = 'RotatorBox'; _box.align = 'center'; _box.style.width = _width; _box.style.height = _height; _box.style.border = '1px solid menu'; _box.style.overflow = 'hidden'; return _box; })(this.container, this.width, this.height); this.container.appendChild(this.box); this.sAmount = 0; this.drawRotator = function(_array, _delay) { this.delay = _delay; var _bool = (_array.length == 3); _bool = _bool & (_array[0].length == _array[1].length); _bool = _bool & (_array[0].length == _array[2].length); _bool = _bool & (_array[1].length == _array[2].length); if (_bool) { this.itemArr = []; this.panel = (function(_width, _height, _array) { var _panel = document.createElement('DIV'); _panel.style.position = 'absolute'; _panel.style.top = '0px'; _panel.style.left = '0px'; return _panel; })(this.width, this.height, _array); for (var i=0; i<_array[0].length; i++) { var _html = new String(); _html += '<table '; _html += 'width="' + _width + '" height="' + _height + '" '; _html += 'align="center" valign="middle" '; _html += 'cellpadding="0" cellspacing="0">'; _html += '<tr><td align="center">'; _html += '<a href="' + _array[0][i] + '">'; _html += '<img src="' + _array[1][i] + '" alt="' + _array[2][i] + '" border="0" '; _html += ' = window.setInterval(\'oRotator.doScroll()\', ' + this.delay + ');">'; _html += '</a></td></tr>'; _html += '</table>'; this.itemArr[this.itemArr.length] = _html; } this.box.appendChild(this.panel); this.setPanelContent(); } else { window.alert('arguments error!'); } } this.setPanelContent = function() { this.panel.innerHTML = this.itemArr.join(''); } this.doScroll = function() { with (oRotator) { if (sAmount < height) { sAmount ++; panel.style.pixelTop = parseInt(panel.style.pixelTop) - 1; oTime = window.setTimeout('oRotator.doScroll()', 10); } else { sAmount = 0; itemArr.push(itemArr.shift()); setPanelContent(); panel.style.pixelTop = parseInt(panel.style.pixelTop) + height; window.clearTimeout(oTime); } } } } window.onload = function() { var _width = 50, _height = 30, _delay = 3000; var _array = []; _array[_array.length] = ['http://www.51js.com/', 'http://www.iecn.net/', 'http://www.ctrl.com.cn/', 'http://www.163.com/', 'http://www.sina.com.cn/']; _array[_array.length] = ['http://bbs.51js.com/images/default/profile.gif', 'http://bbs.51js.com/images/default/email.gif', 'http://bbs.51js.com/images/default/pm.gif', 'http://bbs.51js.com/images/default/edit.gif', 'http://bbs.51js.com/images/default/quote.gif']; _array[_array.length] = ['无忧脚本', 'Web中文网', '开创互联', '网易', '新浪']; oRotator = new Rotator(self.oContainer, _width, _height); oRotator.drawRotator(_array, _delay); oInterval = window.setInterval('oRotator.doScroll()', _delay); } </script> <div id="oContainer" align="center"></div>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

6.listView类

点击运行可以看到效果:<style type="text/css"> #oContainer { width: 600px; height: 500px; border: 1px solid menu; margin: 0px; padding: 0px; overflow: hidden; } a { color: black; text-decoration: none; } a:hover { color: red; text-decoration: underline; } </style> <script language="javascript"> var oListView = new Object(); function listView(_container) { this.author = '51JS.COM-ZMM'; this.version = 'ListView 1.0'; this.container = _container; this.box = new Object(); this.headerWidth = 0; this.headerHeight = 20; this.itemWidth = 0; this.itemHeight = 0; this.rowsCount = 30; this.isResize = false; this.separate = new Object(); this.startPoint = 0; this.endPoint = 0; this.tempSeparate = new Object(); this.put_headerHeight = function(_height) { return _height; }; this.get_headerHeight = function() { return this.headerHeight; }; this.put_rowsCount = function(_count) { return _count; }; this.get_rowsCount = function() { return this.rowsCount; }; } listView.prototype = { boxInit : function() { this.container.innerHTML = new String(); this.box = (function(_object) { var _box = document.createElement('DIV'); with (_box) { id = 'ListViewBox'; style.width = _object.offsetWidth; style.height = _object.offsetHeight; style.margin = '0px'; style.padding = '0px'; attachEvent('oncontextmenu', new Function('return false;')); } return _box; })(this.container); this.headerPanel = (function(_width, _height) { var _headerPanel = document.createElement('DIV'); with (_headerPanel) { style.width = _width; style.height = _height; } return _headerPanel; })(this.box.style.width, this.headerHeight); this.headerPanel.appendChild(this.textPanel = (function() { var _textPanel = document.createElement('NOBR'); _textPanel.attachEvent('onmousemove', function() { with (oListView) { if (event.button == 1) { textPanel.style.cursor = 'E-resize'; tempSeparate.style.left = event.clientX - getPosition(box).left; tempSeparate.style.display = 'inline'; endPoint = event.clientX; isResize = true; } } }); return _textPanel; })()); this.rowItemPanel = (function(_width, _height) { var _itemPanel = document.createElement('DIV'); with (_itemPanel) { style.width = _width; style.height = _height; style.overflow = 'hidden'; } return _itemPanel; })(this.box.style.width, parseInt(this.box.style.height) - this.headerHeight); this.rowItemPanel.appendChild(this.dataPanel = (function() { var _dataPanel = document.createElement('NOBR'); with (_dataPanel) { style.cursor = 'default'; attachEvent('onclick', function() { document.selection.empty(); }); attachEvent('onselectstart', function() { document.selection.empty(); }); } return _dataPanel; })()); this.dataPanel.appendChild(this.tempSeparate = (function(_height) { var _tempSeparate = document.createElement('SPAN'); with (_tempSeparate) { style.width = '1px'; style.height = _height; style.border = '0px'; style.backgroundColor = 'black'; style.position = 'absolute'; style.display = 'none'; } return _tempSeparate; })(this.rowItemPanel.style.height)); this.box.appendChild(this.headerPanel); this.box.appendChild(this.rowItemPanel); this.container.appendChild(this.box); }, drawListView : function(_headers, _aligns) { this.boxInit(); this.drawHeader(_headers); this.drawRowItem(_headers, _aligns); document.attachEvent('onmouseup', this.finishResize); }, drawHeader : function(_headers) { this.headers = []; this.headerWidth = Math.round((parseInt(this.headerPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1; for (var i = 0; i < _headers.length; i ++) { var _header = document.createElement('SPAN'); with (_header) { style.width = this.headerWidth; style.height = this.headerHeight; style.overflow = 'hidden'; style.backgroundColor = 'buttonface'; style.borderLeft = '1px solid buttonhighlight'; style.borderTop = '1px solid buttonhighlight'; style.borderRight = '1px solid buttonshadow'; style.borderBottom = '1px solid buttonshadow'; style.textAlign = 'center'; style.fontSize = '12px'; style.fontFamily = 'Sans-Serif, Tahoma'; style.paddingTop = '1px'; innerText = _headers[i]; } this.textPanel.appendChild(_header); this.headers[this.headers.length] = _header; var _separate = this.getSeparate(true); this.textPanel.appendChild(_separate); this.headers[this.headers.length] = _separate; } var _last = document.createElement('SPAN'); with (_last) { style.width = this.headerPanel.offsetWidth; style.height = this.headerHeight; style.overflow = 'hidden'; style.backgroundColor = 'buttonface'; style.borderLeft = '1px solid buttonhighlight'; style.borderTop = '1px solid buttonhighlight'; style.borderRight = '1px solid buttonshadow'; style.borderBottom = '1px solid buttonshadow'; style.textAlign = 'center'; style.fontSize = '12px'; style.fontFamily = 'Sans-Serif, Tahoma'; style.paddingTop = '1px'; innerText = new String(); } this.textPanel.appendChild(_last); this.headers[this.headers.length] = _last; }, drawRowItem : function(_headers, _aligns) { this.items = []; this.itemWidth = Math.round((parseInt(this.rowItemPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1; this.itemHeight = parseInt(this.rowItemPanel.style.height) - 2; for (var i = 0; i < _headers.length; i ++) { var _item = document.createElement('SPAN'); with (_item) { style.width = this.itemWidth; style.height = this.itemHeight; style.overflow = 'hidden'; style.padding = '0px'; appendChild((function(_count, _width, _height, _align) { var _table = document.createElement('TABLE'); with (_table) { cellSpacing = 0; cellPadding = 0; style.width = _width; style.tableLayout = 'fixed'; } var _tbody = document.createElement('TBODY'); for (var i = 0; i < _count; i ++) { var _tableTr = document.createElement('TR'); var _tableTd = document.createElement('TD'); with (_tableTd) { align = _align; style.height = _height; style.borderBottom = '1px solid #c6c3c6'; style.fontSize = '12px'; style.paddingLeft = '3px'; setAttribute('onclick', function() { oListView.selectedRow(this.parentNode.rowIndex); }); setAttribute('ondblclick', function() { oListView.showSelected(this.parentNode.rowIndex); }); innerHTML = new String(' '); } _tableTr.appendChild(_tableTd); _tbody.appendChild(_tableTr); } _table.appendChild(_tbody); return _table; })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount), _aligns[i])); } this.dataPanel.appendChild(_item); this.items[this.items.length] = _item; var _separate = this.getSeparate(false); _separate.style.height = this.itemHeight; this.dataPanel.appendChild(_separate); this.items[this.items.length] = _separate; } var _last = document.createElement('SPAN'); with (_last) { style.width = this.rowItemPanel.offsetWidth; style.height = this.itemHeight; style.overflow = 'hidden'; style.padding = '0px'; appendChild((function(_count, _width, _height) { var _table = document.createElement('TABLE'); with (_table) { cellSpacing = 0; cellPadding = 0; style.width = '100%'; } var _tbody = document.createElement('TBODY'); for (var i = 0; i < _count; i ++) { var _tableTr = document.createElement('TR'); var _tableTd = document.createElement('TD'); with (_tableTd) { style.height = _height; style.borderBottom = '1px solid menu'; innerHTML = new String('<nobr style="height: ' + eval(_height-1) + ';overflow: hidden;"> </nobr>'); } _tableTr.appendChild(_tableTd); _tbody.appendChild(_tableTr); } _table.appendChild(_tbody); return _table; })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount))); } this.dataPanel.appendChild(_last); this.items[this.items.length] = _last; }, getSeparate : function(_resize) { var _separate = document.createElement('SPAN'); with (_separate) { style.width = _resize ? '2px' : '1px' ; style.height = this.headerHeight; style.border = '1px ' + (_resize ? 'inset white' : 'solid #c6c3c6'); style.overflow = 'hidden'; style.position = 'absolute'; if (_resize) { attachEvent('onmousedown', function() { with (oListView) { separate = event.srcElement; startPoint = event.clientX; } }); attachEvent('onmouseenter', function() { event.srcElement.style.cursor = 'E-resize'; }); } } return _separate; }, getPosition : function(_object) { var _top = _left = 0; var _root = document.body; while (_object != _root) { _left += _object.offsetLeft; _object = _object.offsetParent; } return { left: _left }; }, resizeItem : function() { with (this) { var _width, _movePart = endPoint - startPoint; for (var i = 0; i < headers.length; i ++) { if (headers[i] == separate) { var _bool = true; _bool = _bool && (_movePart < 0); _bool = _bool && (parseInt(headers[i - 1].style.width) < Math.abs(_movePart)); if (_bool) { headers[i - 1].style.width = 0; items[i - 1].style.width = 0; } else { _width = parseInt(headers[i - 1].style.width); headers[i - 1].style.width = _width + _movePart; _width = parseInt(items[i - 1].style.width); items[i - 1].style.width = _width + _movePart; _width = parseInt(items[i - 1].firstChild.style.width); items[i - 1].firstChild.style.width = _width + _movePart; var _table = items[i - 1].firstChild; for (var j = 0; j < _table.rows.length; j ++) { var _dataPanel = _table.rows[j].cells[0].children[0]; if (typeof _dataPanel != 'undefined') { _width = parseInt(_dataPanel.style.width); _dataPanel.style.width = _width + _movePart; } } } } } } }, finishResize : function() { with (oListView) { if (isResize) { isResize = false; textPanel.style.cursor = 'default'; tempSeparate.style.display = 'none'; resizeItem(); } } }, addListItem : function(_datas) { var _itemNum = _datas.length > this.rowsCount ? this.rowsCount : _datas.length ; for (var i = 0; i < _itemNum; i ++) { var n = 0; for (j = 0; j < this.items.length - 2; j ++) { if (j % 2 == 0) { var _dataPanel = document.createElement('NOBR'); var _tableCell = this.items[j].firstChild.rows[i].cells[0]; with (_dataPanel) { style.width = this.itemWidth; style.overflow = 'hidden'; style.textOverflow = 'ellipsis'; innerHTML = _datas[i][n]; } _tableCell.innerHTML = new String(); _tableCell.appendChild(_dataPanel); _tableCell.title = _datas[i][0]; n ++; } } } }, selectedRow : function(n) { for (var i = 0; i < this.items.length; i++) { if (i % 2 == 0) { var _table = this.items[i].firstChild; for (var j = 0; j < _table.rows.length; j ++) { var _dataPanel = _table.rows[j].cells[0].children[0]; if (typeof _dataPanel != 'undefined') { if (j == n) { _table.rows[j].cells[0].style.color = 'highlighttext'; _table.rows[j].cells[0].style.backgroundColor = 'highlight'; } else { _table.rows[j].cells[0].style.color = ''; _table.rows[j].cells[0].style.backgroundColor = ''; } var _children = _table.rows[j].cells[0].firstChild.children; this.changeChild(_children, j == n); } } } } }, changeChild : function(_children, _isSelected) { if (typeof _children != 'undefined') { for (var i = 0; i < _children.length; i ++) { if (_isSelected) { _children[i].style.color = 'highlighttext'; _children[i].style.backgroundColor = 'highlight'; } else { _children[i].style.color = ''; _children[i].style.backgroundColor = ''; } } } else { return false; } }, showSelected : function(n) { var _text = new String(); for (var i = 0; i < this.items.length - 2; i++) { if (i % 2 == 0) { var _table = this.items[i].firstChild; _text += this.headers[i].innerText + ':\n'; _text += _table.rows[n].cells[0].firstChild.innerHTML + '\n\n'; } } alert(_text); } } function initListView() { var _headers = []; _headers[_headers.length] = '标题'; _headers[_headers.length] = '内容'; _headers[_headers.length] = '时间'; _headers[_headers.length] = '管理'; var _aligns = []; _aligns[_aligns.length] = 'left'; _aligns[_aligns.length] = 'left'; _aligns[_aligns.length] = 'center'; _aligns[_aligns.length] = 'center'; oListView = new listView(self.oContainer); oListView.drawListView(_headers, _aligns); var _items = []; _items[_items.length] = ['标题一', '内容一', '2006-6-21 10:30:00', '<a href="update.aspx">编辑</a> <a href="delete.aspx">删除</a>']; _items[_items.length] = ['标题二', '内容二', '2006-6-21 14:20:12', '<a href="update.aspx">编辑</a> <a href="delete.aspx">删除</a>']; _items[_items.length] = ['标题三', '内容三', '2006-6-21 20:45:36', '<a href="update.aspx">编辑</a> <a href="delete.aspx">删除</a>']; oListView.addListItem(_items); } attachEvent('onload', initListView); </script> <center> <div id="oContainer"></div> </center>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

7.表单多文件上传类 [ASP]

点击运行可以看到效果:<% Class Upload Public Form, Finished Private bVBCrlf, bSeparate, formData, cFields, folderPath, itemCount, sErrors, sAuthor, sVersion Private itemStart(), itemLength(), dataStart(), dataLength(), itemName(), itemData(), extenArr() Private Sub Class_Initialize formData = Request.BinaryRead(Request.TotalBytes) Set Form = Server.CreateObject("Scripting.Dictionary") sAuthor = "51JS.COM-ZMM" sVersion = "Upload Class 1.0" End Sub Public Property Get ErrMessage ErrMessage = sErrors End Property Public Property Get Author Author = sAuthor End Property Public Property Get Version Version = sVersion End Property Public Property Let CheckFields(byVal sCheck) cFields = sCheck End Property Public Property Let Folder(byVal sFolder) folderPath = sFolder End Property Public Function Start Finished = False bVBCrlf = StrToByte(vbCrlf & vbCrlf) bSeparate = StrToByte("-----------------------------") itemCount = 0 sErrors = "" Call ItemPosition End Function Private Function ItemPosition Dim iStart, iLength : iStart = 1 Do Until InStrB(iStart, formData, bSeparate) = 0 iStart = InStrB(iStart, formData, bSeparate) + LenB(bSeparate) + 14 iLength = InStrB(iStart, formData, bSeparate) - iStart - 2 If Abs(iStart + 2 - LenB(formData)) > 2 Then ReDim Preserve itemStart(itemCount) ReDim Preserve itemLength(itemCount) itemStart(itemCount) = iStart itemLength(itemCount) = iLength itemCount = itemCount + 1 End If Loop Call FillItemValue End Function Private Function FillItemValue Dim dataPart, bInfor Dim iStart : iStart = 1 Dim iCount : iCount = 0 Dim iCheck : iCheck = StrToByte("filename") For i = 0 To itemCount - 1 ReDim Preserve itemName(iCount) ReDim Preserve itemData(iCount) ReDim Preserve extenArr(iCount) ReDim Preserve dataStart(iCount) ReDim Preserve dataLength(iCount) dataPart = MidB(formData, itemStart(i), itemLength(i)) iStart = InStrB(1, dataPart, ChrB(34)) + 1 iLength = InStrB(iStart, dataPart, ChrB(34)) - iStart itemName(iCount) = FormItemName(MidB(dataPart, iStart, iLength)) iStart = InStrB(1, dataPart, bVBCrlf) + 4 iLength = LenB(dataPart) - iStart + 1 If InStrB(1, dataPart, iCheck) > 0 Then bInfor = MidB(dataPart, 1, iStart - 5) extenArr(iCount) = FileExtenName(bInfor) If Mid(folderPath, Len(folderPath) - 1) = "/" Then itemData(iCount) = folderPath & GetRndName(6) & extenArr(iCount) Else itemData(iCount) = folderPath & "/" & GetRndName(6) & extenArr(iCount) End If dataStart(iCount) = itemStart(i) + iStart - 2 dataLength(iCount) = iLength Else extenArr(iCount) = "" itemData(iCount) = ByteToStr(MidB(dataPart, iStart, iLength)) dataStart(iCount) = "" dataLength(iCount) = "" End If iCount = iCount + 1 Next Call SaveUpload End Function Private Function FormItemName(byVal bName) FormItemName = ByteToStr(bName) End Function Private Function FileExtenName(byVal bInfor) Dim pStart, pLength, pContent, regEx pStart = InStr(1, ByteToStr(bInfor), "filename=" & Chr(34)) + 10 pLength = InStr(pStart, ByteToStr(bInfor), Chr(34)) - pStart pContent = Mid(ByteToStr(bInfor), pStart, pLength) If pContent = "" Then FileExtenName = "" Else Set regEx = New RegExp regEx.Pattern = "^.*(\.[^\.]*)$" regEx.Global = False regEx.IgnoreCase = True FileExtenName = regEx.Replace(pContent, "$1") Set regEx = Nothing End If End Function Private Function GetRndName(byVal sLen) Dim regEx, sTemp, arrFields, n : n = 0 Set regEx = New RegExp regEx.Pattern = "[^\d]*" regEx.Global = True regEx.IgnoreCase = True sTemp = regEx.Replace(Now, "") & "-" Set regEx = Nothing arrFields = Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", _ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", _ "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", _ "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", _ "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", _ "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", _ "Y", "Z") Randomize Do While n < sLen sTemp = sTemp & CStr(arrFields(61 * Rnd)) n = n + 1 Loop GetRndName = sTemp End Function Private Function SaveUpload Dim isValidate Dim filePath, oStreamGet, oStreamPut isValidate = CheckFile If isValidate Then For i = 0 To itemCount - 1 If (dataStart(i) <> "") And (dataLength(i) <> "") Then If dataLength(i) = 0 Then itemData(i) = "" Else filePath = Server.MapPath(itemData(i)) If CreateFolder("|", ParentFolder(filePath)) Then Set oStreamGet = Server.CreateObject("ADODB.Stream") oStreamGet.Type = 1 oStreamGet.Mode = 3 oStreamGet.Open oStreamGet.Write formData oStreamGet.Position = dataStart(i) Set oStreamPut = Server.CreateObject("ADODB.Stream") oStreamPut.Type = 1 oStreamPut.Mode = 3 oStreamPut.Open oStreamPut.Write oStreamGet.Read(dataLength(i)) oStreamPut.SaveToFile(filePath) oStreamGet.Close Set oStreamGet = Nothing oStreamPut.Close Set oStreamPut = Nothing End If End If End If Next Finished = True Call ItemToColl Else Finished = False End If End Function Private Function CheckFile Dim oBoolean : oBoolean = True If cFields = "" Then oBoolean = oBoolean And True Else For i = 0 To itemCount - 1 If extenArr(i) <> "" Then If InStr(1, Ucase(cFields), "|" & Ucase(Mid(extenArr(i), 2)) & "|") > 0 Then oBoolean = oBoolean And True Else sErrors = sErrors & "表单[ " & itemName(i) & " ]的文件格式错误！\n" & _ "支持的格式为：" & Replace(Mid(cFields, 2, Len(cFields) - 1), "|", " ") & "\n\n" oBoolean = oBoolean And False End If End If Next End If CheckFile = oBoolean End Function Private Function CreateFolder(byVal sLine, byVal sPath) Dim oFso Set oFso = Server.CreateObject("Scripting.FileSystemObject") If Not oFso.FolderExists(sPath) Then Dim regEx Set regEx = New RegExp regEx.Pattern = "^(.*)\\([^\\]*)$" regEx.Global = False regEx.IgnoreCase = True sLine = sLine & regEx.Replace(sPath, "$2") & "|" sPath = regEx.Replace(sPath, "$1") If CreateFolder(sLine, sPath) Then CreateFolder = True Set regEx = Nothing Else If sLine = "|" Then CreateFolder = True Else Dim sTemp : sTemp = Mid(sLine, 2, Len(sLine) - 2) If InStrRev(sTemp, "|") = 0 Then sLine = "|" sPath = sPath & "\" & sTemp Else Dim Folder : Folder = Mid(sTemp, InStrRev(sTemp, "|") + 1) sLine = "|" & Mid(sTemp, 1, InStrRev(sTemp, "|") - 1) & "|" sPath = sPath & "\" & Folder End If oFso.CreateFolder sPath If CreateFolder(sLine, sPath) Then CreateFolder = True End if End If Set oFso = Nothing End Function Function ParentFolder(byVal sPath) Dim regEx Set regEx = New RegExp regEx.Pattern = "^(.*)\\[^\\]*$" regEx.Global = True regEx.IgnoreCase = True ParentFolder = regEx.Replace(sPath, "$1") Set regEx = Nothing End Function Private Function StrToByte(byVal sText) For i = 1 To Len(sText) StrToByte = StrToByte & ChrB(Asc(Mid(sText, i, 1))) Next End Function Private Function ByteToStr(byVal sByte) Dim oStream Set oStream = Server.CreateObject("ADODB.Stream") oStream.Type = 2 oStream.Mode = 3 oStream.Open oStream.WriteText sByte oStream.Position = 0 oStream.CharSet = "gb2312" oStream.Position = 2 ByteToStr = oStream.ReadText oStream.Close Set oStream = Nothing End Function Private Function ItemToColl For i = 0 To itemCount - 1 If Not Form.Exists(itemName(i)) Then Form.Add itemName(i), itemData(i) End If Next End Function Private Sub Class_Terminate Form.RemoveAll Set Form = Nothing End Sub End Class If Request.ServerVariables("REQUEST_METHOD") = "POST" Then Rem 建立上传类实例 Set oUpload = New Upload Rem 指定允许上传文件的类型 oUpload.CheckFields = "|GIF|BMP|JPG|" Rem 指定上传文件所存储的相对路径 oUpload.Folder = "51JS.COM-ZMM/UploadFile" Rem 开始上传处理 oUpload.Start If oUpload.Finished Then Rem 上传成功，显示上传信息 Dim sHtml : sHtml = "" sHtml = sHtml & "<center>" sHtml = sHtml & "<div style=""width: 600px;height: 500px;font-size: 10pt;border: 1px solid highlight;overflow: auto;"" align=""left"">" sHtml = sHtml & "<center style=""font-size: 15pt;color: red;"">上传表单数据</center> " sHtml = sHtml & "标题： " & oUpload.Form("P_title") & " " sHtml = sHtml & "类型： " & oUpload.Form("P_assort") & " " sHtml = sHtml & "小图： 服务器端路径：<a href=""" & oUpload.Form("P_image_s") & """ target=""_blank"">" & oUpload.Form("P_image_s") & "</a> <img src=""" & oUpload.Form("P_image_s") & """> " sHtml = sHtml & "中图： 服务器端路径：<a href=""" & oUpload.Form("P_image_m") & """ target=""_blank"">" & oUpload.Form("P_image_m") & "</a> <img src=""" & oUpload.Form("P_image_m") & """> " sHtml = sHtml & "大图： 服务器端路径：<a href=""" & oUpload.Form("P_image_b") & """ target=""_blank"">" & oUpload.Form("P_image_b") & "</a> <img src=""" & oUpload.Form("P_image_b") & """> " sHtml = sHtml & "介绍： " & oUpload.Form("P_content") & " " sHtml = sHtml & "</div>" sHtml = sHtml & "</center>" Response.Write sHtml Response.End Else Rem 上传失败，显示错误信息 Call ShowMsg(oUpload.ErrMessage, Request.ServerVariables("SCRIPT_NAME")) End If Rem 对话框提示函数 Function ShowMsg(byVal sText, byVal sTarget) Dim sScript : sScript = "" sScript = sScript & "<script language=""javascript"">" & vbCrlf & _ "window.alert('" & sText & "');" & vbCrlf & _ "window.location.replace('" & sTarget & "');" & vbCrlf & _ "</script>" Response.Write sScript Response.End End Function End If %> <html> <head> <title>多文件、表单混合上传类</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> body { margin: 0px; border: 0px; font-size: 10pt; } table { border-collapse: collapse; font-size: 10pt; } td { font-size: 10pt; } </style> <script language="javascript"> function formCheck(_form) { for (var i = 0; i < _form.elements.length; i ++) { if (_form.elements[i].value == '') { window.alert('请将表单填写完整，提交失败！'); return false; } } return true; } </script> </head> <body> <form action="<%=Request.ServerVariables("SCRIPT_NAME")%>" method="post" enctype="multipart/form-data" onsubmit="return formCheck(this);"> <table width="400" align="center" cellpadding="2" cellspacing="0" border="1" rules="box"> <tr height="26"> <td colspan="2" align="center" style="font: 12pt;color: red;">上传功能测试 </td> </tr> <tr valign="top"> <td height="30" style="padding-top:3px;">标题：</td> <td><input type="text" name="P_title" size="20" autocomplete="off"></td> </tr> <tr valign="top"> <td height="30" style="padding-top:3px;">类型：</td> <td> <select name="P_assort"> <option value="电子">电子</option> <option value="医疗">医疗</option> </select> </td> </tr> <tr valign="top"> <td height="30" style="padding-top:3px;">小图：</td> <td><input type="file" name="P_image_s" onkeydown="return false;" oncontextmenu="return false;" onpaste="return false;" ondragenter="return false;"></td> </tr> <tr valign="top"> <td height="30" style="padding-top:3px;">中图：</td> <td><input type="file" name="P_image_m" onkeydown="return false;" oncontextmenu="return false;" onpaste="return false;" ondragenter="return false;"></td> </tr> <tr valign="top"> <td height="30" style="padding-top:3px;">大图：</td> <td><input type="file" name="P_image_b" onkeydown="return false;" oncontextmenu="return false;" onpaste="return false;" ondragenter="return false;"></td> </tr> <tr> <td height="30" colspan="2" style="padding-top:3px;">介绍：</td> </tr> <tr> <td height="30" colspan="2" valign="top"> <textarea name="P_content" cols="50" rows="5"></textarea> </td> </tr> <tr> <td colspan="2" valign="top" align="center"> <input type="submit" value="提交"> <input type="reset" value="重置"> </td> </tr> </table> </form> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

8.TabPage类

点击运行可以看到效果:<style type="text/css"> body { background-color: menu; } #oContainer { width: 500px; height: 400px; } </style> <script language="javascript"> var oTabPage = new Object(); var TabPage = function(_container) { this.author = '51JS.COM-ZMM'; this.version = 'TabPage 1.0'; this.container = _container; this.barHeight = 22; this.put_barHeight = function(_height) { return _height; }; this.get_barHeight = function() { return this.barHeight; }; this.guideWidth = 82; this.put_guideWidth = function(_width) { return _width; }; this.get_guideWidth = function() { return this.guideWidth; }; } TabPage.prototype = { boxInit : function() { this.box = (function(_object) { var _box = document.createElement('DIV'); with (_box) { style.width = _object.offsetWidth; style.height = _object.offsetHeight; style.padding = '0px'; } return _box; })(this.container); this.box.appendChild(this.bar = (function(_height) { var _bar = document.createElement('DIV'); with (_bar) { align = 'left'; style.width = '100%'; style.height = _height; style.padding = '0px'; attachEvent('oncontextmenu', new Function('return false')); attachEvent('onselectstart', new Function('return false')); } return _bar; })(this.barHeight)); this.box.appendChild(this.page = (function(_height) { var _page = document.createElement('DIV'); with (_page) { style.width = '100%'; style.height = _height; style.fontSize = '12px'; style.textAlign = 'left'; style.padding = '5px'; style.borderLeft = '1px solid white'; style.borderRight = '2px outset'; style.borderBottom = '2px outset'; style.backgroundColor = 'menu'; } return _page; })(parseInt(this.box.style.height) - this.barHeight)); this.container.appendChild(this.box); }, addTabPage : function(_guides, _contents) { this.guides = []; this.contents = []; for (var i = 0; i < _contents.length; i ++) { var _page = document.createElement('DIV'); with (_page) { style.display = (i == 0) ? 'inline' : 'none' ; innerHTML = _contents[i].innerHTML; _contents[i].removeNode(true); } this.page.appendChild(_page); this.contents[this.contents.length] = _page; } this.bar.appendChild((function(_object) { var _table = document.createElement('TABLE'); with (_table) { width = '100%'; cellSpacing = 0; cellPadding = 0; style.tableLayout = 'fixed'; } var _tbody = document.createElement('TBODY'); var _tr = document.createElement('TR'); for (var i = 0; i < _guides.length; i ++) { var _td = document.createElement('TD'); with (_td) { vAlign = 'bottom'; style.width = _object.guideWidth; if (i != 0) style.borderBottom = '1px solid white'; appendChild (_object.guides[_object.guides.length] = (function(n) { var _guide = document.createElement('SPAN'); with (_guide) { style.width = _object.guideWidth - 2; style.fontSize = '12px'; style.textAlign = 'center'; style.cursor = 'default'; style.paddingTop = '3px'; style.borderLeft = '1px solid white'; style.borderTop = '1px solid white'; style.backgroundColor = 'menu'; if (i == 0) { style.height = _object.barHeight; _contents[i].style.display = 'inline'; } else { style.height = _object.barHeight - 4; } innerText = _guides[i]; attachEvent('onselectstart', new Function('return false;')); attachEvent('onmousedown', function() { with (oTabPage) { for (var j = 0; j < guides.length; j ++) { if (guides[j] == event.srcElement) { guides[j].style.height = _object.barHeight; guides[j].nextSibling.style.height = _object.barHeight; guides[j].parentNode.style.borderBottom = '0px'; contents[j].style.display = 'inline'; } else { guides[j].style.height = _object.barHeight - 4; guides[j].nextSibling.style.height = _object.barHeight - 4; guides[j].parentNode.style.borderBottom = '1px solid white'; contents[j].style.display = 'none'; } } } }); } return _guide; })(i)); } _td.appendChild((function(o, n) { var _line = document.createElement('SPAN'); with (_line) { style.width = '2px'; style.height = (n == 0) ? o.barHeight : o.barHeight - 4 ; style.borderLeft = '1px solid dimgray'; style.borderRight = '1px solid black'; } return _line; })(_object, i)); _tr.appendChild(_td); } _tr.appendChild((function() { var _surplus = document.createElement('TD'); with (_surplus) { style.width = '100%'; style.borderBottom = '1px solid white'; innerHTML = ' '; } return _surplus; })()); _tbody.appendChild(_tr); _table.appendChild(_tbody); return _table; })(this)); } } attachEvent('onload', function() { var _guideArr = ['基本信息', '划分类别', '简单介绍']; var _contentArr = [Content1, Content2, Content3]; oTabPage = new TabPage(self.oContainer); oTabPage.boxInit(); oTabPage.addTabPage(_guideArr, _contentArr); }); </script> <center> <div id="oContainer"></div> </center> <comment id="Content1"> 标题： <input> 来源： <input> </comment> <comment id="Content2"> 分类： <select><option>计算机网络</option><option>计算机软件</option></select> </comment> <comment id="Content3"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </comment>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

取得一定长度的内容，处理中文 Javascript MD4

评论 (0) All

登陆 还没注册？

设为首页 | 加入收藏 | 关于我们 | 联系我们 | 广告服务 | 网站地图 | 友情链接 | 在线帮助 | 免责声明 Sitemap W3school

如果您觉得本站不错，别忘了告诉您的同学和同事哟 ^_^

欢迎各网站转载我们的原创，转载时请注明出处。

All copyright is reserved by 软晨网（RuanChen.com）