发布于 2016-08-29 03:47:37 | 115 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
<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>