jQuery Глубокие ссылки, загрузка контента из div в других проблемах страницы - PullRequest
Новая
       15

jQuery Глубокие ссылки, загрузка контента из div в других проблемах страницы

0 голосов
/ 03 апреля 2012

Признаться, я новичок в этом, но я прочитал несколько книг и искал в Интернете и не могу найти то, что мне нужно.Так что любая помощь была бы благословением.

Я смог настроить функцию, при которой после нажатия на навигационную ссылку он загружает div "#content" с соответствующей страницы в div "#content" текущегостр.Проблема возникла, когда я попытался реализовать глубокую связь с плагином адреса.Я не могу понять, как заставить его загружать только «#content» div со страницы.

Вы можете увидеть его в прямом эфире здесь: www.theeastcoastclassic.com/index1.html Нижняя навигациявсе еще имеет оригинальную функцию .load, верхняя часть использует функцию глубокого связывания.

Вот мой файл .js: 

// Deep Linking

    function loadURL(url) {
            console.log("loadURL: " + url);
            $("#content").load(url);
    }

    $.address.init(function(event) { 
            console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
            }).change(function(event) {
            $("#content").load($('[rel=address:' + event.value + ']').attr('href'));
            console.log("change");
    })

    $('ul#topNav a').live('click', function(e){
            $.scrollTo('#content', 'slow');
            $("#content").hide();
            loadURL($(this).attr('href').fadeIn("6000"));
            e.preventDefault();
    });

// Top Nav Hijax

/*  $("ul#topNav a").live("click",function(e) {
        $.scrollTo('#content', 'slow');

        var url = $(this).attr("href") + " #content";   
        $("#content").hide().load(url).fadeIn("6000");
        e.preventDefault();
    }); */

// Bot Nav Hijax

    $("ul.bNav a").live("click",function(e) {
        $.scrollTo('#content', 'slow');

        var url = $(this).attr("href") + " #content";   
        $("#content").hide().load(url).fadeIn("6000");
        e.preventDefault();
    });

//Equal Height Columns

    $(document).ready(function() {
        $("div .col3").equalHeights();
                               });

Это сокращенный HTML: 

<ul id="topNav">
            <li>
            <a href="index.html" title="index" rel="address:/index"> Home </a>
            </li>
            <li>
            <a href="schedule.html" title="schedule" rel="address:/schedule"> Schedule </a>
            </li>
            <li>
            <a href="lodging.html" title="lodging" rel="address:/lodging"> Lodging </a>
            </li>
            <li>
            <a href="sponsors.html" title="sponsors" rel="address:/sponsors"> Sponsors </a>
            </li>
            <li>
            <a href="directions.html" title="directions" rel="address:/directions"> Directions </a>
            </li>
            <li>
            <a href="contact.html" title="contact" rel="address:/contact"> Contact </a>
            </li>
        </ul>



 <div id="content" class="clearfix">
</div>

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

1 Ответ

0 голосов
/ 14 мая 2012
  1. плагин equalHeights не имеет ничего общего с вашим вопросом - если вы столкнулись с ошибками с этим плагином, запустите отдельный вопрос

  2. вам следует прочитать документацию по плагинам - вам нужно добавить функцию change(), поэтому при изменении адреса она будет выполнена:

    $. Address.change (функция (событие) { // ваша логика загрузки идет сюда });

...