Предлагаю обсудить мое расширение для таблиц, которое позволяет изменять размер ячеек при помощи мыши, привычным для человека способом. Намеренно делал для современных браузеров.
Принцип работы: отслеживаем событие mousedown на таблице, если курсор попадает между ячеек, создаем индикацию возможности перемещения при помощи изменения стиля курсора, а при нажатии начинаем изменять размер, все просто.
Замечен глюк, с выделением текста, работаю над этим.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TD resizer</title>
<style>
table.mask.resizable td *{
visibility:hidden;
}
table.resizable td{
cursor:default ;
}
table.resizable.up-down {
cursor:s-resize;
}
table.resizable.left-right{
cursor:e-resize;
}
</style>
</head>
<body>
<table width='600' height='400' border='1' id='table' cellspacing='5' class="resizable" >
<tr>
<td class="resizable" width="200"><div style="width:100%;height:100%;background-color:red">1</div></td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>
Javascript - скриптовый язык, предназначенный для создания интерактивных веб-страниц.
Javascript не требуется компилировать, он подключается к HTML-странице и работает "как есть".
Javascript - НЕ java, а совсем другой язык. Он похоже называется, но не более того. У javascript есть свой стандарт: ECMAScript, спецификация которого находится на сайте в разделе стандарт языка.
Кто-то говорит, что javascript похож на Python, кто-то говорит о схожести с языками Ruby, Self. Правда заключается в том, что javascript сам по себе. Это действительно особенный язык.
</td>
</tr>
</table>
<script language="javascript">
var table_resizer = (function(){
var tags=' TABLE TR TBODY '
function check_tag( tag ){
return ( tags.indexOf(' '+tag+' ') >=0 );
}
var offsets = 7; // отступ для поиска ячейки
function get_method( ev ){
/*
На мгновение скрываем дочерние элементы в яйчейках таблицы и
ищем правило изменения размера.
resizable - класс ячейки, которая может изменять размер
*/
this.classList.add('mask');
var x = ev.pageX;
var y = ev.pageY;
var top = document.elementFromPoint( x , y-offsets );
var right = document.elementFromPoint( x+offsets , y );
var bottom = document.elementFromPoint( x , y+offsets );
var left = document.elementFromPoint( x-offsets , y );
var method = null;
this.classList.remove('mask');
if( top && bottom && top.tagName == 'TD' && bottom.tagName == 'TD' ) {
method = { rule:'up-down' };
if( top.classList.contains('resizable') ){
method.target = top;
}else if( bottom.classList.contains('resizable') ){
method.target = bottom;
}
}
if( right && left && right.tagName == 'TD' && left.tagName == 'TD' ) {
method = { rule:'left-right' };
if( right.classList.contains('resizable') ){
method.target = right;
}else if( left.classList.contains('resizable') ){
method.target = left;
}
}
if( method && method.rule && method.target ) return method;
return null;
}
// расширитель таблицы
return {
method:null,
// реализация изменения размера
onmousedown:function( ev ){
var tag = ev.target.tagName;
if( check_tag(tag) ){
var method = get_method.call(this,ev);
if( method ){
var data = {};
data.x = ev.pageX;
data.y = ev.pageY;
data.height = method.target.clientHeight;
data.width = method.target.clientWidth;
var move = function(ev){
switch( method.rule ){
case 'up-down':
method.target.style.height = (data.height + ev.pageY - data.y) + 'px';
break;
case 'left-right':
method.target.style.width = (data.width + ev.pageX - data.x) + 'px';
break;
}
}
var stop = function(ev){
document.removeEventListener( 'mousemove' , move, true );
document.removeEventListener( 'mouseup' , stop, true );
document.removeEventListener( 'selectstart' , select_start, true );
tag = method = data = stop = move = select_start= null;
}
var select_start = function(ev){
return false;
}
document.addEventListener( 'mousemove' , move, true ); // работаем с всплытием
document.addEventListener( 'mouseup' , stop, true );
document.addEventListener('selectstart',select_start,true);
}
}
},
// индикация возможности изменения
onmouseover:function( ev ){
var tag = ev.target.tagName;
if( check_tag(tag) ){
var method = get_method.call(this,ev);
if( method ){
this.classList.add( method.rule );
}
}else{
var c = this.classList;
c.remove('up-down');
c.remove('left-right');
}
},
}
})()
// поиск таблиц
function set_table_resizer(){
var tbs = document.querySelectorAll('TABLE.resizable');
for( var i=0,l=tbs.length; i<l; i++ ){
var tb = tbs[i];
for( var p in table_resizer ){ // расширение элемента
if( table_resizer.hasOwnProperty(p) ){
tb[p]=table_resizer[p];
}
}
}
}
window.onload=function(){
set_table_resizer();
}
</script>
</body>
</html>
