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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
vue 组件简介
Jul 31 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
javascript实现倒计时提示框
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中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python之文字转图片方法
2018/05/10 Python
Python File(文件) 方法整理
2019/02/18 Python
详解Python3中ceil()函数用法
2019/02/19 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
展会邀请函范文
2014/01/26 职场文书
双语教学实施方案
2014/03/23 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
企业诚信承诺书
2014/05/23 职场文书
会计演讲稿范文
2014/05/23 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
导游词之吉林花园山
2019/10/17 职场文书
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL