jQuery+css实现的换页标签栏效果


Posted in Javascript onJanuary 27, 2016

本文实例讲述了jQuery+css实现的换页标签栏效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery+css实现的换页标签栏效果

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>index</title>
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css" >
   body {
    margin:0; padding:0; font-size:12px; color:gray;
   }
   .container {
    height:200px; background:#F2F2F2; border-radius:6px;
    -webkit-border-radius:6px; -moz-border-radius:6px; border:6px solid #D5D5D5; 
   }
   .wrapper {
    width:90%; margin:0px auto;
   }
   .pageContainer {
    margin:0 auto; height:30px; position:relative; width:100%;
   }
   .page {
    width:30px; height:30px; background:#494949; border-radius:30px; margin-left:5px;
    -webkit-border-radius:30px; -moz-border-radius:30px; line-height:30px; font-size:15px;
    display:block; text-align:center; color:#fff; float:left; cursor:pointer; float:left;
    margin-top:5px;
   }
   .page:hover {
    background:#42CFFD; font-weight:bolder;
   }
   .page.active {
    background:#0864C0; 
   }
  </style>
  <script type="text/javascript" >
   (function(){
    $.fn.pageCreate = function(url, allPage, currentPage, pageTarget){
     if(isNaN(allPage) || allPage < 1 || isNaN(currentPage) || currentPage < 1 || $.trim(url) == "") {
      return;
     }
     var html = [],
      self = $(this),
      pageTarget = pageTarget?"":""
      prevPage = currentPage > 1 ? currentPage - 1 : 0,
      nextPage = currentPage < allPage ? currentPage + 1 : 0
      left = '<a target="'+pageTarget+'" class="page" href="'+url+'1"><<</a><a target="'+pageTarget+'" href="'+(prevPage==0?"javascript:void(0)":url+prevPage)+'" class="page"><</a>',
      right = '<a target="'+pageTarget+'" href="'+(nextPage==allPage?"javascript:void(0)":url+prevPage)+'" class="page">></a><a target="'+pageTarget+'" class="page" href="'+url+allPage+'" >>></a>';
     html.push('<div class="pageContainer">');
     html.push(left);
     for(var i=currentPage; i<=allPage; i++) {
      html.push('<a href="'+url+i+'" target="'+pageTarget+'" class="page '+(i==currentPage?"active":"")+'">'+i+'</a>');
     }
     html.push(right);
     html.push('</div>');
     self.html(html.join(''));
    };
   })();
   $(document).ready(function(){
    $('#pageContainer').pageCreate("http://localhost/?page=", 5, 3, '_blank');
   });
  </script>
 </head>
 <body>
  <div class="wrapper">
   <div class="container" id="pageContainer">
   </div>
  </div>
 </body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
js中键盘事件实例简析
Jan 10 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 #Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 #Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 #Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 #Javascript
js实现简单排列组合的方法
Jan 27 #Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 #Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 #Javascript
You might like
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
vue内置指令详解
2018/04/03 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
python实现画出e指数函数的图像
2019/11/21 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
惠普香港官方商店:HP香港
2019/04/30 全球购物
公司新年寄语
2014/04/04 职场文书
招标授权委托书样本
2014/09/23 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
法制教育讲座心得体会
2016/01/14 职场文书