도움말:사용자 자바스크립트

리브레 위키를 비롯한 미디어위키 기반의 위키에서는 사용자 환경설정에서 특정한 기능을 제공하는 사용자 고유의 자바스크립트를 삽입하는 기능을 지원하고 있습니다. 이 문서는 이러한 자바스크립트를 사용하는 방법과 그 예제에 대해 올리는 곳입니다.

사용 방법

로그인을 하신 후에 사용자 환경 설정에 들어간 뒤 문서 보이기 설정 탭을 선택하시면 스킨 항목이 나타납니다. 그 다음에 모든 스킨에 공유된 사용자 자바스크립트를 선택하신 뒤에 자신이 원하는 기능을 제공하는 자바스크립트 문서를 복사해서 붙여넣으시면 작동합니다.

한편으로는 특정 스킨에만 적용되게 스킨별로 사용자 자바스크립트를 편집할 수도 있습니다. 각 문서의 이름은 "사용자:(사용자명)/(스킨명).JS"형태로 나타납니다.

예제

코드가 상당히 길기에 {{숨김 시작}} 틀을 이용해서 내용을 숨겨주시기 바랍니다. 사용하실 때에는 상자 안에 있는 코드 전체를 복사한 뒤에 사용자 자바스크립트에 붙여넣기 하시면 적용이 됩니다.

문서 위/아래 버튼

화면 왼쪽 아래에 맨 위로 올리거나 맨 아래로 내리는 버튼을 삽입할 수 있습니다.

맨 위로 가기/맨 아래로 가기 버튼 만들기 

/* 
이 스크립트는 Minecraft Wiki의 Majr의 goToTop.js를 
(http://minecraftwiki.net/wiki/User:Majr/goToTop.js/)
리브레 위키의 사용자 Utolee90이 재가공해서 만들었습니다.
*/
/* 위로 올라가는 버튼을 만듭니다. */
$( function() {
'use strict';

$( 'body' ).append( '<span id="to-top" style="font-size:14pt; color:#FFFFFF; background-color:#0077FF;"   >▲ 위</span>' );
var $topButton = $( '#to-top' );

$topButton.css( {
	'color': '#FFF',
	'position': 'fixed',
	'bottom': '-30px',
	'left': '4px',
	'cursor': 'pointer',
	'transition': 'bottom 0.5s',
	'-webkit-transition': 'bottom 0.5s',
	'user-select': 'none',
	'-webkit-user-select': 'none',
	'-moz-user-select': 'none',
	'-ms-user-select': 'none'
} ).click( function() {
	$( 'html, body' ).animate( { scrollTop: 0 }, 'slow' );
} );
/* 위에서 100픽셀 이내에 있으면 위 버튼을 숨깁니다. */
$( window ).scroll( function() {
	if ( $( window ).scrollTop() > 100 ) {
		$topButton.css( 'bottom', '4px' );
	} else {
		$topButton.css( 'bottom', '-30px' );
	}
} );
} );
/* 아래 버튼을 만듭니다. */
$( function() {
'use strict';

$( 'body' ).append( '<span id="to-bottom" style="font-size:14pt; color:#FFFFFF;  background-color:#0077FF;"  >▼아래</span>' );
var $bottomButton = $( '#to-bottom' );
var height=document.body.scrollHeight;
var hminus=document.body.scrollHeight-"100";
$bottomButton.css( {
	'color': '#FFF',
	'position': 'fixed',
	'bottom': '-30px',
	'left': '42pt',
	'cursor': 'pointer',
	'transition': 'bottom 0.5s',
	'-webkit-transition': 'bottom 0.5s',
	'user-select': 'none',
	'-webkit-user-select': 'none',
	'-moz-user-select': 'none',
	'-ms-user-select': 'none'
} ).click( function() {
	$( 'html, body' ).animate( { scrollTop:height}, 'slow' );
} );
/*아래에서 100픽셀 이내이면 아래 버튼을 숨깁니다. */
$( window ).scroll( function() {
	if ( $( window ).scrollTop () <hminus ) {
		$bottomButton.css( 'bottom', '4px' );
	} else {
		$bottomButton.css( 'bottom', '-30px' );
	}
} );
} );