Skip to content
/ pjax Public

pjax with slide animation, degrade to ie8 with hash, thanks help with velocityjs for perfect animation

Notifications You must be signed in to change notification settings

qixiuss/pjax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

slidePjax

pjax with slide animation, fade/slide, you can also custom your own animation degrade to ie8 with hash, ie8 alse can animate thanks velocityjs for perfect animation

依赖

jquery.js
velocity.js

使用方法

// html结构
<div class="container-selector">
	<div class="contentNew-selector"></div>
	<div class="contentInner-selector"></div>
</div>

// pjax初始化
$.pjax({
    container: '.swiper-container',  // 组件初始化的container-selector
    selector: 'a[data-ajax="true"]',  // 触发异步请求的selector,一般是a标签
    contentNew: '.swiper-container .content-new', // 新加载的内容容器
    contentInner: '.swiper-container .content-inner', // 原始内容容器,新内容加载完成后,即变成了原始内容
    pagePriority: { 
    	// 由于slide需要确定左右方向,所以根据pagePriority参数来判断
    	// 如果page优先级一样,默认使用fade切换
    	// 如果page优先级一样,且page都一样,不做任何切换
        '/': 1,
        '/page1.html': 1,
        '/page1-1.html': 1,

        '/page2.html': 2,
        '/page2-2.html': 2,

        '/page3.html': 3,
        '/page3-2.html': 3
    },
    show: 'slide', // 页面替换动画类型,可以自定义
    cache: false, // 是否使用缓存
    storage: false, // 是否使用本地存储,谨慎使用,除非本地app
    titleSuffix: '', // 标题后缀
    filter: function() {}, // 过来selector,用来构建更复杂的长青
    callback: function() {} // 回调函数
})

About

pjax with slide animation, degrade to ie8 with hash, thanks help with velocityjs for perfect animation

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published