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

参数说明：

'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