Rhymix(XpressEngine) Tips

본 토픽은 현재 준비중입니다. 홈페이지제작-CMS-XpressEngine에 참여하시면 완성 되었을 때 알려드립니다.

XE/라이믹스 게시판에서 폰트 사이즈 조정하는 스크립트 추가하는 방법

./modules/board/skins/스킨명/script.js

function setFontSize(font_size){
    if (font_size === 'lg' || font_size === 'sm') {
        $('html').removeClass().addClass(font_size);
    } else {
        $('html').removeClass();
    }
    var ExpDate = new Date();
    ExpDate.setTime(ExpDate.getTime() + 1000*60*60*24*365);
    setCookie('view_size', font_size, ExpDate,'/');
}

먼저 스킨에서 활용할 폰트사이트조정함수를 만듭니다.

 

./modules/board/skins/스킨명/list.html

<div onclick="setFontSize('sm');">작게</div>
<div onclick="setFontSize('md');">기본</div>
<div onclick="setFontSize('lg');">크게</div>

스킨에서는 위와 같이 함수를 불러오는 식으로 활용 가능합니다. 파일 위치는 script.js를 불러오는 어디에서나 사용 가능합니다.

 

./modules/board/skins/스킨명/style.css

html { font-size:10px;font-size: 62.5%; } /* =10px */
html.lg{font-size: 71.5%;}
html.sm{font-size: 53.6%;}

스크립트에서 정의해준 대로, html의 class를 조정하는 식으로 하기 때문에 CSS에서 기본 폰트 사이즈를 조정해줍니다.

 

./modules/board/skins/스킨명/list.html

<?php
if ($_COOKIE['view_size']) {
echo "<script>$('html').addClass('".$_COOKIE['view_size']."');</script>";
}
?>

그리고 getCookie함수를 사용해도 될거 같긴 한데, php로 하는게 좀더 빠른 화면 전환이 이뤄질 거 같아 php로 쿠키를 가져와서 실행시켜줍니다.

위 코드는 게시판 헤더 파일을 별도로 만들어서 넣어둡시다. 아니면 리스트, 글삭제, 글쓰기 등 모든 화면에 동일한 코드를 추가해넣어놓으셔야 합니다.

댓글

댓글 본문
버전 관리
이온디
현재 버전
선택 버전
graphittie 자세히 보기