SmoothStateJS: как сохранить элемент от обновления на смену страницы?

Я использую SmoothState.Js для загрузки новых страниц на кликах. Поскольку на каждой из этих страниц логотип остается в одном месте/размере, я бы хотел, чтобы логотип не обновлялся и не исчезал на странице.SmoothStateJS: как сохранить элемент от обновления на смену страницы?

Ссылки в моем меню не обновляются, но логотип делает. Я ничего не видел в документах или в Google, рассматривающих это. Как я могу постоянно сохранять изображение на месте между этими изменениями в ajax?

Вот SmoothState вызов:

$(function() { 
    $('#main').smoothState(); 
}); 

$(function() { 
    "use strict"; 
    var options = { 
      prefetch: true, 
      pageCacheSize: 4, 
      onStart: { 
       duration: 300, // Duration of our animation 
       render: function($container) { 
        // Add your CSS animation reversing class 

        $container.addClass("is-exiting"); 


        // Restart your animation 
        smoothState.restartCSSAnimations(); 
       } 
      }, 
      onReady: { 
       duration: 0, 
       render: function($container, $newContent) { 
        // Remove your CSS animation reversing class 
        $container.removeClass("is-exiting"); 

        // Inject the new content 
        $container.html($newContent); 


       } 

      }, 

     }, 
     smoothState = $("#main").smoothState(options).data("smoothState"); 
});

HTML-:

<header class="header"> 
     <div class="main-logo"> 
      <a class="svg" href="www.site.com"> 
       <object class="willItBlend" data="../svg/main-logo.svg" type="image/svg+xml"></object> 
       <img class="blender" src="../svg/main-logo.png" /> 
      </a> 
     </div> 
     <nav class="main-nav-about"> 
      // links go here 
     </nav> 
</header>

Доступно событие требует SmoothState:

onBefore - Runs before a page load has been started 
onStart - Runs once a page load has been activated 
onProgress - Runs if the page request is still pending and the onStart animations have finished 
onReady - Run once the requested content is ready to be injected into the page and the previous animations have finished 
onAfter - Runs after the new content has been injected into the page and all animations are complete

источник

2016-02-26 Pascal Tremblay

Вы должны использовать опцию 'черный список', как указанных в документах:

Селектор jQuery, определяющий, какие элементы в элементе smoothState следует игнорировать. Это включает как форму, так и элементы привязки.

Просто добавьте в опции объекта blacklist: '.no-smoothState'

Затем добавьте .no-smoothState класс к любым элементам страницы, которые вы хотите игнорировать.

источник

2016-03-16 06:55:26 RobM

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

HTML (index.html, about.html и work.html Подписчиков рисунок):

<body> 
    <div id="main"> 
     <div class="menu"> 
      <a href="index.html">index</a> 
      <a href="work.html">work</a> 
      <a href="about.html">about</a> 
     </div> 
     <div id="content"> 
      <h1>INDEX</h1> 
     </div> 
    </div> 
</body>

JS:

$(function() { 
    $('#main').smoothState({ 
    'onReady': { 
     'render': function($container, $newContent) { 

      // replace only content div and leave the menu alone 
      $container.find('#content').html($newContent.filter('#content')); 
     } 
    } 
    }); 
});

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

источник

2016-03-22 17:37:50 Jacek

SmoothStateJS: как сохранить элемент от обновления на смену страницы?

ответ

Смежные вопросы