Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.08.2010, 18:51
Аспирант
Отправить личное сообщение для yngwie19 Посмотреть профиль Найти все сообщения от yngwie19
 
Регистрация: 24.10.2009
Сообщений: 39

Помогите с resize-ом столбцов таблыцы
Здравствуйте. У есть вот такая таблица
<html>
<head>
	<style>
		.tableview{
			border-collapse: collapse;
		}
		
		.cellview{
			border: 1px solid rgb(0,0,0);
		}
		.cellview-inner{
			height: 34px;
		}
		.kix-boxview{
			left: px;
			top: 9px;
		}
		.boxview-content{
			width: 141px;
			padding: 7px;
		}
		.lineview{
			height: 20px;
			direction: ltr;
			text-align: left;
		}
		.lineview-content{
			margin-left: 0px;
			padding-top: 0px;
		}
		.lineview-content SPAN{
			font-size: 11pt;
			font-family: Arial;
			color: rgb(0,0,0);
			background-color: transparent;
			font-weight: normal;
			font-style: normal;
			text-decoration: none;
			vertical-align: baseline;
		}
		div.cDrag div {
		background: repeat scroll 0 0 transparent;
		cursor:col-resize;
		display:block;
		float:left;
		height:24px;
		position:absolute;
		width:5px;
		border: 1px solid rgb(0,0,0);
		}
	</style>
</head>
	<body>
	<div class="cDrag" style="top: 27px;">
		<div style="height: 110px; left: 163px;"></div>
		<div style="height: 110px; left: 321px;"></div>
		<div style="height: 110px; left: 479px;"></div>
	</div>
		<table class="tableview">
			<tbody>
				<tr>
					<td class="cellview">
						<div class="cellview-inner">
							<div class="kix-boxview">
								<div class="boxview-content">
									<div class="lineview">
										<div class="lineview-content">
											<span>текст</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</td>
					<td class="cellview">
						<div class="cellview-inner">
							<div class="kix-boxview">
								<div class="boxview-content">
									<div class="lineview">
										<div class="lineview-content">
											<span>текст</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						</td>
					<td class="cellview">
						<div class="cellview-inner">
							<div class="kix-boxview">
								<div class="boxview-content">
									<div class="lineview">
										<div class="lineview-content">
											<span>текст</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
				</tr>
					<tr>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content">
												<span>текст</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</td>
							<td class="cellview">
								<div class="cellview-inner">
									<div class="kix-boxview">
										<div class="boxview-content">
											<div class="lineview">
												<div class="lineview-content">	
													<span>текст</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</td>
						<td class="cellview">
							<div class="cellview-inner">
								<div class="kix-boxview">
									<div class="boxview-content">
										<div class="lineview">
											<div class="lineview-content"></div>
										</div>
									</div>
								</div>
							</div>
						</td>
					</tr>
			</tbody>
		</table>
	</body>			
</html>

моя задача сделать столбцы этой таблицы перемещаемыми. Я вставил 3 вертикальных DIV-a, мне нужно написать код на JS, с помощью которого я мог бы мышкой схватить за этот DIV и таким образом изменить ширину столбца таблицы.
Помогите мне пожалуйста написать такой обработчик.
P.S: кстати почему-то в IE эти DIV-ы съезжают вправо, в остальных браузерах все ровно.
Ответить с цитированием
  #2 (permalink)  
Старый 26.08.2010, 21:03
Новичок
Отправить личное сообщение для inGray Посмотреть профиль Найти все сообщения от inGray
 
Регистрация: 03.08.2010
Сообщений: 230

Надеюсь вот это поможет
Ответить с цитированием
  #3 (permalink)  
Старый 26.08.2010, 21:29
Аспирант
Отправить личное сообщение для yngwie19 Посмотреть профиль Найти все сообщения от yngwie19
 
Регистрация: 24.10.2009
Сообщений: 39

inGray,
спасибо вам большое, я видел эту статью, пожалуйста помогите мне написать обработчик, буду Вам очень признателен. Или это очень сложно, то что я задумал?
Ответить с цитированием
  #4 (permalink)  
Старый 26.08.2010, 21:48
Новичок
Отправить личное сообщение для inGray Посмотреть профиль Найти все сообщения от inGray
 
Регистрация: 03.08.2010
Сообщений: 230

Нет, не очень сложно. Я с удовольствием помогу, если Вы приложите усилия и начнете писать обработчик. Если вопросы будут - задавайте
Ответить с цитированием
  #5 (permalink)  
Старый 26.08.2010, 22:16
Аспирант
Отправить личное сообщение для yngwie19 Посмотреть профиль Найти все сообщения от yngwie19
 
Регистрация: 24.10.2009
Сообщений: 39

inGray,
хорошо, спасибо Вам, я тогда через пару деньков к Вам в личку напишу можно?
Ответить с цитированием
  #6 (permalink)  
Старый 26.08.2010, 22:47
Аспирант
Отправить личное сообщение для yngwie19 Посмотреть профиль Найти все сообщения от yngwie19
 
Регистрация: 24.10.2009
Сообщений: 39

inGray,
извините, подскажите пожалуйста почему в IE дивы уезжают вправо? а в других браузерах все нормально.
Ответить с цитированием
  #7 (permalink)  
Старый 26.08.2010, 23:28
Новичок
Отправить личное сообщение для inGray Посмотреть профиль Найти все сообщения от inGray
 
Регистрация: 03.08.2010
Сообщений: 230

ИЕ - выдающийся браузер В нем все через жо ... майкрософт
Ответить с цитированием
  #8 (permalink)  
Старый 27.08.2010, 22:10
Аспирант
Отправить личное сообщение для yngwie19 Посмотреть профиль Найти все сообщения от yngwie19
 
Регистрация: 24.10.2009
Сообщений: 39

inGray,
вот посмотрите пожалуйста пример покороче
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
     div.cDrag div {
        cursor:col-resize;
        display:block;
        height:24px;
        position:absolute;
        width:5px;
		border: 1px solid rgb(0,0,0);
}
</style>
<script type="text/javascript">
    var inDrag = false;
    var splitter = null;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function moveSplitters() {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth).toString() + "px";
        }
    }
    function downHandler(e) {
        inDrag = true;
        splitter = (e.target) ? e.target : e.srcElement;
    }
    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var td = document.getElementById("resizeTbl").rows[0].cells[tdNo];
        var tdLeft = getTruthPos(td);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            td.style.width = newWidth.toString() + "px";
        }
        moveSplitters();
    }
    function moveHandler(e) {
        if (!inDrag) return true;
        splitter.style.left = (e.clientX - 2).toString() + "px";
    }
    function setResizeHandlers(e) {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
       registerHandler(document, "mouseup", upHandler);
registerHandler(document, "mousemove", moveHandler);
for (var i = 0; i < divs.length; i++) {
    registerHandler(divs[i], "mousedown", downHandler);
}
        moveSplitters();
    }
    
    
    registerHandler(window, "load", setResizeHandlers);
</script>
</head>
<body>
     <div class="cDrag" style="top: 27px;" id="splitters">
        <div style="height: 70px; left: 109px;" id="_0"></div>
        <div style="height: 70px; left: 212px;" id="_1"></div>
        <div style="height: 70px; left: 315px;" id="_2"></div>
         <div style="height: 70px; left: 418px;" id="_3"></div>
    </div>
    <table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;"  onselectstart="return false"
>
        <tr>
            <td>_____1.1_____</td>
            <td>_____1.2_____</td>
            <td>_____1.3_____</td>
            <td>_____1.4_____</td>
            <td>_____1.5_____</td>
        </tr>
        <tr>
            <td>_____2.1_____</td>
            <td>_____2.2_____</td>
            <td>_____2.3_____</td>
            <td>_____2.4_____</td>
            <td>_____2.5_____</td>
        </tr>
        <tr>
            <td>_____3.1_____</td>
            <td>_____3.2_____</td>
            <td>_____3.3_____</td>
            <td>_____3.4_____</td>
            <td>_____3.5_____</td>
        </tr>
    </table>
</body>
</html>

Единственное, что мне нужно сделать так, чтобы при изменении размера столбцов текст, в ячейке переносился по вертикали вниз. Можно ли так сделать?
Ответить с цитированием
  #9 (permalink)  
Старый 30.08.2010, 11:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от yngwie19
почему в IE дивы уезжают вправо?
Потому как "вёрстка" твоя изначально отображается в разных браузерах по-разному. Там разная даже величина ячеек в таблице...



Хотя размер текста (см.картинку) вроде одинаков... Отсюда и "смещение" ДИВов.
Ответить с цитированием
  #10 (permalink)  
Старый 30.08.2010, 11:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от yngwie19
при изменении размера столбцов текст, в ячейке переносился по вертикали вниз
Возможно вот это ЦСС свойство решит твою проблему...

http://www.htmlbook.ru/css/white-space.html
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 23:50
Помогите нубу Fongolcs Работа 34 19.05.2010 22:45
Помогите новичку с выпадающим списком interest Элементы интерфейса 5 19.05.2010 13:15
ширина столбцов таблицы после загрузки bis Events/DOM/Window 1 26.03.2010 18:35
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 01:05