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

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

未经允许不得转载:好玩吧 » jQuery实现ul-li自动分页,自动标签功能