JQuery-переход страницы, анимация и фрейм-подобная структура - PullRequest
1 голос
/ 05 февраля 2012

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

Я не знаю, как лучше всего достичь этого эффекта, я прочиталМного в Интернете, я нашел несколько примеров для iFrames и / или jquery / css / ajax, но я не могу решить, что использовать.(Содержимое на веб-сайте, которое будет меняться, будет являться всеми подстраницами моего веб-сайта, поэтому я подумал, что iFrames - это не тот инструмент, который мне нужен, но поправьте меня, если я ошибаюсь.)«страницы состоят из белого фона и слоя над ним, то есть изображений / текста.

Чего я хочу добиться, чтобы каждый раз, когда посетитель нажимал на ссылку, слой содержимого текста / изображений» исчезал", белый фон изменяет размеры до нового размера подстраницы, затем новое содержимое подстраницы постепенно исчезает.

" Fade in, fade out "уже реализовано:

$(document).ready(function() {
$("#valtozo").css("display", "none");
$("#valtozo").fadeIn(2000);
$("a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#valtozo").fadeOut(1000, redirectPage);
});
function redirectPage() {
    window.location = linkLocation;
}

});

"valtozo" - это идентификатор изменяющегося div.

Для плавного изменения размера перехода на белом фоне я подумал, что использую это: jQuery Animation - Плавное изменение размера

Я хотел бы услышать ваши мысли / идеи о том, что использовать для достижения таких кадров, как функциональность, сохраняя все визуальные эффекты, упомянутые выше.

Извинитена длинный пост, чемks заранее.

(Кстати, если у вас есть лучшие идеи, более компактные или лучше, стреляйте, в камне ничего не будет!)

Ответы [ 2 ]

0 голосов
/ 05 февраля 2012

Я предполагаю, что вы хотите перезагрузить только определенный раздел страницы, а не всю страницу, верно? Если это так, вот как вы можете это сделать:

ШАГ 1: Создайте пустой / пустой контейнер для перезагружаемого раздела, о котором идет речь. Ваш файл index.html должен выглядеть примерно так:

<div id="wrapper">

   <!--menu-->
   <a class="section-1">Section 1 </a>
   <a class="section-2">Section 2 </a>
   <a class="section-3">Section 3</a>
   <!--menu-->

   <!--reloadable-section-->
   <div id="reload">

   </div>
   <!--reloadable-section-->

</div>

ШАГ 2. Создайте необходимые перезагружаемые разделы в отдельных файлах HTML и сохраните их там, где считаете нужным. Для целей этого примера они будут сохранены в том же каталоге, что и файл index.html. Таким образом, ваши файлы section-1.html, section-2.html и section-3.html будут содержать всю необходимую информацию / контент. Обратите внимание, что если вы используете Dreamweaver для создания файла HTML, теги разметки HTML, теги BODY и HEAD будут автоматически вставлены для вас - удалите эти теги, поскольку они вам не нужны в данном случае. Вместо этого немедленно создайте элементы div, необходимые для хранения вашего контента. Ваш файл должен выглядеть примерно так:

<div id="section-1">

    <h2>this is section-1</h2>

    <p>this is the content for section 1</p>

</div>

ШАГ 3: Вернитесь к файлу index.html и включите следующий jQuery:

    <script>

        $(document).ready(function(){
            $('.section-1').click(function(){
                 $('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
                 $('#reload').load('section-1.html');
            });
            $('.section-2').click(function(){
                 $('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
                 $('#reload').load('section-2.html');
            });
            $('.section-3').click(function(){
                 $('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
                 $('#reload').load('section-3.html');
            });
        });

    </script>

Так что, просто выполнив это, вы сможете загрузить нужный файл в указанный контейнер вашего HTML-файла без перезагрузки всего HTML-файла. Обратите внимание, что если вы хотите, чтобы section-1.html имел эффект затухания при загрузке, это то, что вы можете сделать:

<script>

    $('#section-1').fadeTo(500,1);

</script>

<div id="section-1">

    <h2>this is section-1</h2>

    <p>this is the content for section 1</p>

</div>

Да, это так просто - просто добавьте упомянутый jQuery, как указано выше, и контейнер содержимого в загружаемых файлах исчезнет при готовности документа. Конечно, не забудьте установить непрозрачность указанного div в 0 с помощью CSS. РЕДАКТИРОВАТЬ: обратите внимание, что для этого экземпляра вам не нужно "$ (document) .ready (function () {});" на все.

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

PS: Я не слишком уверен, может ли этот метод быть строго помечен как загрузка AJAX, но я резервирую его для тех, кто знает, чтобы пролить свет на это. Извините, я просто программист-самоучка, поэтому мои знания весьма ограничены.

0 голосов
/ 05 февраля 2012

Вы можете использовать pjax defunkt .

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

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

Пример кода

Не полностью протестирован, пожалуйста, прокомментируйте, работает ли он.Чтобы проверить это, убедитесь, что это сделано по HTTP (не file://) - по крайней мере, при использовании Chrome.

Проверьте пример jsFiddle с поддельным запросом и оповещениями, показывающими срабатываниесобытия .

В index.html

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js"></script>
    <script type="text/javascript" src="pjax-fade-click.js"></script>
  </head>

  <body>
    <div id="valtozo">
      This will be replaced.
    </div>

    <a href="news.html" data-pjax="#valtozo">Show news</a>
  </body>
</html>

В news.html (следует проверить наличие pjax для включения / выключения меню)

<h1>News!</h1>

В вашемpjax-fade-click.js

$('a[data-pjax]').pjax();

$('body')
  .bind('pjax:start', function(event, xhr, options) { $(options.container).fadeOut("fast"); })
  .bind('pjax:end',   function(event, xhr, options) { $(options.container).fadeIn("fast"); });

Затем создайте все свои html-страницы, как обычно, но не показывайте меню при получении заголовка 'X-PJAX' или строки запроса _pjax=true.

Редактировать 1

Не проверять дважды версию pjax на демонстрационном сайте pjax - получаетсябыл старТеперь используйте сырую версию jquery.pjax.js прямо из github, но она должна быть загружена откуда-то еще.Также добавлен jsfiddle.

...