Раздвижные панели активируются ссылками - PullRequest
Новая
       20

Раздвижные панели активируются ссылками

1 голос
/ 22 июня 2009

У меня есть три ссылки. Я хочу, чтобы каждая ссылка управляла отдельным DIV (я думаю, внутри контейнера DIV). Поэтому, когда вы открываете страницу, на которой установлен DIV-1, вы можете щелкнуть ссылку для DIV-2 или 3, и представление будет скользить или прокручиваться к этому DIV.

Как это возможно в jQuery? Я попытался прокрутить лево, но безрезультатно.

Заранее спасибо,

Stu

1 Ответ

0 голосов
/ 22 июня 2009

Используйте метод .animate () на полях первой дочерней ячейки.

Класс "ячейка" состоит из 200х200 ящиков, все плавающие слева. Идентификатор «Контейнер» также 200х200, с переполнением скрытого. Вы можете назначить три ссылки для анимации поля слева от первого элемента div, имеющего класс «cell», который будет перемещать все три влево или вправо в зависимости от требуемой суммы.

Ссылка 1 -> Первый размер поля слева = 0;
Ссылка2 -> Первая граница поля слева = -200;
Ссылка 3 -> Первая граница поля слева = - 400;

Обновление: следующий код был обновлен в ответ на последующие вопросы в комментариях.

Я заключил клетки в другое деление. Этот div находится внутри контейнера. Вместо того, чтобы манипулировать левым полем первой ячейки, мы собираемся манипулировать левым полем div, внутри которого находятся эти ячейки. Дайте этому шанс - я попробовал и получил желаемые результаты. 

<style type="text/css">
  div#container { width:200px;height:200px;overflow:hidden; }
  div.cells { width:600px;height:200px;}
  div.cell { float:left;width:200px;height:200px;margin:0;padding:0; }
  div.cell p {margin:0;padding:0;}
</style>

<ul>
  <li><a href="#" class="box-mover">Show Box 1</a></li>
  <li><a href="#" class="box-mover">Show Box 2</a></li>
  <li><a href="#" class="box-mover">Show Box 3</a></li>
</ul>

<div id="container">
  <div class="cells">
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 1</p>
    </div>
    <div class="cell" style="background:#cc0000;color:#ffffff;">
      <p>Cell 2</p>
    </div>
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 3</p>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){

    $("a.box-mover:eq(0)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "0px"}, "slow");
    });
    $("a.box-mover:eq(1)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-200px"}, "slow");
    });
    $("a.box-mover:eq(2)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-400px"}, "slow");
    });

  });
</script>
...