• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

参数说明:

'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?>;
            }       
            $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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
php正则替换所有空格和换行发布时间:2022-07-10
下一篇:
PHP语言与C语言的区别(控制结构、数组、特性)发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap