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 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
原生js实现轮播图
Feb 27 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
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在线生成ico文件的代码
2007/10/09 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
php 随机生成10位字符代码
2009/03/26 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
浅谈js中的this问题
2017/08/31 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python回调函数用法实例分析
2015/05/09 Python
python中的代码编码格式转换问题
2015/06/10 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
师范大学应届生求职信
2013/11/21 职场文书
五好党支部事迹材料
2014/02/06 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
解除合同协议书范本
2016/03/21 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
这样写python注释让代码更加的优雅
2021/06/02 Python