当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript DOM 学习第三章 内容表格

Javascript
jQuery生成asp.net服务器控件的代码
javascript 实现的完全兼容鼠标滚轴缩放图片的代码
JavaScript学习笔记（十七）js 优化
使用SyntaxHighlighter实现HTML高亮显示代码的方法
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
利用jQuery 实现GridView异步排序、分页的代码
jquery.lazyload 实现图片延迟加载jquery插件
Lazy Load 延迟加载图片的 jQuery 插件
jquery 插件实现图片延迟加载效果代码
javascript小数计算出现近似值的解决办法
jquery1.4后 jqDrag 拖动 不可用
jquery 应用代码 方便的排序功能
选择TreeView控件的树状数据节点的JS方法(jquery)
jquery 图片Silhouette Fadeins渐显效果
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
javascript 同时在IE和FireFox获取KeyCode的代码
js 键盘记录实现(兼容FireFox和IE)
javascript 函数速查表
jQuery AnythingSlider滑动效果插件
经典海量jQuery插件 大家可以收藏一下

No. « 283 284 285 286 »

技术文章搜索

关键字

Javascript 中的 JavaScript DOM 学习第三章 内容表格

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-02-27   浏览: 37 ::
收藏到网摘: n/a

在这一章我会解释我的网站上的所有页面都在运行的内容表格的代码。他会生产这个页面的所有h3和h4的列表，然后给他们添加一个链接。

如果你也想这么做，那么你还需要我的getElementByTagNames()函数。

复制代码 代码如下:

function createTOC() {
var y = document.createElement('div');
y.id = 'innertoc';
var a = y.appendChild(document.createElement('span'));
a.onclick = showhideTOC;
a.id = 'contentheader';
a.innerHTML = 'show page contents';
var z = y.appendChild(document.createElement('div'));
z.onclick = showhideTOC;
var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5');
if (toBeTOCced.length < 2) return false;
for (var i=0;i<toBeTOCced.length;i++) {
var tmp = document.createElement('a');
tmp.innerHTML = toBeTOCced[i].innerHTML;
tmp.className = 'page';
z.appendChild(tmp);
if (toBeTOCced[i].nodeName == 'H4')
tmp.className += ' indent';
if (toBeTOCced[i].nodeName == 'H5')
tmp.className += ' extraindent';
var headerId = toBeTOCced[i].id || 'link' + i;
tmp.href = '#' + headerId;
toBeTOCced[i].id = headerId;
if (toBeTOCced[i].nodeName == 'H2') {
tmp.innerHTML = 'Top';
tmp.href = '#top';
toBeTOCced[i].id = 'top';
}
}
return y;
}
var TOCstate = 'none';
function showhideTOC() {
TOCstate = (TOCstate == 'none') ? 'block' : 'none';
var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents';
document.getElementById('contentheader').innerHTML = newText;
document.getElementById('innertoc').lastChild.style.display = TOCstate;
}

解释
这段代码运行如下：
准备阶段
首先我创建一个<div id="innertoc">来放置表格内容
复制代码 代码如下:

function createTOC() {
var y = document.createElement('div');
y.id = 'innertoc';

然后在他的上面添加一个<span>标签。点击这个元素就会运行showhideTOC()函数，我会在下面解释。
复制代码 代码如下:

var a = y.appendChild(document.createElement('span'));
a.onclick = showhideTOC;
a.id = 'contentheader';
a.innerHTML = 'show page contents';

然后我再创建一个DIV用了放置真正的链接。在这个div上单击（真正的含义是：在这个div里的任何一个链接上单击）一样会触发showhideTOC()函数。
复制代码 代码如下:

var z = y.appendChild(document.createElement('div'));
z.onclick = showhideTOC;

得到标题
然后新建一个toBeTOCced数组，再用我的getElementByTagNames()函数来得到整个页面的左右标题。
复制代码 代码如下:
var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5');

如果数组里只有一个元素（比如这个页面只有一个h2标题）就停止。我不想让ToC只有一个元素。
创建ToC
现在开始创建ToC。首先遍历toBeTOCced数组。对于每个元素我都创建一个和他们的标题相同的链接。注意innerHTML的使用：网站里有些标题包含<code>这样的HTML标签，我也想让这些在ToC里面显示。我把这些新的链接添加在ToC的里面的<div>上。
复制代码 代码如下:

for (var i=0;i<toBeTOCced.length;i++) {
var tmp = document.createElement('a');
tmp.innerHTML = toBeTOCced[i].innerHTML;
tmp.className = 'page';
z.appendChild(tmp);

如果标题是h4或者h5我就添加一个额外的类。
复制代码 代码如下:

if (toBeTOCced[i].nodeName == 'H4')
tmp.className += ' indent';
if (toBeTOCced[i].nodeName == 'H5')
tmp.className += ' extraindent';

现在我们需要把a元素链接到他真正的标题上。这需要一个唯一的ID。然而，这些标题可能已经包含一个ID了。我不想破坏原有的内部链接，所以我更愿意使用标题本来的ID。只有当标题没有ID的时候我才创建一个新的ID。
复制代码 代码如下:
var headerId = toBeTOCced[i].id || 'link' + i;

我们刚刚创建的链接的href属性就应该是#+headerId，标题本身也就有了一个ID。
复制代码 代码如下:

tmp.href = '#' + headerId;
toBeTOCced[i].id = headerId;

一个特殊情况：如果标题是H2，那就是页面的顶部，也会得到一个ID。
复制代码 代码如下:

if (toBeTOCced[i].nodeName == 'H2') {
tmp.innerHTML = 'Top';
tmp.href = '#top';
toBeTOCced[i].id = 'top';
}
}

现在表格就生产了，我们返回给调用它的地方。
复制代码 代码如下:
return y;}

显示和隐藏ToC
最后这个函数用了显示和隐藏ToC。非常的简单，先检测ToC的状态，然后根据信息生产一个新的文本和display值。
复制代码 代码如下:

var TOCstate = 'none';
function showhideTOC() {
TOCstate = (TOCstate == 'none') ? 'block' : 'none';
var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents';
document.getElementById('contentheader').innerHTML = newText;
document.getElementById('innertoc').lastChild.style.display = TOCstate;
}

这个函数在用户点击<span>的时候调用，那样他就可以切换ToC的显示。另外当用户在链接上点击的时候也会马上隐藏ToC的。
翻译地址：http://www.quirksmode.org/dom/toc.html
转载请保留以下信息
作者：北玉(tw:@rehawk)