【PC端】jQuery+PHP實現瀏覽更多內容(jquery.more.js插件)

參數說明:javascript

'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已經將許多功能都封裝好了,並提供了參數配置的功能。php

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

 

模板內容:html

<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秒在加載數據出來,另一個點擊加載更多java

效果爲:jquery

PHP數據爲:web

/*
 * 異步顯示商品列表 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代碼爲:json

<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.phpasync

json數據爲:http://hdao123.com/mobile/activity.php?act=asynclisturl

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

相關文章
相關標籤/搜索