Форум

maximamus · #1 (**permalink**) 03.02.2015, 01:57

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

в чем суть - активный там всегда по центру, когда кликаешь на левый или правый таб, он становится активным и перемещается в центр, а тот что в центре был перемещается на место "кликнутого"

подскажите пожалуйста, как эту мысль реализовать, или хотя бы где капнуть информацию

рони · #2 (**permalink**) 03.02.2015, 02:09

maximamus,
http://alexchizhov.com/pwstabs/

Vlasenko Fedor · #3 (**permalink**) 03.02.2015, 02:14

рони, что-то я тебя не узнаю 35кб скриптов + jQuery ради одних табов

maximamus · #4 (**permalink**) 03.02.2015, 02:16

куча табов, а то что нужно нету)

рони · #5 (**permalink**) 03.02.2015, 02:19

Poznakomlus,

Vlasenko Fedor · #6 (**permalink**) 03.02.2015, 02:25

maximamus,
http://jsfiddle.net/vlasenkofedor/jLprM/
http://jsfiddle.net/vlasenkofedor/82kSU/

danik.js · #7 (**permalink**) 03.02.2015, 02:35

Кстати, случайно узнал что Array.apply не работает Firefox 3.6 - древность, но все же обидно

Цитата:

second argument to Function.prototype.apply must be an array

maximamus · #8 (**permalink**) 03.02.2015, 02:36

ооот .. елки ж))
еще раз попытаюсь обьяснить, что нужно

активный таб ВСЕГДА должен находится по центру
то есть таб1 - таб2(активный) - таб3

когда кликаем на третий, допустим, таб, то второй, что был активным, переходит на место третьего

меняются сами заголовки таба

думаю уловите мысль

рони · #9 (**permalink**) 03.02.2015, 03:03

maximamus,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div  {
     width: 200px;
     height: 100px;
     position:  absolute;
  }
  .tab1 {
    background: #FFCC00;
    left : 0
  }
  .tab2{
    background: #66CC66;
    left: 200px;
  }
  .tab3 {
     background: #3399CC;
     left: 400px;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var div = $("div"), temp = div[1];
       div.click(function() {
         var left = $(this).css("left");
         $(this).stop().animate({left: 200},1500);
         $(temp).stop().animate({left: left},1500);
         temp = this;
      });
});


  </script>
</head>

<body>
    <div class='tab1'></div>
    <div class='tab2'></div>
    <div class='tab3'></div>
</body>

</html>

рони · #10 (**permalink**) 03.02.2015, 03:20

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
     display: flex;
  }

  div  {
     width: 200px;
     height: 100px;
     overflow: hidden;
     margin: 0;
  }
  .tab1 {
    background: #FFCC00;
    width: 20px;
  }
  .tab2{
    background: #66CC66;
  }
  .tab3 {
     background: #3399CC;
     width: 20px;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var div = $("div"), temp = div[1];
       div.click(function() {
         var left = $(this).css("left");
         $(this).stop().animate({width: 200},1500);
         $(temp).not(this).stop().animate({width: 20},1500);
         temp = this;
      });
});


  </script>
</head>

<body>
    <div class='tab1'></div>
    <div class='tab2'></div>
    <div class='tab3'></div>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript