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

Тема в разделе "Веб-дизайн", создана пользователем o_nix, 28 июн 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. o_nix

    o_nix

    Регистр.:
    7 ноя 2007
    Сообщения:
    1.073
    Симпатии:
    1.037
    Наипростейший 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=100HEIGHT=100%
    NAME="Google1" SCROLLING="auto">
    </
    IFRAME></th>
        <
    th scope="col" height="100%"><IFRAME SRC="http://google.com/" WIDTH=100HEIGHT=100%
    NAME="Google2" SCROLLING="auto">
    </
    IFRAME></th>
      </
    tr>
    </
    table>
    </
    body>
    </
    html>
    Как сделать разделитель между колонок перетаскиваемым ?? Тоесть чтобы можно было границу перетаскивать указателем мыши.

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

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

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

    Вложения:

    • primer.PNG
      primer.PNG
      Размер файла:
      58,9 КБ
      Просмотров:
      8
  2. Conwell

    Conwell

    Регистр.:
    23 мар 2009
    Сообщения:
    337
    Симпатии:
    177
    По моему можно обойтись без 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>
    Здесь граница очень даже перемещаемая :)

    А еще можно использовать вот такой скрипт:http://www.twinhelix.com/javascript/dragresize/
    пример использования: http://www.twinhelix.com/javascript/dragresize/demo/
     
    o_nix нравится это.
  3. o_nix

    o_nix

    Регистр.:
    7 ноя 2007
    Сообщения:
    1.073
    Симпатии:
    1.037
    Твой вариант работает даже в 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>
     
  4. 01ssv

    01ssv Постоялец

    Регистр.:
    29 янв 2008
    Сообщения:
    65
    Симпатии:
    5
Статус темы:
Закрыта.