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动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
vue双向绑定简要分析
Mar 23 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
layer 关闭指定弹出层的例子
Sep 25 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
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连接mssql数据库的几种方法
2013/02/21 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php面向对象值单例模式
2016/05/03 PHP
php简单压缩css样式示例
2016/09/22 PHP
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
公司总经理工作职责管理办法
2014/02/28 职场文书
房产买卖委托公证书
2014/04/04 职场文书
安全生产管理责任书
2014/04/16 职场文书
感恩之星事迹材料
2014/05/03 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
品质保证书格式
2015/02/28 职场文书
教师求职自荐信
2015/03/26 职场文书
公司回复函格式
2015/07/14 职场文书