jQuery实现ul-li自动分页，自动标签功能
|
12,381
|
0
|
网站前端

145 字
|
1 分钟内

jQuery实现ul-li自动分页，自动标签功能

在前端中tab切换是常见的一种jquery效果，但是有时在数量不确定，动态分成几个tab切换的就为你推荐一下的几个tab分页插件。希望对你有所帮助。

jQuery实现ul-li自动分页，自动标签功能

例子1：先来看看效果：戳这里

HTML页面： 

<div class="box">
    <ul class="nav clearfix" id="serverTab">
    </ul>
    <ul id="listContent" class="clearfix server-list">
		<li><a href="#" target="_blank">双线46服</a></li>
        <li><a href="#" target="_blank">双线46服</a></li>
        <li><a href="#" target="_blank">双线45服</a></li>
        <li><a href="#" target="_blank">双线44服</a></li>
        <li><a href="#" target="_blank">双线43服</a></li>
        <li><a href="#" target="_blank">双线42服</a></li>
        <li><a href="#" target="_blank">双线41服</a></li>
        <li><a href="#" target="_blank">双线40服</a></li>
        <li><a href="#" target="_blank">双线39服</a></li>
        <li><a href="#" target="_blank">双线38服</a></li>
        <li><a href="#" target="_blank">双线37服</a></li>
        <li><a href="#" target="_blank">双线36服</a></li>
        <li><a href="#" target="_blank">双线35服</a></li>
        <li><a href="#" target="_blank">双线34服</a></li>
        <li><a href="#" target="_blank">双线33服</a></li>
        <li><a href="#" target="_blank">双线32服</a></li>
        <li><a href="#" target="_blank">双线31服</a></li>
        <li><a href="#" target="_blank">双线30服</a></li>
        <li><a href="#" target="_blank">双线29服</a></li>
        <li><a href="#" target="_blank">双线28服</a></li>
        <li><a href="#" target="_blank">双线27服</a></li>
        <li><a href="#" target="_blank">双线26服</a></li>
        <li><a href="#" target="_blank">双线25服</a></li>
        <li><a href="#" target="_blank">双线24服</a></li>
        <li><a href="#" target="_blank">双线23服</a></li>
        <li><a href="#" target="_blank">双线22服</a></li>
        <li><a href="#" target="_blank">双线21服</a></li>
        <li><a href="#" target="_blank">双线20服</a></li>
        <li><a href="#" target="_blank">双线19服</a></li>
        <li><a href="#" target="_blank">双线18服</a></li>
        <li><a href="#" target="_blank">双线17服</a></li>
        <li><a href="#" target="_blank">双线16服</a></li>
        <li><a href="#" target="_blank">双线15服</a></li>
        <li><a href="#" target="_blank">双线14服</a></li>
        <li><a href="#" target="_blank">双线13服</a></li>
        <li><a href="#" target="_blank">双线12服</a></li>
        <li><a href="#" target="_blank">双线11服</a></li>
        <li><a href="#" target="_blank">双线10服</a></li>
        <li><a href="#" target="_blank">双线9服</a></li>
        <li><a href="#" target="_blank">双线8服</a></li>
        <li><a href="#" target="_blank">双线7服</a></li>
        <li><a href="#" target="_blank">双线6服</a></li>
        <li><a href="#" target="_blank">双线5服</a></li>
        <li><a href="#" target="_blank">双线4服</a></li>
        <li><a href="#" target="_blank">双线3服</a></li>
        <li><a href="#" target="_blank">双线2服</a></li>
        <li><a href="#" target="_blank">双线1服</a></li>
    </ul>
    </div>
  <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/page.js"></script>
    <script type="text/javascript">
        serverList.setTab({
            event: 'mouseover',
            num: 30
        });
    </script>

Jquery插件代码： 

 void function () {
 	var serverList = window.serverList = {
 		setTab:function( opt ){
 			opt = $.extend({
 				parent:$('#serverTab'), //选项卡父级
 				format:"<li>{tab}</li>", //选项卡模板(不能嵌套同种标签)
 				current:"on", //切换类
 				event:'click', //切换事件
 				target:$('#listContent li'), //切换目标
 				hotText:false, //第一个显示卡是否显示“推荐服务器”
 				num:30, //每选项卡数目
 				specials:[]
 			}, opt);
 			var tabTagName,
 				tabs = [],
 				html = "",
 				length,
 				target = opt.target;
			try{
				tabTagName = opt.format.match(/^<(w+)/)[1];
			}catch(e){
				return alert('选项卡模板错误,找不到匹配的标签名')
			}
			for (var i = 0, tmpArr = [], tmpHtml = ''; i < opt.specials.length; i++) {
				var tmp = $();
				target = target.filter(function(index) {
					if (this.getAttribute('data-special') == opt.specials[i].attr) {
						tmp = tmp.add(this);
						return false;
					}
					return true;
				});
			}
			length = target.length;
 			for(var i = 0, j = 0; j < length; i = j){
 				j += opt.num;
 				j = j > length ? length : j;
 				if( i === 0 && opt.hotText ){
 					html += opt.format.replace(/{tab}/, opt.hotText)
 				}else{
 					html +=  opt.format.replace(/{tab}/, (length-j+1)+'-'+(length-i));
 				}
 				tabs.push(target.slice(i, j));
 			}
 			tabs = tabs.concat(tmpArr);
 			html += tmpHtml;
 			if(!tabs.length){
 				return this;
 			}
 			opt.parent.html(html);
 			var tabElements = opt.parent.find( tabTagName );
 			function show( index ){
 				opt.target.hide();
 				tabs[index].show();
 				$(tabElements[index]).addClass( opt.current ).siblings().removeClass( opt.current );
 			}
 			opt.parent.on(opt.event, tabTagName , function(){
 				var index = tabElements.index( this );
 				show(index);
 			});
 			show(0);
 			return this;
 		}
 	}
 }();

例子2：查看效果：戳这里

HTML代码： 

<div class="title">
  <h1>jQuery 分页插件</h1>
  <hr />
  作者：小K 网站：http://www.lnend.com
  </div>
<div class="wrap">
  <h4>Demo1</h4>
  <hr />
  <div class="pagelist">
    <div class="item"><img src="images/2.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/2.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/1.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/1.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/2.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/2.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
	<div class="item"><img src="images/1.jpg" width="100" /></div>
    <div class="item"><img src="images/2.jpg" width="100" /></div>
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
  <h4>Demo2</h4>
  <hr />
  <div class="newslist">
    <ul>
      <li>
        <div><a href="#">新闻标题标题1</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题2</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题3</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题4</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题5</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题6</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题7</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题8</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题9</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题10</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题11</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题12</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题13</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题14</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题15</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题16</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题17</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题18</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题19</a></div>
        <span>2012/12/12</span> </li>
      <li>
        <div><a href="#">新闻标题标题20</a></div>
        <span>2012/12/12</span> </li>
    </ul>
  </div>
  <div class="clear"></div>
  <h4>如何使用本插件</h4>
  <hr />
  <div class="yongfa">
    <h6>1.添加分页导航css样式</h6>
    /* kkPages */<br />
    .Pagination{float: right;height: 55px;_height: 45px; line-height: 20px;margin-right: 15px;_margin-right: 5px; color: <br />
    #565656;margin-top: 10px;_margin-top: 20px; clear:both;}<br />
    .Pagination span{margin-right: 5px;display: block;float: left;margin-left: 5px;}<br />
    .Pagination span b{padding: 0 2px;}<br />
    .Pagination div {float:left}<br />
    .Pagination a{ font-size: 12px;text-decoration: none;display: block;float: left;color: #565656;border: 1px solid #cacaca;height: 20px;line-height: 20px;padding: 0 10px;margin: 0 2px;}<br />
    .Pagination .Ellipsis {line-height: 32px;overflow: hidden; display:none;}<br />
    cite.FormNum{display: block;float: left;line-height: 20px;height: 20px; font-style:  normal; padding-left:10px;}<br />
    #PageNum{ color:#777;width: 30px;height: 20px;line-height: 20px; border: 1px solid #cacaca; margin:0 5px; text-align:center;}<br />
    .Pagination a:hover,.Pagination a.PageCur{background-color: #ee6600;border: 1px solid #d64c01;color: #ffffff; }<br />
    <br />
    <h6>1.引入本插件</h6>
    &lt;script src="Script/jquery.kkPages.js"&gt;&lt;/script&gt;<br />
    <br />
    <h6>3.调用方法</h6>
    $('.newslist').kkPages({ <br />
    &nbsp;&nbsp;&nbsp;PagesClass:'li', //需要分页的元素<br />
    &nbsp;&nbsp;&nbsp;PagesMth:5, //每页显示个数 <br />
    &nbsp;&nbsp;&nbsp;PagesNavMth:5 //显示导航个数<br />
    });<br />
    <br />
  </div>
</div>

下载地址，百度分享链接：

http://pan.baidu.com/s/1dDneRQT

jQuerytab切换分页前端网站

评论

  1. 真皮鉴定
    9年前
    2015-5-24 10:52:28

    不错的文章。对我帮助很大

  4. fy
    8年前
    2015-7-11 23:05:04

    不错，简单又好用

  7. 最励志官网
    8年前
    2015-8-31 1:41:22

    网站真不错 最励志网http://www.zuilizhi.net/?

  10. 选美女聊天
    8年前
    2015-9-03 11:34:51

    赞一个！看美女找我哦~

  13. 大胆秀火辣
    8年前
    2015-10-06 3:16:11

    真的吗？太好了，非常喜欢

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
如何解决 wordpress 的ico文件挂马的问题

							
							

							
cookie是什么？原理是什么？怎么使用？用在什么地方？

							
							

							
谈谈数据库的跨机房容灾

							
							

							
假如有1亿用户的访问量，你的服务器架构是怎样的？

							
							

							
wordpress使用redis作为缓存加速

							
							

							
Apache如何提高并发连接请求数量

							
							

							
阿里云ECS配合免费360网站卫士CDN，为网站护航

							
							

							
[转]最全的各大互联网公司架构演进之路汇总

							
							

							
iframe跨域如何设置高度自适应？

							
							

							
HTTP协议状态码详细介绍

							
							

							
linux下网站排障分析常用的命令

							
							

							
解决通过Nginx访问后端应用，ERR_CONTENT_LENGTH_MISMATCH问题的解决

							
							

							
一篇文章让你搞清楚jsonp的原理

							
							

							
任意美化你的文件域input type=file兼容各浏览器

							
							

							
HTML5定稿了，原生App世界将被颠覆？

							
							

							
WordPress4.0版本页面载入慢的解决方案

							
							

							
12306：请少一些推脱 多一些承担

							
							

							
12306用户信息被大量泄露，密码应怎么改？

							
							

							
新浪微博、腾讯微博、QQ空间等一键分享链接

							
							

							
阅读 jQuery 源码的18个惊喜