Jquery.more.js插件的使用

1.基本文件的引入。

<script src="./jquery-1.11.3.min.js"> </script>

<script src='./jquery.more.js'> </script>

2.Html文档结构

<div id="more">
<div id="vlist" class='p single_item'>
<p class='name'></p>
</div>
<a href="javascript:;" id='get_more'>::点击加载更多内容::</a>
</div>

3.Js写法

<script>
 $(function(){
  $("#more").more({'address':'more.php'});
 })
</script>

4.PHP代码部分

<?php
$con = mysql_connect('localhost','root','root') or die(mysql_error());
mysql_query('set names utf8');
mysql_select_db('test');
// $result = mysql_query("select *from more limit 0,3");
$last = $_POST['last'];$amount = $_POST['amount'];
$result = mysql_query("select *from more limit $last,$amount");
$jsg = array();
while ($ok=mysql_fetch_assoc($result)) {
$jsg[]=array('name'=>$ok['name']);
}
echo json_encode($jsg);
?>

原理：在写Html代码时不需要填充数据，数据是文档加载完成后，通过Ajax请求后台，并且后台返回数据。通过Jquery.more.js文件追加到$("#more")的里面，先前写好的模版是隐藏掉的。需要注意的是模版中需要填充数据的标签的Class名要和Ajax返回数据的键值对应相同。

这一块就是Jquery.more.js文件的追加部分。可以看出是通过.key。key对应的就是Class的名字。

 $(data).each(function() {
                    counter++;
                    var t = template;
                    $.each(this, function(key, value) {
                        if (t.find('.' + key))
                            t.find('.' + key).html(value);
                    });