Как сделать границу таблицы перетаскиваемой ?

Статус
В этой теме нельзя размещать новые ответы.
o_nix

o_nix

Хранитель порядка
Регистрация
7 Ноя 2007
Сообщения
1.070
Реакции
1.063
Наипростейший html код с двумя ифреймами
Каждый выводится в своей колонке.
PHP: 
<html>
<body>
<table width="100%" height="100%" border="0">
  <tr>
    <th scope="col" width="65%" height="100%"><IFRAME SRC="http://google.ru/" WIDTH=100% HEIGHT=100%
NAME="Google1" SCROLLING="auto">
</IFRAME></th>
    <th scope="col" height="100%"><IFRAME SRC="http://google.com/" WIDTH=100% HEIGHT=100%
NAME="Google2" SCROLLING="auto">
</IFRAME></th>
  </tr>
</table>
</body>
</html>

Как сделать разделитель между колонок перетаскиваемым ?? Тоесть чтобы можно было границу перетаскивать указателем мыши.

Подозреваю что нужен js в котором я мало что понимаю :D

Нужно самое простое решение - это для удобства юзания а не для красоты :)

Желательно маленький рабочий пример :)
 

Вложения

  • primer.PNG
    primer.PNG
    58,9 KB · Просмотры: 8
По моему можно обойтись без JS раньше часто использовали FRAME, сейчас про него все забыли. Попробуй вот такой код:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAME</title>
 </head>

 <frameset rows="*" cols="80,*">
  <FRAME SRC="http://google.ru/" WIDTH="100%" HEIGHT="100%" NAME="Google1" >
  <FRAME SRC="http://google.com/" WIDTH="100%" HEIGHT="100%" NAME="Google2">
 </frameset>

</html>
Здесь граница очень даже перемещаемая :)

А еще можно использовать вот такой скрипт:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Твой вариант работает даже в ie6 :)
Поскольку в нём меньше мусора и мне надо для мобильной оперы за основу будет взят он :)

Я ещё вот такой вариант на js нашол
Отлично работает в Opera но безбожно глючит в последнем Firefox, IE6 - вообще не в состоянии это отобразить :D

PHP: 
<HTML>
<body>
<script>d=document;g=function(a){return d.getElementById(a);}
var FF=d.all==null; /*isGecko*/
    var mDown=0;    //установки скрипта
    var posX;    //переменные скрипта
onload=function(){tdTab=[];tdTab[1]=g('tdTb1');tdTab[2]=g('tdTb2');tdTab[3]=g('tdTb3');
  if(IE=d.all&&!self.opera)g('divTdPt1').style.display='none';
  widPt3=IE?0:g('ptPt3').offsetWidth+2;
}

d.onmousedown=function(e){var t;
    if((t=FF?e.target:event.srcElement).className!="tdResize")return;    //отсечка лишнего
    mDown=t.id.charAt(8);
    posX=(FF?e.pageX:event.x+d.body.scrollLeft)-tdTab[mDown].offsetWidth;    //начальная точка захвата
    posTbl=(FF?e.pageX:event.x+d.body.scrollLeft)-g('tdResize'+mDown).offsetParent.offsetWidth;
}
d.onmousemove=function eMove(e){if(!mDown)return;
    tdTab[mDown].style.width=
      xx=Math.max(0,(FF?e.pageX:event.x+d.body.scrollLeft)-posX);
      g('tdResize'+mDown).style.width=IE?4:1;
      isPt3=(g('divTdSp'+mDown).offsetWidth>g('divTdTb'+mDown).offsetWidth)?widPt3:0;
      g('divTdPt'+mDown).style.display=IE||!isPt3?'none':'table';
      g('d2').innerHTML
        =g('divTdSp'+mDown).offsetWidth+' '
        +g('divTdTb'+mDown).offsetWidth+' '
        +isPt3
      g('divTdTb'+mDown).style.width=xx-isPt3;
      g('tdResize'+mDown).offsetParent.style.width=(Math.max(0,(FF?e.pageX:event.x+d.body.scrollLeft)-posTbl))+6;
    
}
d.onmouseup=function(e){mDown=0;}
d.ondragstart=d.onselectstart=function(){if(event.srcElement.className=="tdResize")event.returnValue=!1;}
</script>
<table class=tbR width="100%" height="100%" border="0"><tr>
  <td id=tdTb1 class=tdTab height="100%">
    <table id=divTdPt1 class=pt3 style=border:0 width="100%" height="100%"><tr><td style=border:0><IFRAME SRC="http://gogle.ru/" WIDTH=100% HEIGHT=100%
NAME="ван" SCROLLING="auto">
</IFRAME></td></tr></table>
  </td>
  <td id=tdResize1 class=tdResize width=2 bgcolor=996666></td>
  <td id=tdTb2 class=tdTab height="100%">
    <table id=divTdPt2 class=pt3 style=border:0 width="100%" height="100%"><tr><td style=border:0><IFRAME SRC="http://google.com/" WIDTH=100% HEIGHT=100%
NAME="ту" SCROLLING="auto">
</IFRAME></td></tr></table>
  </td>
</tr>
</table>
</body>
</html>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху