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 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
详解Vue之事件处理
Jul 10 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php操作MongoDB类实例
2015/06/17 PHP
php实现的http请求封装示例
2016/11/08 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
js Dialog 实践分享
2012/10/22 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
Python切片知识解析
2016/03/06 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
详解Python 函数如何重载?
2019/04/23 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
keras 多gpu并行运行案例
2020/06/10 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
加拿大探亲邀请信
2014/01/28 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
2014年安全生产责任书
2014/07/22 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
南京导游词
2015/02/03 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记