jquery: добавление навигационного списка в скользящие div - PullRequest
Новая
       35

jquery: добавление навигационного списка в скользящие div

2 голосов
/ 06 декабря 2011

Привет. Во-первых, я довольно новичок в jquery, поэтому я очень ценю ваш расширенный опыт.

DEMO: http://www.transcendspace.com/beta/

Я хотел бы создать навигацию для моегоdivs: 1 | 2 | 3 | 4 | 5 и т. д., которые будут подсвечивать число в зависимости от того, какой div активен.В идеале выделение будет работать в сочетании с моими стрелками влево / вправо.

КОД: `

$(document).ready(function() {
  $(window).resize(function () {
      resizePanel();
  });
});

function resizePanel() {

    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#debug').html(width  + ' ' + height + ' ' + mask_width);
    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);    
}


function scrollToPosition(element) {
   if (element !== undefined) {
        $("#wrapper").scrollTo(element, 800, {});
   }
}



$(function() {
     //Create an Array of posts
     var posts = $('.item');
     var position = 0; //Start Position
     var next = $('#next');
     var prev = $('#prev').hide();

 //Better performance to use Id selectors than class selectors
     next.click(function(evt) {
     //Scroll to next position
         prev.show();
         scrollToPosition(posts[position += 1]);

         if (position === posts.length - 1) {
             next.hide();
         }
});

prev.click(function(evt) {
    //Scroll to prev position    
    next.show();
scrollToPosition(posts[position -= 1]);

    if (position === 0) {
    prev.hide();
    }
});

}); 

 </script>'

Ответы [ 2 ]

1 голос
/ 06 декабря 2011

В вашем обработчике .ready() создайте список номеров элементов: 

var len = posts.length
var $ul = $('<ul id="navItems">');
for (var i=0; i<len; i++) {
    $('<li data-item="' + i+ '">' + (i+1) + '</li>')
        .click(function(e) {
            // go to this item when  you click
            // get the item num using $(this).data('item');
        })
        .appendTo($ul);
}
$ul.insertAfter($('#prev'));

Вы можете стилизовать список с помощью css, чтобы сделать его горизонтальным: 

#navItems { list-style: none; display: inline-block; }
   #navItems li { display: inline-block; width: 15px; height: 15px; }
   #navItems li { zoom: 1;  } // for old IE

Вот fiddle для игры.

Реализация щелчка

Вот фрагмент кода для реализации прокрутки при нажатии на"item".

Должно быть немного проще сохранить идентификатор соответствующего .item в атрибуте data-itemid, после чего мы делаем то, что хотим: -) 

for (var i=0; i<len; i++) {

    // save the item id and not just the index
    $('<li data-itemid="' + posts[i].id + '">' + (i+1) + '</li>')
        .click(function(e) {

            // get the data from data-itemid attibute
            var itemid = $(this).data('itemid');

            // use your scrollToPosition method
            // with our 'itemid' we can get the element using the ID selector
            scrollToPosition($('#' + itemid));

        })
        .appendTo($ul);
    }

}

Я также обновил скрипку.

Несколько замечаний о вашем коде

  • На самом деле у вас есть два обработчика readyв вашем коде.Одно явное вверху $(document).ready() и $(function() {...}).На самом деле они оба работают на событии ready, поэтому вы должны оставить только одно.Он работает с двумя, но делает ваш код менее управляемым.

  • Всегда делайте так: сначала объявляйте ваши переменные с помощью var, затем ваши локальные функции и затем делайте то, что вы должны делать.Уважая настолько, насколько это возможно, этот холст поможет вам прочитать ваш код, потому что вы ожидаете, что что-то будет там или там.

  • Префикс вашей переменной jquery с $: var $posts = $('.item');.Когда вы затем видите переменную, вы знаете, что она содержит (или должна) по ее имени.

  • jQuery о цепочках.

Вместо этого: 

var next = $('#next');
next.click(function(e) {...});

Сделайте это: 

var $next = $('#next').click(...).addClass(...).show();
var $prev = $('#prev').click(...).toggle((position > 0));
0 голосов
/ 06 декабря 2011
  1. Временная выгода, когда вы используете ID вместо класса, слишком мала для использования вне цикла, и не стоит путать себя с добавлением приращения ко всем div-клонам.
  2. Для получения информации о том, какиенажата клавиша, вы можете использовать keydown / keyup - http://jsfiddle.net/RsFpJ/4/ - попробуйте ввести что-нибудь в поле, и вы увидите, какая кодовая кнопка имеет
  3. Попробуйте использовать jsfiddle.net для обмена примером кода - этогораздо проще помочь в таком случае, потому что нам не нужно повторно вводить код.
  4. Вы можете строить числа для элементов div с помощью функции index () jquery http://jsfiddle.net/RsFpJ/5/,Длина нативного JavaScript и для

jQuery 

    var objs = $(".key");
    var navHtml = '';
    for (i = 0; i < objs.length; i++) {
        navHtml += '<span>'+(i+1)+'</span>' ;
    }

    $('#nav').html(navHtml);

    $('#nav span').click(function(){
        // index of span inside set of spans, starting from 0;
        var eqIndex = $('#nav span').index(this);
        objs.eq(eqIndex).css("border-color","red");        
    });

HTML: 

<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>

<div id="nav"></div>
...