Показывать #anchor вместо индекса в URL с циклом jQuery - PullRequest
Новая
       43

Показывать #anchor вместо индекса в URL с циклом jQuery

0 голосов
/ 11 февраля 2011

Чтобы дружить с Google, я хочу немного изменить этот скрипт.

У меня есть макет на одну страницу, где я использую jQuery Cycle для анимации между контентом. Скрипт, как и сейчас, отображает номер текущего слайда в URL. Ex. "index.html # 1" или "index.html # 4". Это выглядит ужасно, и я думаю, что Google тоже подумал бы ...; -)

Я хочу, чтобы он отображал divs #anchor вместо своего индекса, поэтому URL-адрес будет "index.html # Projects" вместо

Меню HTML: 

  <div id="menu">
    <ul>
      <li><a href="#About">About</a></li>
      <li><a href="#Projects">Projects</a></li>
      <li><a href="#Learning">Learning</a></li>
    </ul>
  </div>

Сценарий: 

//Set .active to current page link

var url = location.hash.slice(1);
if (url < 1 ) {
    $("#menu li:nth-child(" + ( location.hash.slice(1) - 1 ) + ") a ").addClass("active");
}   

//Slide effect
    $('#logo').click(function() { 
        $('.slideshow').cycle(0); 
        return false; 
    }); 
    $('#menu li a').click(function() {
        $('.slideshow').cycle($(this).parent().index()+1);
        return false; 
    });
    $('.slideshow').cycle('pause'); 



    var index = 0, hash = window.location.hash;
    if (hash) {
        index = /\d+/.exec(hash)[0];
        index = (parseInt(index) || 1) - 1; // slides are zero-based
    }


    $('.slideshow').cycle({
        fx: 'blindY', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed:  700,
        startingSlide: index,
        cleartype:  1,
        timeout: 3000,
        after: function(curr,next,opts) {
            window.location.hash = opts.currSlide + 1;
        } 

    });

Можно ли заставить его отображать divs #anchor вместо его индекса?

Заранее спасибо ...: -)

Ответы [ 2 ]

1 голос
/ 10 июля 2011

Сделайте так, чтобы после или перед каждым слайдом у него был обратный вызов с циклом

Так после: Onafter, 

function Onafter() { window.location.hash = this.hash; }
1 голос
/ 11 февраля 2011

Самый простой способ - это изменить строку кода: 

    window.location.hash = opts.currSlide + 1;

на: 

    window.location.hash = opts.currSlide + 1 + ': ' +
          $("#menu li:nth-child(" + (opts.currSlide + 1) + ") a ").attr('href');

Этот URL будет обрабатываться следующим образом: http://www..........#1: #Projects.Затем вам придется пройти через остаток кода, в котором вы используете хеш, и удалить последний бит, прежде чем использовать остаток, например 

    hash = window.location.hash.replace(/:[^0-9] .*$/, '');

Regards Neil

...