jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)


Posted in Javascript onFebruary 26, 2013

大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案。你可以设置一个特定的name属性的锚链接,并使用href值作为哈希符号来跳过页面。这种效果当需要列出很长的数据集时,是非常实用的,比方说一个FAQ页面,一问一答的形式经常采用这样的效果,然而页面跳转对于游客来说有时候并不是好友好,因为他一点击直接跳转,陌生的游客对此可能感到困惑,不知道当前的数据跑那里去了,

在本教程中,我将探讨一个解决方案,创建一个简单的页面索引,并采用锚点链接在页面上。"跳转"动作进行动画处理,向下滚动到达这个链接的容器。(完美兼容IE6,7,8)

jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

在线演示

布局

首先是基本的index.html页面,我加入了一个典型的HTML5文档类型。styles.css为我们的页面样式表,indexscroller.js自定义的jQuery代码。

使用jquery代码别忘记引入谷歌jquery库,旧的浏览器不支持HTML5的html5shiv trunk 库的副本。在主体部分我使用的是定制的谷歌Webfont字体,以及与一些艺术CSS3效果。

<!doctype html> 
<html lang="en-US"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<title>jQuery Alphabetical Scrolling Links Index</title> 
<meta name="author" content="Jake Rocheleau"> 
<link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico"> 
<link rel="icon" href="http://spyrestudios.com/favicon.ico"> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Milonga"> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="indexscroller.js"></script> 
<!--[if lt IE 9]> 
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head>

主体内容
锚链接的href值在页面上按字母顺序列出的目标索引。从indexa到#indexg都针对其他页面上锚链接上面的匹配的name属性的值。

jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

<div id="w"> 
<H1>动态jQuery的滚动链接​​索引</ h1> <div id="container"> 
<nav id="links"> 
<ul class="clearfix"> 
<li class="label">快速链接:</ P> 
<LI> <A href="#indexa"> A </ A> </ P> 
<LI> <A href="#indexb"> B </ A> </ P> 
<LI> <A href="#indexc"> C </ A> </ P> 
<LI> <A href="#indexd"> D </ A> </ P> 
<LI> <A href="#indexe"> E </ A> </ P> 
<LI> <A href="#indexf"> F </ A> </ P> 
<LI> <A href="#indexg"> G </ A> </ P> 
</ ul> 
</div>

下面是name为 indexb的锚链接的具体滚动内容:当你点击<LI> <A href="#indexb"> B </ A> </ P> 他就会跳转到这个地方
<div class="show"> 
<h2>Arrested Development <span class="meta"><a href="http://en.wikipedia.org/wiki/Arrested_Development_(TV_series)" target="_blank">Wikipedia</a> - <a href="http://www.imdb.com/title/tt0367279/" target="_blank">IMDB</a></span></h2> 
<p><img src="images/arrested-development.png" alt="Arrested Development TV Show" width="570" height="280"></p> 
</div> <a name="indexb"></a> 
<div class="show"> 
<h2>The Big Bang Theory <span class="meta"><a href="http://en.wikipedia.org/wiki/The_Big_Bang_Theory" target="_blank">Wikipedia</a> - <a href="http://www.imdb.com/title/tt0898266/" target="_blank">IMDB</a></span></h2> 
<p><img src="images/big-bang-theory.png" alt="The Big Bang Theory TV Show" width="570" height="280"></p> 
</div>

CSS页面样式

一些默认的样式表的内容。除了典型的CSS重置 我用的是CSS3阴影

/* 页面主要样式布局 */ 
#w { width: 620px; margin: 0 auto; padding-top: 55px; } #container { 
padding: 14px 20px; 
background: #fff; 
-webkit-box-shadow: 2px 2px 1px rgba(0,0,0,0.35); 
-moz-box-shadow: 2px 2px 1px rgba(0,0,0,0.35); 
box-shadow: 2px 2px 1px rgba(0,0,0,0.35); 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
}

在每个锚链接停止之前,在他的顶部设置一个padding-top:8px的大小。这样,我们的滚动效果不停止在每个标题的顶部,有一些额外的空白
/* 具体的每个跳转到锚链接的样式DIV */ 
#shows { display: block; } .show { display: block; padding-top: 8px; margin-bottom: 23px; } 
.meta { font-family: Arial, Verdana, sans-serif; color: #222; font-size: 0.8em; font-weight: bold; float: right; } 
/* clearfix */ 
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
.clearfix { display: inline-block; } 
html[xmlns] .clearfix { display: block; } 
* html .clearfix { height: 1%; }

此外,元信息包含在每个头块的HTML标记,以节省空间。所以,我们是浮动的内容,并使用CSS clearfix的布局结构。

jQuery的scrollTop

jQuery有命名.scrollTop()方法,使用这种技术,可以拉动当前的像素值从页面顶部的任何其他选择的元素。我们从列表向下滚动,准确的锚链接。

$(document).ready(function(){ 
$('#links > ul > li > a').on('click', function(e){ 
e.preventDefault(); 
var anchorid = $(this.hash); if(anchorid.length == 0) anchorid = $('a[name="' + this.hash.substr(1) + '"]'); 
else anchorid = $('html'); 
$('html, body').animate({ scrollTop: anchorid.offset().top }, 450); 
}); 
});

这里的indexscroller.js。它似乎没有太多代码,但是,让我们看看DOM加载完成后,会发生什么情况。

#links内部链接锚被点击之后,我们立即调用e.preventDefault() 。这将停止从附加到URL的页面跳了下来瞬间的哈希值。然后使用一个新的jquery.hash属性,我们可以确切的获取href值后的哈希符号。因此,举例来说,我们的第一个索引链接会返回值“indexa”。

使用这种新的属性,我们可以针对相应的锚链接页面上的name属性相匹配。我们设置这个新anchorid的变量,使用anchorid.offset()可以访问距离顶部的绝对像素。最后加入所有这些代码到一个简单的jQuery .animate()方法

jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

在线演示

Javascript 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
新手简单了解vue
May 29 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 #Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 #Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 #Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 #Javascript
js 获取计算后的样式写法及注意事项
Feb 25 #Javascript
js调用webservice中的方法实现思路及代码
Feb 25 #Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 #Javascript
You might like
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python mysqldb连接数据库
2009/03/16 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python中几种自动微分库解析
2019/08/29 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
护理学专业推荐信
2013/12/03 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
项目负责人任命书
2014/06/04 职场文书
庆元旦主持词
2015/07/06 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript