Умные Следующие и Предыдущие Кнопки в jQuery - PullRequest
Новая
       10

Умные Следующие и Предыдущие Кнопки в jQuery

2 голосов
/ 25 марта 2012

Я создал веб-страницу, которая, когда вы нажимаете «вниз», автоматически прокручивается вниз до следующего идентификатора (раздел, который не виден из-за переполнения: скрыт). Когда вы нажимаете «вверх», он прокручивается обратно вверх.

В данный момент каждая стрелка просто указывает веб-странице перейти к определенному элементу, например, «стрелка вниз» говорит 

<a class="tab" href="#page">Down</a>

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

Например, на странице 1 «стрелка вверх» не видна, а когда вы нажимаете «стрелку вниз», она прокручивается до # page2, после чего «стрелка вверх» становится видимой. Если вы сейчас снова нажмете стрелку вниз, вы попадете на # страницу3, после чего она станет скрытой, поскольку страница 3 является последней страницей.

Я предполагаю, что мне нужно создать 'var', который определяет количество страниц, и чтобы сделать стрелки невидимыми, он изменит свойство css 'display' на none, но я не знаю, как это сделать, ни чтобы ссылки работали, на какой номер идти дальше!

редактировать V2: (Это текущий код, в котором реализована справка из вашего ответа. Мне частично удалось заставить стрелки появляться и исчезать с этим кодом) 

var PN = 1;
var PA = $('.page').length;

function checkArrows() {
    if(PN === 1) {
       $("#up_arrow").css({ "display": "none"});
    }else{
       $("#up_arrow").css({ "display": "block"});
    }
    if(PN === PA) {
      $("#down_arrow").css({"display": "none"});
    }else{
       $("#down_arrow").css({"display": "block"});
    }
}

$(document).ready(function(){
    checkArrows();
        $('.arrow').click(function(){
         var chk_arr =  $(this).hasClass('down_arrow') ? PN++ : PN--;
          checkArrows();
    });
});

По какой-то причине var PA = $('.page').length;, похоже, не возвращает никаких значений, хотя у меня есть 2 вхождения в файле HTML.

С точки зрения прокрутки это фрагмент кода 

$('#down_arrow').click(function () {

        $('a.arrow').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $('#wrapper').scrollTo($(this).attr("href"), 1000);     

        return false;
    });

и теперь я пытаюсь найти способ обновить "href" с помощью PN + 1 или чего-то еще, чтобы href #page стал # page2

как обычно, большое спасибо!

Ответы [ 2 ]

2 голосов
/ 25 марта 2012

JSBin DEMO 

var PN = 1;
var PA = $('.box').length;
var Pos = 0;

function checkArrows() {
    if(PN === 1) {
       $("#up_arrow").css({ "display": "none"});
    }else{
       $("#up_arrow").css({ "display": "block"});
    }
    if(PN === PA) {
      $("#down_arrow").css({"display": "none"});
    }else{
       $("#down_arrow").css({"display": "block"});
    }
}
checkArrows();

function goTo(){
   checkArrows();
   Pos = $('.box').eq(PN-1).position().top;
  $('#scroller').stop().animate({top: '-'+Pos},1200);
}
goTo();


$('#up_arrow').click(function(){
      PN--;
      goTo();
});
$('#down_arrow').click(function(){
      PN++;
      goTo();
});

HTML (упрощенно): 

  <div id="nav">
    <button id="up_arrow">UP</button><button id="down_arrow">DOWN</button>
  </div>

  <div id="container">
  <div id="scroller">

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

  </div>
  </div>

CSS: 

  #container{
    position:relative;
    background:#eee;
    width:300px;
    height:400px;
    overflow:hidden; 
  }

  .box{
    position:relative;
    color:#fff;
    background:#444;
    padding:20px;
    margin-bottom:10px;

  }

  #nav{
    position:fixed;
    left:320px;
    width:200px;
  }

  #scroller{
    position:absolute;
    top:0px;
  }
  button{
    cursor:pointer;
  }

ЗДЕСЬ - хорошее демо, которое НЕ будет прятать стрелки! Проверьте это! ;)

И еще одна демо с использованием scrollTop и с одним элементом HTML меньше

0 голосов
/ 27 марта 2012

Во-первых, огромное спасибо Роко за его ответ, без которого я не смог бы «пробовать и ошибаться» на своем пути! Во-вторых, я извиняюсь, потому что это, вероятно, очень простой материал, и потому что он, вероятно, будет очень грязным, так как это первая вещь, которую я написал / настроил на JavaScript. но ладно, ладно, я иду!

Переменная определяется для определения номера страницы, PN. Затем функция запускается и скрывает стрелку вверх, если на первой странице, и скрывает стрелку вниз, если на последней странице. Последняя страница определяется глобальной переменной (PA) в текущем HTML-файле. 

var PN = 1;

function checkArrows() {
    if (PN === 1) {
        $("#up_arrow").css({"display": "none"});
    } else {
        $("#up_arrow").css({"display": "block"});   
    }
    if (PN === PA) {
        $("#down_arrow").css({"display": "none"});

    } else {
        $("#down_arrow").css({"display": "block"});
    }
}

Поскольку стрелки остаются на странице, мне нужно, чтобы они автоматически обновляли свои ссылки в зависимости от того, на какой странице они в данный момент находятся. При нажатии на стрелку она создает переменную для перехода к странице на основе текущей страницы (PN) +/- 1. Затем эта переменная используется в качестве идентификатора для прокрутки. 

$(document).ready(function () {

    $('.up_arrow').click(function () {
        checkArrows();
        var gotopage = "#page" + (PN);          
        $('#wrapper').scrollTo(gotopage, 1000);     
        checkArrows();      
        return false;
    });

    $('.down_arrow').click(function () {
        checkArrows();
        var gotopage = "#page" + (PN);          
        $('#wrapper').scrollTo(gotopage, 1000);     
        checkArrows();      
        return false;
    });
});

Этот код ниже автоматически прокручивает номер страницы, на которой он находится в данный момент при изменении размера экрана, в противном случае другие страницы, которые скрыты, слегка перетекают из-за изменения окна. 

 function init() {
    $('#wrapper').scrollTo('#page1', 0)
    }

    function resizeGoTo() {
    var gotopage = "#page" + (PN);
    $('#wrapper').scrollTo(gotopage, 1000); 
}
    $(window).resize(function () {
        resizeGoTo();
});

РЕДАКТИРОВАТЬ: беспокоился при переходе от файла «2 страницы» к большему, но просто попробовал это с файлом с несколькими (скрытыми) «страницами», и это сработало!

EDIT v2: изменили код для нажатий на стрелки. Раньше он получал ссылку href в html, а затем обновлял ее на основе вычислений js; теперь он не беспокоит, а просто прокручивает прямо к div, полученному из JS-вычислений. Также добавлена ​​автопрокрутка для изменения размера окна.

Спасибо и надеюсь, что я ТАК справедливо с моим d.i.y ответ!

...