TOC滚动

查看

出自LajiWiki

个人需求，主要是MediaWiki目录一直固定在页面顶端
日常使用中点击目录跳转之后要想再跳到另外一个目录就郁闷了，你必须得回到页首才能重新点击跳转。
So，自己写了一个GreaseMonkey脚本，自己感觉还算方便。

有点问题，在某些页面元素上按m无法弹出这个菜单(比如说<div>)
不过在纯文本下是没问题的，懒的改了。。
有俩版本，一个是能根据页面滚动自动调整位置的，另一个只是按下m键才能弹出菜单，
因为上面那个问题，滚动调整位置的脚本在有Div等标签的页面上不太好用。
所以推荐用下面那个，:-)

GeaseMonkey脚本 V0.1

大杂烩，有滚动，有按键响应。 代码 [显示][隐藏]

// ==UserScript==
// @name           MediaWiki Menu
// @namespace      http://example.com/projects/
// @description    MediaWiki Menu 第一版 ，还有按键的响应
// @include        http://192.168.110.79/mediawiki/*
// ==/UserScript==
//参数定义
var mouseX = 0; //存储鼠标坐标
var mouseY = 0; 
var IsCtrlDown = 0;
var __is_ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox 
var Toc;
 
//事件响应
 
function KeyPress(e) {
    //Esc键隐藏Toc
    if (e.keyCode==27) {
        hideTOC();		
        return
    }   
    //alert(mouseX + ":" + mouseY);
    if (e.ctrlKey) return;
    if (e.altKey) return;
    switch (e.charCode) { 
        case 63: // '?' shows the search box        
			showTOC();	
            return;      
    }
}
//鼠标抬起响应
function mouseupHandler(e){
	if (e == null) return;// { e = window.event } 	
	if(__is_ff)	{		
		mouseX = e.layerX - 20 + document.body.scrollLeft; 
		mouseY = e.layerY - 40 + document.body.scrollTop; 
	}
	else { 
		mouseX = e.x - 20 + document.body.scrollLeft;
		mouseY = e.y - 40 + document.body.scrollTop; 
	} 
 
	if ( e.ctrlKey && e.button==0 ){ //Ctrl+鼠标左键弹出TOC		
		showTOC();
	}
	if (e.button==1 ) {
		var scrollTop =  document.documentElement.scrollTop 
		if (scrollTop>=0) {
			var OriginToc= document.getElementById('toc');			
			OriginToc.setAttribute('style','float: right;margin:' + scrollTop + 'px 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;');
		}
	}
 
 
}
//鼠标移动响应
function mousemoveHandler() {
	var scrollTop =  document.documentElement.scrollTop 
	if (scrollTop>=0) {
		var OriginToc= document.getElementById('toc');
		//OriginToc.setAttribute('style', 'top:' + scrollTop + 'px;right:50px;position:absolute;margin: 0 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;margin: 0 0 0.5em 1em;');
		OriginToc.setAttribute('style','float: right;margin:' + scrollTop + 'px 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;');
	}
	/*	var s = "";
	s += "\r\n clientWidth: "+ document.documentElement.clientWidth;
	s += "\r\n clientHeight: "+ document.documentElement.clientHeight;
	s += "\r\n offsetWidth: "+ document.documentElement.offsetWidth +" (包括边线和滚动条的宽)";
	s += "\r\n offsetHeight: "+ document.documentElement.offsetHeight +" (包括边线的宽)";
	s += "\r\n scrollWidth: "+ document.documentElement.scrollWidth;
	s += "\r\n scrollHeight: "+ document.documentElement.scrollHeight;
	s += "\r\n scrollTop: "+ document.documentElement.scrollTop;
	s += "\r\n scrollLeft: "+ document.documentElement.scrollLeft;
	s += "\r\n screenTop: "+ window.screenTop;
	s += "\r\n screenLeft: "+ window.screenLeft;
	s += "\r\n height: "+ window.screen.height;
	s += "\r\n width: "+ window.screen.width;
	s += "\r\n availHeight: "+ window.screen.availHeight;
	s += "\r\n availWidth: "+ window.screen.availWidth;
	s += "\r\n colorDepth: "+ window.screen.colorDepth +" 位彩色";
	s += "\r\n deviceXDPI: "+ window.screen.deviceXDPI +" 像素/英寸";
	alert(s);
	*/
 
	// e.layerX   e.layerY document.body.scrollLeft;
	// e.x e.y document.body.scrollTop; 	
}
 
function TocClick(e) {
    if (window.IsMouseOverToc) //点击Toc后将其隐藏
		hideTOC();   
}
function wheel(e) {
	var scrollTop =  document.documentElement.scrollTop 
	if (scrollTop>=0) {
		var OriginToc= document.getElementById('toc');
		//OriginToc.setAttribute('style', 'top:' + scrollTop + 'px;right:50px;position:absolute;margin: 0 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;margin: 0 0 0.5em 1em;');
		OriginToc.setAttribute('style','float: right;margin:' + scrollTop + 'px 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;');
	}
}
window.addEventListener('DOMMouseScroll', wheel, false);
document.addEventListener('keypress', KeyPress, false);
document.addEventListener('mouseup',mouseupHandler,false);
document.addEventListener('mousemove',mousemoveHandler,false);
document.addEventListener('click', TocClick, false);
 
 
 
//以下是功能函数
function hide(elm) {if (elm) elm.style.display='none'}	//隐藏元素
function show(elm) {if (elm) elm.style.display='block'} //显示元素
 
//状态控制函数
//显示Toc
function showTOC() {
	var visible = (Toc && (Toc.style.display != 'none'))	
    if (!Toc) {
		Toc = buildToc();		
		show(Toc);
	}else {
		changePosition();
		show(Toc);
	}
    //setTimeout("window.focus()",1000)
 
}
//隐藏Toc
function hideTOC() {
    hide(Toc);
}
//设置Toc位置
function changePosition() {
	if(!Toc) return;
	//Toc.setAttribute('style', 'top:' + mouseY + 'px;left:' + mouseX + 'px;position:absolute;border:0px;background-color:#F0F0F0;');
	//Toc.setAttribute('style', 'top:' + mouseY + 'px;left:' + mouseX + 'px;position:absolute;margin: 0 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;margin: 0 0 0.5em 1em;');
	OriginToc.setAttribute('style','float: right;margin:' + scrollTop + 'px 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;');
}
 
 
//创建Toc
function buildToc() {
	//Toc = document.getElementById('toc');
	//Toc.setAttribute('style', 'top:' + mouseY + 'px;left:' + mouseX + 'px;position:absolute;margin: 0 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;margin: 0 0 0.5em 1em;');
	//return Toc;
    Toc = document.createElement('table');	
    //Toc.setAttribute('style', 'top:' + mouseY + 'px;left:' + mouseX + 'px;position:absolute;margin: 0 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;margin: 0 0 0.5em 1em;');
	OriginToc.setAttribute('style','float: right;margin:' + scrollTop + 'px 0 0 0;padding: 0 0 0 0;border-spacing: 0;background-color: #f0f0f0;border: solid 1px #bbbbbb;width:300px;');
	var s = document.getElementById('toc');
	var t = s.innerHTML;
	t+='</table>';
    Toc.innerHTML = t;
    document.body.appendChild(Toc);
 
    // Releasing mousebutton over Toc should not close it //
    window.IsMouseOverToc = false;
    Toc.addEventListener('mouseover', function(e){window.IsMouseOverToc = true;}, false);
    Toc.addEventListener('mouseout', function(e){window.IsMouseOverToc = false;}, false);
    return Toc;
 
}

GeaseMonkey脚本 V1.0

只有按键功能，代码 [显示][隐藏]

// ==UserScript==
// @name            MediaWiki TOC Floatable
// @description     key "m" and "Ctrl+Left mouse" to show ,“ESC” to Hide
// @source          http://userscripts.org/scripts/show/50864
// @identifier      http://userscripts.org/scripts/source/50864.user.js
// @version         0.1
// @date            2009-06-05
// @author          LajiCF
// @namespace       http://suflanker.blogbus.com/
// @include         
// @exclude         
// ==/UserScript==
//参数定义
var TOCX = 0; //TOC坐标
var TOCY = 0; 
var Toc; 
//事件响应 
function KeyPress(e) {   
    if (e.keyCode==27) { //Esc键隐藏Toc
        hideTOC();		
        return
    }   
	if (e.charCode==109) { //'m'键显示TOC
		if (!Toc) {
		  showTOC();		
		  return
		}	
		if(Toc.style.display=='block') {
			hideTOC();
			return
		}else {
			showTOC();	
			return
		}       	
    }    
}
//鼠标抬起响应
function mouseupHandler(e){
	if (e == null) return;	
	TOCX = e.layerX - 20 + document.body.scrollLeft; 
	TOCY = e.layerY - 40 + document.body.scrollTop; 
	if ( e.ctrlKey && e.button==0 ){ //Ctrl+鼠标左键弹出TOC		
		showTOC();
		return
	} 
}
function mousemoveHandler(e) {
	if (e == null) return;	
	TOCX = e.layerX - 20 + document.body.scrollLeft; 
	TOCY = e.layerY - 40 + document.body.scrollTop; 
}
 
function TocClick(e) {
    if (window.IsMouseOverToc) //点击Toc后将其隐藏
		hideTOC();   
}
document.addEventListener('keypress', KeyPress, false);
document.addEventListener('mouseup',mouseupHandler,false);
document.addEventListener('click', TocClick, false);
document.addEventListener('mousemove',mousemoveHandler,false); 
//以下是功能函数
function hide(elm) {if (elm) elm.style.display='none'}	//隐藏元素
function show(elm) {if (elm) elm.style.display='block'} //显示元素 
//显示Toc
function showTOC() {
	var visible = (Toc && (Toc.style.display != 'none'))	
    if (!Toc) {
		Toc = buildToc();		
		show(Toc);
	}else {
		changePosition();
		show(Toc);
	}
 }
//隐藏Toc
function hideTOC() {
    hide(Toc);
}
//设置Toc位置
function changePosition() {
	if(!Toc) return;
	Toc.setAttribute('style', 'top:' + TOCY + 'px;left:' + TOCX + 'px;position:absolute;');
} 
//获取Toc
function buildToc() {
	Toc = document.getElementById('toc');
	Toc.setAttribute('style', 'top:' + TOCY + 'px;left:' + TOCX + 'px;position:absolute;');
    window.IsMouseOverToc = false; //点击Toc时将其隐藏
    Toc.addEventListener('mouseover', function(e){window.IsMouseOverToc = true;}, false);
    Toc.addEventListener('mouseout', function(e){window.IsMouseOverToc = false;}, false);
    return Toc; 
}

取自"http://wiki.suflanker.com/index.php?title=TOC%E6%BB%9A%E5%8A%A8"

1个分类: 个人项目

查看

导航

搜索

工具箱

个人工具