включить изменение window.location.hash со скриптом .cycle - PullRequest
Новая
       19

включить изменение window.location.hash со скриптом .cycle

1 голос
/ 13 марта 2012

Может кто-нибудь, пожалуйста, помогите с window.location.hash и сценарием .cycle.Я пытался вот уже несколько недель, и я не могу этого сделать, я изучаю javascript неполный рабочий день, и я далеко не способен выполнить это без посторонней помощи.

Вот HTML-код, который у меня есть 

<div id="home_slide" class="slide">
  <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
  <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
  <li id="back"><a href="#" class="prev_demo" data-jim="#home_slide">Home</a></li>
</div>

<div id="about_us_slide" class="slide">
  <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
  <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
  <li id="back"><a href="#" class="gohome" data-jim="#home_slide">Home</a></li>
</div>

<div id="contact_us_slide" class="slide">
  <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
  <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
  <li id="back"><a href="#" class="gohome" data-jim="#home_slide">Home</a></li>
</div>

Вот код CSS, который у меня есть 

<style type='text/css'>
#container {
width: 320px;
height: 417px;

}
#nav li {
float: left;
}
#nav li a {
display: block;
border: 1px solid #333;
background: #eee;
}
#slide_containers {
clear: both;
border: 1px solid #333;
background: #eee;
}
.slide {
width: 100%;
}
#about_us_slide {
background: #cea;
width: 320px;
height: 417px;
}
#contact_us_slide {
background: #fea;
width: 320px;
height: 417px;
}

</style>

и, наконец, вот код JavaScript, который у меня есть // 

$('.goToSlide').click(function(e) { 
// Bind click event to all elements with the class goToSlide
e.preventDefault();
var selector = $(this).data('jim'); // Get the data-slide attribute value
//console.log(selector, $(selector), $(selector).index()); // DEBUG
var slideIndex = $(selector).index(); // Get the index of the slide element
$('#slide_containers').cycle(slideIndex); // Cycle to slide by index
});});
//]]>  
</script>

Вот также jsfiddle кода, работающего http://jsfiddle.net/mYmrx/16/

Я пытаюсь сделать так, чтобы у меня было доменное имя, т.е. www.domain.com # about_us, или даже лучше, было бы www.domain.com./ about_us

Пожалуйста, кто-нибудь может мне помочь, я схожу с ума.

1 Ответ

1 голос
/ 13 марта 2012

Вы совсем близко.Вы можете установить window.location.hash в свою переменную 'селектор', чтобы получить почти то, что вы просите.Вы даже можете сделать это после завершения анимации, используя обещание и готово.Вот пример: 

$(function() {
    $('#slide_containers').cycle({
        fx: 'scrollLeft',
        speed: 'fast',
        timeout: 0,
        prev: ".prev_demo",
    });

    // Bind click event to all elements with the class goToSlide
    $('.goToSlide').click(function(e) {
        e.preventDefault();
        // Get the data-slide attribute value
        var selector = $(this).data('jim');
        // Get the index of the slide element
        var slideIndex = $(selector).index();
        $('#slide_containers').cycle(slideIndex);
        // wait for animation to complete
        var promise = $('.slide').promise();
        promise.done(function() {
            // set hash
            window.location.hash = selector;
        });
    });

    //Grab hash off URL (default to first tab) and update
    $(window).bind("hashchange", function(e) {
        var anchor = $(location.hash);
        if (anchor.length === 0) {
            $('#slide_containers').cycle(0);
        }
        var slideIndex = $(anchor).index();
        $('#slide_containers').cycle(slideIndex);
    });
});​

Вот обновленный JSFiddle: http://jsfiddle.net/infiniteloops/AHATV/8/

Здесь вы можете увидеть JSFiddle в действии (с обновленными местоположениями хеша): http://jsfiddle.net/infiniteloops/AHATV/8/show/

...