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实现浏览器菜单命令
Sep 05 Javascript
JS 继承实例分析
Nov 04 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
DOM 高级编程
May 06 Javascript
移动端界面的适配
Jan 11 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
vue 授权获取微信openId操作
Nov 13 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/06/04 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
python对html过滤处理的方法
2018/10/21 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
django中ImageField的使用详解
2020/12/21 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
土地转让协议书
2014/09/27 职场文书
Python实现批量自动整理文件
2022/03/16 Python
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript