Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.03.2014, 21:23
_0_ _0_ вне форума
Аспирант
Отправить личное сообщение для _0_ Посмотреть профиль Найти все сообщения от _0_
 
Регистрация: 10.05.2013
Сообщений: 56

Динамическая таблица
Предлагаю обсудить мое расширение для таблиц, которое позволяет изменять размер ячеек при помощи мыши, привычным для человека способом. Намеренно делал для современных браузеров.
Принцип работы: отслеживаем событие 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>
Ответить с цитированием
  #2 (permalink)  
Старый 07.03.2014, 23:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от _0_
Замечен глюк, с выделением текста, работаю над этим.
строка 153
<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 = null;
						}

						//var select_start = function(ev){
						 //	return false;
					   //	}

						document.addEventListener( 'mousemove' , move, true ); // работаем с всплытием
						document.addEventListener( 'mouseup' , stop, true );
					  //	document.addEventListener('selectstart',select_start,true);

return false					}
			}
			},

			// индикация возможности изменения
			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>
Ответить с цитированием
  #3 (permalink)  
Старый 08.03.2014, 12:09
_0_ _0_ вне форума
Аспирант
Отправить личное сообщение для _0_ Посмотреть профиль Найти все сообщения от _0_
 
Регистрация: 10.05.2013
Сообщений: 56

Сообщение от рони
строка 153
Однако... Спасибо, я на это внимания не обратил.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
динамическая таблица voyager1 jQuery 1 03.11.2013 17:06
Почему динамическая таблица создается без контента?.. deivan Firefox/Mozilla 3 15.08.2012 14:28
Динамическая таблица magicpro Элементы интерфейса 3 15.08.2011 09:47
Динамическая таблица результатов Anutik_pk Я не знаю javascript 0 29.05.2009 01:02
Изменение цвета ячейки (динамическая таблица) не по событию ImSWORDMASTER Элементы интерфейса 3 12.03.2009 21:21