参数说明:

'amount'      :   '10',           //每次显示记录数
'address' : 'comments.php', //请求后台的地址
'format' : 'json', //数据传输格式
'template' : '.single_item', //html记录DIV的class属性
'trigger' : '.get_more', //触发加载更多记录的class属性
'scroll' : 'false', //是否支持滚动触发加载
'offset' : '100', //滚动触发加载时的偏移量

其中还有一个more_loader_spinner这个参数;

HTML

首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参数配置的功能。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.more.js"></script>

模板内容:

<div id="more">
<div class="single_item">
<div class="element_head">
<div class="date"></div>
<div class="author"></div>
</div>
<div class="content"></div>
</div>
<a href="javascript:;" class="get_more">::点击加载更多内容::</a>
</div>

这个用法可以有:点击页面,先loading5秒在加载数据出来,另外一个点击加载更多

效果为:

PHP数据为:

/*
* 异步显示商品列表 by wang
*/
if ($_GET['act'] == 'asynclist') {
$sayList = array();
if (is_array($list)) {
foreach ($list as $val) {
$max_amount = $val['max_amount'] ? $val['max_amount'] : $_LANG['nolimit'];
if ($val['act_range'] != $_LANG['far_all']) {
$extends = ':<br />';
foreach ($val['act_range_ext'] as $key => $value) {
@$extends .="<a href=\"" . $val['program'] . $value['id'] . "\" taget='_blank' class='f6'><span class='f_user_info'><u>" . $value['name'] . "</u></span></a>";
}
}
$user_rank = "";
foreach ($val['user_rank'] as $rank) {
@$user_rank .= $rank."&nbsp;";
}
$act_type_ext = ( $val['act_type'] != $_LANG['fat_goods']) ? $val['act_type_ext'] : '';
$gift = '';
foreach ($val['gift'] as $key => $value) {
$price = $value['price'] > 0 ? $value['price'] . $_LANG['unit_yuan'] : $_LANG['for_free'];
@$gift .="<dl class='gift'><dt><a href='goods.php?id=".$value['id']."'><img src='".$config['site_url'].$value['thumb']."' /></a></dt><dd><a href='goods.php?id=".$value['id']."'>".$value['name']."</a></dd><dd>".$price."</dd></dl>";
}
$sayList[] = array(
'pro-inner' => '<section class="order_box padd1 radius10"><table class="ectouch_table" width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="25%" bgcolor="#ffffff" align="right">' . $_LANG['label_act_name'] . '</td>
<td width="75%" colspan="3" bgcolor="#ffffff" align="left">' . $val['act_name'] . '</td>
</tr>
<tr>
<td width="15%" bgcolor="#ffffff" align="right">' . $_LANG['label_start_time'] . '</td>
<td width="35%" bgcolor="#ffffff" align="left">' . $val['start_time'] . '</td>
<td width="15%" bgcolor="#ffffff" align="right">' . $_LANG['label_max_amount'] . '
</td>
<td width="35%" bgcolor="#ffffff" align="left">
' . $max_amount . '
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="right">' . $_LANG['label_end_time'] . '</td>
<td bgcolor="#ffffff" align="left">' . $val['end_time'] . '</td>
<td bgcolor="#ffffff" align="right">' . $_LANG['label_min_amount'] . '</td>
<td width="200" bgcolor="#ffffff" align="left">' . $val['min_amount'] . '</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="right">' . $_LANG['label_act_range'] . '</td>
<td bgcolor="#ffffff" align="left"> '. $val['act_range'] .$extends.'
</td>
<td bgcolor="#ffffff" align="right">'.$_LANG['label_user_rank'].'</td>
<td bgcolor="#ffffff" align="left">'.$user_rank.'</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="right">' . $_LANG['label_act_type'] . '</td>
<td colspan="3" bgcolor="#ffffff" align="left">
' . $val['act_type'] . '
</td>
</tr>
<tr>
<td colspan="4" bgcolor="#ffffff" align="right">
'.$gift.'
</td>
</tr>
</table></section>'
);
}
}
echo json_encode($sayList);
exit;
}
/*
* 异步显示商品列表 by wang end
*/

HTML代码为:

<section class="wrap" id="J_ItemList">
<section class="order_box padd1 radius10 single_item">
<div class="pro-inner"></div>
</section>
<a href="javascript:;" class="get_more"></a>
</section>

JS代码为:

<script type="text/javascript">
jQuery(function($){
$('#J_ItemList').more({'address': 'activity.php?act=asynclist', 'spinner_code':'<div style="text-align:center; margin:10px;"><img src="{$ectouch_themes}/images/loader.gif" /></div>'}) });
</script>

其中例子:http://hdao123.com/mobile/activity.php

json数据为:http://hdao123.com/mobile/activity.php?act=asynclist

文章来自:http://www.helloweba.com/view-blog-130.html

【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)的更多相关文章

  1. jQuery+PHP实现浏览更多内容

    Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个“查看更多”的链接,通过触发该链接,向服务端发送Ajax请求,后台 ...

  2. 滚屏加载--jQuery+PHP实现浏览更多内容

    滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实 ...

  3. PC端和手机访问调用不同的页面,JS和PHP不同方法

    js方法: var urlqr = location.href;    urlqr = urlqr.replace(/iphoneF_/, "pc")这里写正则替换页面地址 if( ...

  4. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  5. jquery实现更多内容效果

    体验效果:http://hovertree.com/texiao/jquery/33/ 写个“更多内容的展开/收起”的js 代码如下: <!DOCTYPE html> <html&g ...

  6. jQuery 关于ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二弹)

    如果你看了上一篇<ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)>的话,应该就知道我是逼不得已要认真学 ...

  7. jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  8. 区分PC端与移动端代码,涵盖C#、JS、JQuery、webconfig

    1)C#区分PC端或移动端 using System.Text.RegularExpressions string u = Request.ServerVariables["HTTP_USE ...

  9. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

随机推荐

  1. ORM系列之二:EF(1)

    目录 1. EF是什么 2. 如何获取EF 3. EF有哪些主要模式 EF是什么 EF全称为Entity Framework,是微软推荐的一种数据库访问技术,属于重量级的ORM框架,功能非常强大,目前 ...

  2. 60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  3. BitTorrent DHT 协议中文翻译

    前言 做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent},因此把 DHT 协议重新看了一遍. BitTorrent 使用"分布式哈希表"(DHT)来 ...

  4. The shortest path---hdu2224 && Tour---poj2677(旅行商问题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2224 题意:平面上有n个点,问去的路只能从左到右,回的路只能从右到左的,且来回必须经过所有点的最小路径 ...

  5. Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例

    弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...

  6. Instsrv.exe和Srvany.exe的使用方法

    要把应用程序添加为服务,你需要两个小软件:Instsrv.exe和Srvany.exe.Instsrv.exe可以给系统安装和删除服务,Srvany.exe可以让程序以服务的方式运行.这两个软件都包含 ...

  7. Cen0S下挂载设备

    在CentOS中,如果我们要查看光驱,U盘或者要把安装包挂载到某个文件夹,我写下我的一些理解. 所谓的挂载,就是把物理设备或者文件(包含安装文件,压缩包等等),与系统中的某个目录建立一个快捷方式,然后 ...

  8. Unity 延迟执行一段代码的较为优雅的方式

    在Unity中,延时执行一段代码或者一个方法或者几个方法的情况非常普遍. 一般会用到Invoke和InvokeRepeating方法.顾名思义,第一个是执行一次,第二个是重复执行. 看下定义: voi ...

  9. JQuery DOM clone(true),对于克隆对象事件触发后,处理函数中this指代克隆对象

    <!doctype html> <html ng-app> <head> <script src="./jquery.js">< ...

  10. Maven 实战

    http://www.cnblogs.com/chowmin/category/599392.html