广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    基于jQuery虚拟的分页导航

    2018-04-06 10:41:18 次阅读 稿源:互联网
    零七广告

    jQuery虚拟的分页导航,这个不是网上所说到的jQuery分页导航

    具体的需求分析是这样的。

    我现在有一个页面,有很多的内容,html代码类似于这样子。

    <div class="con">

    <ul><li><a href="#"><img src='"><h2></h2><p></p></li><li><a href="#"><img src='"><h2></h2><p></p></li><li><a href="#"><img src='"><h2></h2><p></p></li><li><a href="#"><img src='"><h2></h2><p></p></li><li><a href="#"><img src='"><h2></h2><p></p></li><li><a href="#"><img src='"><h2></h2><p></p></li>……</ul>

    </div>

    中间的这个li是无限的,当然你也可以把ul li 替换为其他的div或者p.

    那么我要实现的功能是每个页面显示10个li中的内容,超过10个就分页,每一页都是以10个为例子。可以自动根据页面的li来创建分页导航。生成类似于这样子的dom, <div class="page"><a herf="#" class="current">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a></div>.

    同时点击每个数字的时候跳到相应的li页面,也就是当点击3时,显示的内容是从21个li到30个li的内容。以此类推。同时点击的时候页面要回到顶部,不要使用滚动的方式,太不真实了。

    贴出我的jQuery代码:具体demo可以看我新上线的项目:http://www.sokuzhan.com/author/sokuzhan

    //给评论添加分页导航	var i=10	var len = $("#comments ul > li").length;	var page_count = Math.ceil(len / i) ;	//alert(commentCount);	//alert(commentList);	for(var j=1;j<=page_count; j++){	$('.copypaging').append('<a href="#">'+ j +'</a>');	}	$(".copypaging a:first").addClass("current");	}	//模拟分页导航	$(".copypaging a").click(function(){		$(this).addClass("current").siblings("").removeClass("current");		//$("html,body").animate({scrollTop:"0"},300);		$(".author-content #comments > ul > li").hide();		var value = $(this).text();		if(value > 1){		var value1 = Math.ceil(10*(value-1)) - 1;		var value2 = Math.ceil(10*value) ;		//alert(value);		//alert(value1);		//alert(value2);		//$(".author-content #comments > ul > li").hide();		$('.author-content #comments > ul > li:lt(' + value2 + '):gt('+ value1 +')').slideDown();	}else{		$(".author-content #comments > ul > li:lt(10)").slideDown();	}		return false;	})

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告
    零七广告
    零七广告
    零七广告