Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Раздвинуть ячейку при помощи мышки, Что-то вроде excel таблицы 
:(
    Опции темы
IZ@TOP
Дата 30.3.2005, 13:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Панда-бир!
****


Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73



Aliance, так я при помощи всего вместе делаю. Просто надо алгаритм продумать как следует. А в остальном вроде почти то что я хотел.

Кстате, как изменить свойства ячейки, чтобы при зажатии мыши и ее передвижении не выделялся текст в ней?

Еще с курсором. Если ты нзаметил, в коде есть такая строка:
Код

el_use.style.cursor    = 'e_resize';

Но она не работает... как быть?
Добавлено @ 13:53
И да, как узнать точную ширину ячейки если width не задан?


--------------------
Один из розовых плюшевых-всадников апокалипсиса... очень злой...

Семь кругов ада для новых элементов языка
Мои разрозненные мысли
PM MAIL WWW ICQ Skype GTalk   Вверх
Aliance
Дата 30.3.2005, 14:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(IZ @ 30.3.2005, 13:46)
И да, как узнать точную ширину ячейки если width не задан?

Лучше всего ее задавать. А вообще подобные темы поднимались, есть решения (ClientHeight, OffsetHeight...) но мы остановились на том, что лучшее - scrollHeight.
PM MAIL WWW ICQ Skype   Вверх
IZ@TOP
Дата 30.3.2005, 14:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Панда-бир!
****


Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73



Да, по поводу курсора. даже если так назначить в стилях что он e_resize, все равно он превратится в обычный и будет мигать часиками песочными. Как это можно исправить?

PS Новая версия скрипта:
Код

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Resample table test</title>
<style>
    * {
        color:#999999;
        font-family:Verdana;
        font-size:11px;
    }
    
    td {
        color:#999999;
    }

    a.resample {
        color:#666666;
        font-weight:normal;
        text-decoration:underline;
    }
    
    th.resample {
        color:#666666;
        font-weight:normal;
        background-image:url('resample-title.jpg');
        cursor:default;
        cursor:e-resize;
    }
    
    table.resample {
        border-color:#FFFFFF;
        border-style:solid;
        border-collapse:collapse;
        border-width:1px;
    }
    
    td {
        border-color:#F8F8F3;
    }

    div.resample {
        width:80%;
        height:300;
        overflow-x:scroll;
        overflow-y:auto;
        border-color:#CCCCCC;
        border-style:solid;
        border-collapse:collapse;
        border-width:1px;
        padding:1px;
    }
    
</style>
</head>
<body id="body1">
<div class="resample" id="table">
    <table class="resample" border="1" cellspacing="0" cellpadding="4">
     <tr id="retr" height="29" onMouseMove="el_resize(event);">
       <th id="1" class="resample" align="center"><a href="?asort=id" class="resample">ID</a></th>
       <th id="2" class="resample" align="left"><a href="?asort=name" class="resample">Название</a></th>
       <th id="3" class="resample" align="left"><a href="?asort=man" class="resample">Производитель</a></th>
            <th id="4" class="resample" align="right"><a href="?asort=price" class="resample">Цена</a></th>
            <th id="5" class="resample" align="right"><a href="?asort=ad,name" class="resample">AD</a></th>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">1</td>
       <td axis="1">АККПЛС/43-8567 с турбоподсосом</td>
       <td bgcolor="#F7F7F4">/Германика Паллас/</td>
       <td align="right">5 865.35</td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">2</td>
       <td>АККПЛС/43-8568 с турбоподсосом</td>
       <td bgcolor="#F7F7F4">/Германика Паллас/</td>
       <td align="right">5 666.58</td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">3</td>
       <td>Турбина ПТС84/887 трехскоростная с водонагревом </td>
       <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>
       <td align="right">3 458.00 </td>
       <td align="right"><input type="checkbox" name="checkbox" value="checkbox"></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">4</td>
       <td>Турбина ПТС84/888 трехскоростная с водонагревом </td>
       <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>
       <td align="right">28 645.56 </td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">5</td>
       <td>Турбина ПТС84/889 трехскоростная с водонагревом </td>
       <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>
       <td align="right">32 555.00 </td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     </table>
</div>
<script>

var el_actived    = false;
var el_use        = null;

var el_x = 0, el_y = 0, el_offset = 0, el_client = 0;

document.getElementById('retr').attachEvent('onmousedown', el_down);
document.getElementById('body1').attachEvent('onmouseup', el_up);

function el_down(e) {
    if(e.button != 1) return false;
    el_actived        = true;
    el_use            = e.srcElement;
    el_offset        = e.offsetX;
    el_client        = e.clientX;
    el_use.width    = e.offsetX;
    getPosition(el_use);
}

function el_up(e) {
    el_x    = 0;
    el_y    = 0;
    el_actived        = false;
}

function el_resize(e) {
    if(el_actived != true) return false;
    
    el_use.width    = (e.clientX - el_x);
    
    window.status = ("offset: " + e.offsetX + " / client: " + e.clientX);
    return true;
}

function getPosition(obj) { 
    while(obj) {
        el_x += obj.offsetLeft;
        el_y += obj.offsetTop;
        obj = obj.offsetParent;    
    }
}

</script>
</body>
</html>




--------------------
Один из розовых плюшевых-всадников апокалипсиса... очень злой...

Семь кругов ада для новых элементов языка
Мои разрозненные мысли
PM MAIL WWW ICQ Skype GTalk   Вверх
IZ@TOP
Дата 30.3.2005, 14:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Панда-бир!
****


Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73



Цитата(Aliance @ 30.3.2005, 15:04)
Лучше всего ее задавать. А вообще подобные темы поднимались, есть решения (ClientHeight, OffsetHeight...) но мы остановились на том, что лучшее - scrollHeight.

Кстате, не очень катит. Я хочу чтобы при увеличении ширины ячеек, раздвигалась и таблица. И при уменьшении таблица соответственно уменьшалась. А она уперается в край div'a и не хочет дальше автоматом увеличиваться smile
Добавлено @ 14:47
Кстате, scrollHeight подошел бы, но он показывает иногда значение меньше настоящей ширины ячейки smile


--------------------
Один из розовых плюшевых-всадников апокалипсиса... очень злой...

Семь кругов ада для новых элементов языка
Мои разрозненные мысли
PM MAIL WWW ICQ Skype GTalk   Вверх
Aliance
Дата 30.3.2005, 18:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(IZ @ 30.3.2005, 14:21)
Как это можно исправить?

Видимо он автоматом при событии заменяется. Нужно при отлове этого события его менять, а не в целом, думаю.

Цитата(IZ @ 30.3.2005, 14:41)
А она уперается в край div'a и не хочет дальше автоматом увеличиваться

Может стоит "поиграть" со св-вами clip и overflow

PM MAIL WWW ICQ Skype   Вверх
IZ@TOP
Дата 30.3.2005, 20:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Панда-бир!
****


Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73



Aliance, overflow вроде выставлен. А зачем нужен clip?


Цитата(Aliance @ 30.3.2005, 19:33)
Видимо он автоматом при событии заменяется. Нужно при отлове этого события его менять, а не в целом, думаю.

Как это сделать?


--------------------
Один из розовых плюшевых-всадников апокалипсиса... очень злой...

Семь кругов ада для новых элементов языка
Мои разрозненные мысли
PM MAIL WWW ICQ Skype GTalk   Вверх
Aliance
Дата 30.3.2005, 22:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Признаюсь чесно небыло времени твой скрипт изучить, пишу то, что думаю, не знаю, может у тебя так же:
- как мне кажется, ты сделал замену курсора просто в скрипте, надо же именно в функции, которая вызывается при твоем событии (onmousemove?). Эм... el_resize() - вроде она :-)
PM MAIL WWW ICQ Skype   Вверх
IZ@TOP
Дата 31.3.2005, 07:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Панда-бир!
****


Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73



Aliance, да я как только не делал. Не хочет курсор e_resize типа делаться. А вот help, hand пожалуйста...


--------------------
Один из розовых плюшевых-всадников апокалипсиса... очень злой...

Семь кругов ада для новых элементов языка
Мои разрозненные мысли
PM MAIL WWW ICQ Skype GTalk   Вверх
Aliance
Дата 31.3.2005, 12:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(IZ @ 30.3.2005, 14:41)
Кстате, scrollHeight подошел бы, но он показывает иногда значение меньше настоящей ширины ячейки

Может натолкнет на мыслю: http://forum.vingrad.ru/index.php?showtopi...=0&#entry351933

Цитата(IZ @ 31.3.2005, 07:52)
Aliance, да я как только не делал. Не хочет курсор e_resize типа делаться. А вот help, hand пожалуйста...

А, ну сразу бы сказал. Где-то у меня был файлик с примером обращения к курсорам, т.е. их типы. Может просто такого нет... Гляну - позже напишу.
PM MAIL WWW ICQ Skype   Вверх
Sardar
Дата 1.4.2005, 22:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



IZ@TOP звыняюсь что поздно, со вмеменем был нуль... smile

Вот универсальный код, позволяющий ресайзить несколько таблиц на странице. Просто задаём ряд с которым нужно работать, обычно это первый. В примере для яности сделал два. В коментах немного не нормативной лексики, уж Опера слишком достала...

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Resize table test</title>
<style>
    * {
        color:#999999;
        font-family:Verdana;
        font-size:11px;
    }
    
    a.resample {
        color:#666666;
        font-weight:normal;
        text-decoration:underline;
    }
    
    th.resample {
        color:#666666;
        font-weight:normal;
        background-image:url('resample-title.jpg');
        cursor:default; 
    }
    
    table.resample {
        border-color:#FFFFFF;
        border-style:solid;
        border-collapse:collapse;
        border-width:1px;
    }
    
    td {
        border-color:#F8F8F3;
        color:#999999;
        overflow-x: auto;
    }
    div.resample {
        width:80%;
        height:300;
        overflow-x:scroll;
        overflow-y:auto;
        border-color:#CCCCCC;
        border-style:solid;
        border-collapse:collapse;
        border-width:1px;
        padding:1px;
    }    
</style>

<script type="text/javascript">
<!--
//=====================- IE 5.0 Events Update -==================================
/**
* ИЕ не поддерживает W3C модель событий, вообще не традиционные события в ИЕ
* убогие на нет. Пишем своё, совместимое с W3C.
*/
function ensureAddEventListener(obj) {
 if(!obj.addEventListener) obj.addEventListener=myEventListener;
}
function myEventListener(name, func, dummyDirection) {
  if(!this.elisteners) this.elisteners={};
  if(!this.elisteners[name]) this.elisteners[name]=[];
  for(var i=0; i<this.elisteners[name].length; i++) if(this.elisteners[name][i][0]==func) return;
  var nm="mev_" + name+"_"+this.elisteners[name].length+"_"+Math.floor(Math.random()*1000);
  this[nm]=func;  
  this.elisteners[name].push([func, nm]);
  if(typeof(this["on"+name])=="function" && this["on"+name]!=myEventHandler) {
    var tfunc=this["on"+name];
    this["on"+name]=null;
    this.addEventListener(name, tfunc, false);
  }
  this["on"+name]=myEventHandler;
}
function myEventHandler(evt) {
  var ev=window.event? window.event: evt;
  if(ev && this.elisteners[ev.type])
   for(var i=0; i<this.elisteners[ev.type].length; i++) {
     this[this.elisteners[ev.type][i][1]](ev);
  }
}

//====================- Some funcs -==================
function getPosition(obj) {
  var x=0, y=0;
  while(obj) {
    x+=obj.offsetLeft;
    y+=obj.offsetTop;
    obj=obj.offsetParent;
  }
  return {x: x, y:y};
}

//=======================- Resizeble tbale =======================
/**
* Инициализируем заголовок таблицы, ставим события и т.д.  Передаётся
* параметром первый ряд таблицы(любой, которым ресайзим), а именно тег TR.
*/ 
function initResizebleTable(hdr) {
   ensureAddEventListener(hdr);
   hdr.addEventListener("mousemove", tableMouseMoveHandler, false);
   hdr.addEventListener("mouseup", tableMouseUpHandler, false);
   for(var i=0; i<hdr.cells.length; i++) {
     ensureAddEventListener(hdr.cells[i]);
     hdr.cells[i].addEventListener("mousemove", cellMouseMoveHandler, false);
     hdr.cells[i].addEventListener("mousedown", cellMouseDownHandler, false);
   }
}

//ловим по всему ряду, дабы не глючило с "летающими мышами"
function tableMouseMoveHandler(ev) {
    if(!this.moving||!this.movingTarget) return;
    var pos=getPosition(this);
    var tpos=getPosition(this.movingTarget);
    var wdt=((ev.clientX-pos.x)-tpos.x);

/** Двигать нужно все ячейки в колонке, иначе работать не будет */    
    var prnt=this.parentNode;
    while(prnt.tagName.toUpperCase()!="TABLE") prnt=prnt.parentNode;
    if(prnt==null || prnt.tagName.toUpperCase()!="TABLE") return; //мало ли кто как проглючит...
    for(var i=0; i<prnt.rows.length; i++)
      prnt.rows[i].cells[this.movingTarget.cellIndex].style.width=(wdt>=1)? wdt: 1;

/* так, опера проебала мозги с уменьшением таблицы. похоже это никак не
фиксится, как видишь в дебаг слое видно что ширина расчитывается правильно,
только опера на неё забила...
*/
//    document.getElementById("dbg1").innerHTML="<b>width: "+wdt+"</b>";
}

function tableMouseUpHandler() {
   this.moving=false;
   this.movingTarget=null;
}

function cellMouseMoveHandler(ev) {
// не советую использовать ev.offsetX, в Oпере работает через ж0пu, давая негативные числа
   var pos=getPosition(this);
   var ex=ev.clientX-pos.x;

/* Внимание: Опера глючит с курсорами, при смене на default крусор может
 остатся resize. Это пока никак не обходится... =/ */
    if(ex>this.offsetWidth-5) this.style.cursor="e-resize";
    else this.style.cursor="default";
//    document.getElementById("dbg").innerHTML="<b>Move parent: "+ex+", "+(this.offsetWidth-5)+"</b>";
    return true;
}

function cellMouseDownHandler(ev) {
    var pos=getPosition(this);
    var ex=ev.clientX-pos.x;

    if(ex>this.offsetWidth-5) {
      this.parentNode.moving=true;
      this.parentNode.movingTarget=this;
    } return true;
}
//-->
</script>

</head>
<body>

<div class="resample" id="table">
    <table class="resample" border="1" cellspacing="0" cellpadding="4">
     <tr id="retr" height="29">
       <th id="1" class="resample" align="center"><a href="?asort=id" class="resample">ID</a></th>
       <th id="2" class="resample" align="left"><a href="?asort=name" class="resample">Название</a></th>
       <th id="3" class="resample" align="left"><a href="?asort=man" class="resample">Производитель</a></th>
       <th id="4" class="resample" align="right"><a href="?asort=price" class="resample">Цена</a></th>
       <th id="5" class="resample" align="right"><a href="?asort=ad,name" class="resample">AD</a></th>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">1</td>
       <td axis="1">АККПЛС/43-8567 с турбоподсосом</td>
       <td bgcolor="#F7F7F4">/Германика Паллас/</td>
       <td align="right">5 865.35</td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     <tr id="tt"> <!-- по этому ряду тоже будем ресайзить, просто для примера -->
       <td align="center" bgcolor="#F7F7F4">2</td>
       <td>АККПЛС/43-8568 с турбоподсосом</td>
       <td bgcolor="#F7F7F4">/Германика Паллас/</td>
       <td align="right">5 666.58</td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">3</td>
       <td>Турбина ПТС84/887 трехскоростная с водонагревом </td>
       <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>
       <td align="right">3 458.00 </td>
       <td align="right"><input type="checkbox" name="checkbox" value="checkbox"></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">4</td>
       <td>Турбина ПТС84/888 трехскоростная с водонагревом </td>
       <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>
       <td align="right">28 645.56 </td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     <tr>
       <td align="center" bgcolor="#F7F7F4">5</td>
       <td>Турбина ПТС84/889 трехскоростная с водонагревом </td>
       <td bgcolor="#F7F7F4">/Атлас ДИЗЕЛЬ/</td>
       <td align="right">32 555.00 </td>
       <td align="right"><input name="checkbox" type="checkbox" value="checkbox" checked></td>
      </tr>
     </table>
</div>

<script>
//инициализируем первый ряд
initResizebleTable(document.getElementById("retr"));

/* инициализируем и второй ряд для примера, коду по барабану какие таблицы и
какие ряды используются, хоть всё на странице */
initResizebleTable(document.getElementById("tt"));
</script>

<div id="dbg"></div>
<div id="dbg1"></div>
</body>
</html>


Код закоментирован. Первая секция это поддержка W3C модели событий для ИЕ. Отлов нажатий и т.п. происхоидит на ячейках, а отлов onmousemove на ряду, этим мы сбережём нервы на событиях Оперы и вообще на медленных машинах. Отжатие(onmouseup) ловится тоже на ряду, хотя еще нужно и на всей таблице. Другими словами начни ресайз, затем тяни мышь к низу за ряд таблицы и там отпусти, затем вернись назад на ряд - ряд за тобой бегает, хотя кнопка отпущенна smile

Что не ясно - спрашивай.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Aliance
Дата 1.4.2005, 23:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Sardar, молодец. Замечательно получилось. Очень.


IZ@TOP, вот демо кода Sardarа:
http://www.sut.net.ru/scripts/javascript/s...zabletable.html

Это сообщение отредактировал(а) Aliance - 24.4.2005, 19:24
PM MAIL WWW ICQ Skype   Вверх
IZ@TOP
Дата 1.4.2005, 23:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Панда-бир!
****


Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73



Sardar, еще такая штука меня интересует - надо чтобы при увкелечении таблицы, ее ячеек, отображался скролл у дива. т.е. таблица расширялась и при этом уходила внутрь дива. С штукой как отпускание клавишы мыщи за границами строки я разобрался. Твой пример изучу чуть позже. Однако есть еще пожелание, чтобы при ресайзе всеже курсор был выставлен в e_resize. Под оперу можно не оптимизировать. Все равно будут с этим работать на ИЕ и только.
+ вам что хорошо что хватать можно только рядом с границей таблицы. это есть гуд. Но надо еще усовершенствовать этот механизм - если это возможно. Если невозможно, так и скажите, чтобы я не мучился.
Еще прикол в том что каждый раз при наведении на ряд пытается подгрузится картинка smile Прикол да и только.

PS Комменты классные smile

Такс, думаю еще вопросы у меня будут.

Кстате, тема как мне кажется заслуживает того чтобы отправится в FAQ. В ней очень много того чтобы пригодилось в жизненных ситуациях. Мне так кажется - поправтье если я ошибаюсь.


--------------------
Один из розовых плюшевых-всадников апокалипсиса... очень злой...

Семь кругов ада для новых элементов языка
Мои разрозненные мысли
PM MAIL WWW ICQ Skype GTalk   Вверх
Aliance
Дата 2.4.2005, 00:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(IZ @ 1.4.2005, 23:44)
Sardar, еще такая штука меня интересует - надо чтобы при увкелечении таблицы, ее ячеек, отображался скролл у дива. т.е. таблица расширялась и при этом уходила внутрь дива.


Задаем опр. размера ширину и высоту, ставим у div`а в style - overflow: auto;

Цитата(IZ @ 1.4.2005, 23:44)
С штукой как отпускание клавишы мыщи за границами строки я разобрался. Твой пример изучу чуть позже. Однако есть еще пожелание, чтобы при ресайзе всеже курсор был выставлен в e_resize.


Код

ссылка_на_элемент.style.cursor = "e-resize";


Это у тебя работает? Должно... Можно просто в CSS стилях прописать...

Цитата(IZ @ 1.4.2005, 23:44)
+ вам что хорошо что хватать можно только рядом с границей таблицы. это есть гуд. Но надо еще усовершенствовать этот механизм - если это возможно. Если невозможно, так и скажите, чтобы я не мучился.


Не понял :-)

Цитата(IZ @ 1.4.2005, 23:44)
Еще прикол в том что каждый раз при наведении на ряд пытается подгрузится картинка


Какая картинка? Не понял :-D

Цитата(IZ @ 1.4.2005, 23:44)
Кстате, тема как мне кажется заслуживает того чтобы отправится в FAQ. В ней очень много того чтобы пригодилось в жизненных ситуациях. Мне так кажется - поправтье если я ошибаюсь


Ну мне так не кажется, впервые вижу такую нужду. Скрипт канечно очень хороший, но не значит что он должен быть в FAQе, это мое имхо.
PM MAIL WWW ICQ Skype   Вверх
Sardar
Дата 2.4.2005, 01:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(Aliance @ 1.4.2005, 22:09)
Sardar, молодец. Замечательно получилось. Очень.

Aliance пасиб, просто были свободные 40 минут smile

Цитата(IZ @ 1.4.2005, 22:44)
надо чтобы при увкелечении таблицы, ее ячеек, отображался скролл у дива. т.е. таблица расширялась и при этом уходила внутрь дива.

Я так понял ты хочешь безгранично увеличивать таблицу, так что бы она вращалась в диве со скролами. Собстна геморой в том, что mousemove придётся отлавливать и на странице, может лучше отказатся от этого слоя, пусть юзер крутит таблицу в окне.


Цитата(IZ @ 1.4.2005, 22:44)
С штукой как отпускание клавишы мыщи за границами строки я разобрался.

Нужно сбросить флаг moving у ряда таблицы. Это не сложно, пробежавшись очисткой по всем рядам. Записывать текущий ряд в отдельную переменную нельзя(из-за возможной ошибки), мой код работает с неограниченным количеством таблиц, в них неограниченное количество рядов, которые изменяют размеры страницы. Это большое отличие от твоего кода smile

Цитата(IZ @ 1.4.2005, 22:44)
Однако есть еще пожелание, чтобы при ресайзе всеже курсор был выставлен в e_resize.

А оно так и есть или у тебя не меняется курсор в моём примере? Что за браузер?

Цитата(IZ @ 1.4.2005, 22:44)
Все равно будут с этим работать на ИЕ и только.

Верное решение забить на Оперу, сбережёшь кучу нервов smile . Пиши лучше под ИЕ и Мозиллу, это не сложно, но за то плюс на будущее.

Цитата(IZ @ 1.4.2005, 22:44)
Но надо еще усовершенствовать этот механизм - если это возможно.

Как усовершенствовать?

Цитата(IZ @ 1.4.2005, 22:44)
Еще прикол в том что каждый раз при наведении на ряд пытается подгрузится картинка smile Прикол да и только.

Какой-то глюк, в коде картинки не используются, ну разве что в стилях картинка в бекграунде стоит, я их из твоего примера взял.

Цитата(IZ @ 1.4.2005, 22:44)
Кстате, тема как мне кажется заслуживает того чтобы отправится в FAQ.

Не стоит, трудно что найти. ФАК должен быть кратким и доступным для поиска. А вот инфу достать и по полочкам разложить стоит, как будет время smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
IZ@TOP
Дата 2.4.2005, 18:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Панда-бир!
****


Профиль
Группа: Участник
Сообщений: 4795
Регистрация: 3.2.2003
Где: Бамбуковый лес

Репутация: 1
Всего: 73



Aliance, еслибы ты заглянул в код, то увидел, там все именно так стоит (это я про курсор и скролл в диве).

Sardar, А курсор превращается при движении мыши в обычный с мельканиями песочных часиков smile Браузер ИЕ 6.
Ладно, в остальном сам попробую разобраться.

Ну на счет фака, имел ввиду что в общем может такой код пригодится. Т.е. наверняка при некоторых обстаятельствах может понадобиться код перетаскивания зажатого мышкой объекта.



--------------------
Один из розовых плюшевых-всадников апокалипсиса... очень злой...

Семь кругов ада для новых элементов языка
Мои разрозненные мысли
PM MAIL WWW ICQ Skype GTalk   Вверх
Страницы: (3) Все 1 [2] 3 
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0780 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.