사용자:Utolee90/vector.js

< 사용자:Utolee90
Utolee90 (토론 | 기여)님의 2020년 5월 11일 (월) 22:41 판 (자바스크립트 코드 실험중)

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

  • 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
  • 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
  • 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
  • 오페라: Ctrl-F5를 입력.
$("span#pageuseskin").text("Vector");

if($('#content').width()>800){ //본문 내용이 800픽셀 이상일 때에만 최근바뀜 상자가 나타나게...
$( 'body' ).append( '<div class="libre_recent" style="position:fixed;top:15%;right:10px"><div id="libre_recent-tabs"><div id="recenttext" class="selected">최근 바뀜</div><div id="recenttalk">최근 토론</div></div><div id = "recent-list-div"><div class="live-recent-content"><ul class="live-recent-list selected" id="live-recent-list"><li><span class="recent-item">1</span></li><li><span class="recent-item">2</span></li><li><span class="recent-item">3</span></li><li><span class="recent-item">4</span></li><li><span class="recent-item">5</span></li><li><span class="recent-item">6</span></li><li><span class="recent-item">7</span></li><li><span class="recent-item">8</span></li><li><span class="recent-item">9</span></li><li><span class="recent-item">10</span></li></ul><ul class="live-recent-list" id="live-recenttalk-list"><li><span class="recenttalk-item">1</span></li><li><span class="recenttalk-item">2</span></li><li><span class="recenttalk-item">3</span></li><li><span class="recenttalk-item">4</span></li><li><span class="recenttalk-item">5</span></li><li><span class="recenttalk-item">6</span></li><li><span class="recenttalk-item">7</span></li><li><span class="recenttalk-item">8</span></li><li><span class="recenttalk-item">9</span></li><li><span class="recenttalk-item">10</span></li></ul></div><span class="recent-more"><span class="mw-editsection-bracket">[</span><a href="//bigforest.miraheze.org/wiki/특수:최근바뀜" title="최근바뀜문서">more</a><span class="mw-editsection-bracket">]</span></span></div>' ); //HTML 삽입.
//기초 css 지정
$('#libre_recent-tabs').css({"display":"flex", "padding":"3px", "border":"1px solid blue", "width":"180px"});
$('#recenttext').css({"padding":"3px", "flex":"1"});
$('#recenttalk').css({"padding":"3px", "flex":"1"});
$('#recenttext.selected').css("background", "#417ff3");
$('#recenttalk.selected').css("background", "#417ff3");
$('#recent-list-div').css({"width":"180px", "position":"fixed", "top":"19.5%", "right":"10px"});

//클릭 시 표시되는 내용 지정
var rtext=$('#recenttext');
var rtalk=$('#recenttalk');
rtext.click(function(){$('#recenttext').addClass('selected'); $('#live-recent-list').addClass('selected'); $('#recenttalk').removeClass('selected'); $('#live-recenttalk-list').removeClass('selected');});
rtalk.click(function(){$('#recenttext').removeClass('selected'); $('#live-recent-list').removeClass('selected'); $('#recenttalk').addClass('selected'); $('#live-recenttalk-list').addClass('selected');});

//가로폭이 좁으면 content 내용 좁히기.
if($('#content').width()<1600){
$('#content').css("margin-right", "180px");
}

}