jquery ias插件详解

最新推荐文章于 2021-08-06 21:54:49 发布

沙漠行走的野骆驼

最新推荐文章于 2021-08-06 21:54:49 发布

阅读量6.9k

点赞数

分类专栏： web JavaScript 文章标签： php Jquery ias 分页 ajax

本文链接：https://blog.csdn.net/wlm131127/article/details/12751803

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

web

5 篇文章 0 订阅

订阅专栏

该插件的作用主要就是用于滑动分页。具体例子大家可以去看www.36kr.com首页的分页技术。

第一步：下载ias插件。下载地址：https://github.com/webcreate/Infinite-Ajax-Scroll。

第二步：页面引入jquery和ias插件。

下面简单介绍下该插件：

ias以以下几种方式控制页面：

1、监听到达最后一个元素的滚动事件。

2、插入加载器图片。

3、用ajax加载下一页内容。

4、每一个新的元素都插入到最后一个元素的后面。

函数：ias参数介绍：(在这只是介绍几个重要的参数)

1、container

容器：顾名思义，就是放一条条信息的html元素。

2、item:

承载一条条信息的html标签,确保他们是放在container里面的。

3、pagination:

做分页的时候，我们都会在页面上显示分页字符串，用的此技术时也应该有此功能，并赋值在页面上。该技术会自动将其隐藏。分页时会用的下一页的页码。

4、next

指向分页字符串的下一页的html标签。

5、loader:

加载器，也是一个html标签。如同上述网站的点击下一页时的‘正在加载……‘字样，如不设置也会自动加上默认值。

6、trigger:

分页的操作按妞的展示文字，如下一页，如果没有，该插件会自动显示默认值

7、triggerPageThreshold：

一般设置为大于0，比如说我们设置为3.当我们滑动到第一页底部时，会自动加载下一页，知道第三页。

8、onPageChange:

改变页码的事件发生时触发。

9、beforePageChange：

分页前调用，可用于当时最大页数时，停止操作。

jQuery(document).ready(function($) { var _gaq = _gaq || []; jQuery.ias({ container : '.list', item: '.blog', pagination: '.pagination', next: '.next_page a', loader: '载入更多...', trigger: 'next', onPageChange: function(pageNum, pageUrl, scrollOffset) { path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/'); _gaq.push(['_trackPageview', path]); } }); });

注意以下几点：

1、列表内容必须超过浏览器长度的范围，否则。不起作用。

2、例子：

<?php
header("Content-type:text/html;charset=utf-8");
$str = '这是测试';
if($_SERVER["HTTP_X_REQUESTED_WITH"]=="XMLHttpRequest"){
	$page = $_REQUEST['page'];
	$page++;
}else{
	$page = 1;
}
$str = $str . $page;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery1.7.2.js"></script>
<script type="text/javascript" src="js/jquery-ias.js"></script>
</head>
<body>
<div class="list">
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
	<div class="blog"><?php echo $str;?></div>
        <div class="ias_loader1" style="display:none"><a href="#">已是最后一页</a></div>
        <div class="ias_loader"></div>
	<div class="ias_trigger">
		<a href="#">next</a>
	</div>
	<div class="pagination">
		<div class="next_page">
			<a href="/?page=<?php echo $page;?>">next</a>
		</div>
	</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
	var _gaq = _gaq || [];
	  jQuery.ias({
	    container : '.list',
	    item: '.blog',
	    pagination: '.pagination',
	    next: '.next_page a',
	    loader: '载入更多...',
	    trigger: 'next',
            beforePageChange:function(scrollOffset, nextPageUrl){
                if(nextPageUrl.substr(-1,1) == 5){
                    jQuery(".ias_loader1").show();
                    return false;
                }
           },
            onPageChange: function(pageNum, pageUrl, scrollOffset) {
	      path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/');
	      _gaq.push(['_trackPageview', path]);
	    }
	  });
	});
</script>
</body>
</html>

沙漠行走的野骆驼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery ias插件详解

该插件的作用主要就是用于滑动分页。具体例子大家可以去看www.36kr.com首页的分页技术。第一步：下载ias插件。下载地址：https://github.com/webcreate/Infinite-Ajax-Scroll。第二步：页面引入jquery和ias插件。下面简单介绍下该插件： ias以以下几种方式控制页面： 1、
复制链接

扫一扫

专栏目录