jQuery+PHP实现浏览更多内容
本例与《无刷新动态加载数据,滚动条加载》的区别就在于这个是点击加载的,2个的数据库结构相同,都比较简单明了
XML/HTML Code
- <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>
data.php
PHP Code
- <?php
- include("../../conn.php");
- $last = $_POST['last'];
- $amount = $_POST['amount'];
- $query=mysql_query("select * from content order by id limit $last,$amount");
- while ($row=mysql_fetch_array($query)) {
- $sayList[] = array(
- 'content'=>$row['message'],
- 'author'=>$row['id'],
- 'date'=>date('y-m-d H:i',strtotime($row['updatetime']))
- );
- }
- echo json_encode($sayList);
- ?>
jquery.more.js
JavaScript Code
- (function( $ ){
- var target = null;
- var template = null;
- var lock = false;
- var variables = {
- 'last' : 0
- }
- var settings = {
- 'amount' : '5',
- 'address' : 'data.php',
- 'format' : 'json',
- 'template' : '.single_item',
- 'trigger' : '.get_more',
- 'scroll' : 'false',
- 'offset' : '100',
- 'spinner_code': ''
- }
- var methods = {
- init : function(options){
- return this.each(function(){
- if(options){
- $.extend(settings, options);
- }
- template = $(this).children(settings.template).wrap('<div/>').parent();
- template.css('display','none')
- $(this).append('<div class="more_loader_spinner">'+settings.spinner_code+'</div>')
- $(this).children(settings.template).remove()
- target = $(this);
- if(settings.scroll == 'false'){
- $(this).find(settings.trigger).bind('click.more',methods.get_data);
- $(this).more('get_data');
- }
- else{
- if($(this).height() <= $(this).attr('scrollHeight')){
- target.more('get_data',settings.amount*2);
- }
- $(this).bind('scroll.more',methods.check_scroll);
- }
- })
- },
- check_scroll : function(){
- if((target.scrollTop()+target.height()+parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false){
- target.more('get_data');
- }
- },
- debug : function(){
- var debug_string = '';
- $.each(variables, function(k,v){
- debug_string += k+' : '+v+'\n';
- })
- alert(debug_string);
- },
- remove : function(){
- target.children(settings.trigger).unbind('.more');
- target.unbind('.more')
- target.children(settings.trigger).remove();
- },
- add_elements : function(data){
- //alert('adding elements')
- var root = target
- // alert(root.attr('id'))
- var counter = 0;
- if(data){
- $(data).each(function(){
- counter++
- var t = template
- $.each(this, function(key, value){
- if(t.find('.'+key)) t.find('.'+key).html(value);
- })
- //t.attr('id', 'more_element_'+ (variables.last++))
- if(settings.scroll == 'true'){
- // root.append(t.html())
- root.children('.more_loader_spinner').before(t.html())
- }else{
- // alert('...')
- root.children(settings.trigger).before(t.html())
- }
- root.children(settings.template+':last').attr('id', 'more_element_'+ ((variables.last++)+1))
- })
- }
- else methods.remove()
- target.children('.more_loader_spinner').css('display','none');
- if(counter < settings.amount) methods.remove()
- },
- get_data : function(){
- // alert('getting data')
- var ile;
- lock = true;
- target.children(".more_loader_spinner").css('display','block');
- $(settings.trigger).css('display','none');
- if(typeof(arguments[0]) == 'number') ile=arguments[0];
- else {
- ile = settings.amount;
- }
- $.post(settings.address, {
- last : variables.last,
- amount : ile
- }, function(data){
- $(settings.trigger).css('display','block')
- methods.add_elements(data)
- lock = false;
- }, settings.format)
- }
- };
- $.fn.more = function(method){
- if(methods[method])
- return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
- else if(typeof method == 'object' || !method)
- return methods.init.apply(this, arguments);
- else $.error('Method ' + method +' does not exist!');
- }
- })(jQuery)
相关推荐
改编自php版本,原文: jQuery+PHP实现浏览更多内容http://www.helloweba.com/view-blog-130.html 这里记录.net 下的实现 一、首先创建数据库表test,并插入一些测试数据: 代码如下: go if exists (select * from ...
在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击“查看更多”来加载更多记录。本文将结合jQuery和...
我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击“查看更多”来加载更多记录。本文我将结合jQuery和PHP给...
PHP+Ajax点击加载更多内容 -效果好,速度快,带图片加载和跳转链接 加载最后一页更多变成文字变没记录,修复jquery.more.js 最后一页数据 点击 提示最后一页
很多网站都应用了星级评分效果,让用户可以对正在浏览的文章、电影、资源等进行评分,让网站增添了几分互动效果。 1.本例实现的效果:过渡动画显示评分操作。 2.及时更新平均得分和用户所评的分数。 3.后台限制...
此程序修改自:jQuery PHP实现浏览更多内容 jquery.more.js 参数配置 'amount' : '4', //每次显示记录数 'address' : '', //请求后台的地址,这里留空 'format' : 'json', //数据传输格式 'template' : '.single_...
此程序修改自:jQuery PHP实现浏览更多内容 jquery.more.js 参数配置 'amount' : '4', //每次加载记录数 'address' : '', //请求后台的地址,这里留空 'format' : 'json', //数据传输格式 'template' : '.single_...
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...
·PHP先进的自动完成:此功能让写代码的速度更快。自动完成包含各式俱全的代码补全列表。列表来自标准PHP和用户定义的类、变量、常量和关键字。开始输入新元素,在$this->和ClassName::后显示所有可能的备选列表来...
基于dropload.js的二次开发,支持下拉刷新,上拉加载商品详情或加载更多 !事件函数自定义。 演示地址:http://wnd.95net.net/index.php/Goods/show/id/52.html 仅支持微信端浏览
更多服务器事件 Grid_Inserting – 用于表的Grid-Add和用于详细信息表的Master / Detail-Add,在插入记录之前触发。 Grid_Inserted – 用于表的Grid-Add和详细信息表的Master / Detail-Add,在插入所有记录后触发。 ...
系统介绍:YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统,使用...运行环境:Apache+PHP+MySql+PhpMyadmin,本机测试建议安装集成环境前端架构:HTML+CSS+DIV+JQUERY程序架构:PHP+Mysql
用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用户滚动滚动条再从服务器端加载。 背景 是Facebook促使我写出了在...