XE 공식 자료실

전체보기

XE 공모전 2014 출품작 보기 자료 등록/관리

위젯 스킨 로마네스크 최근 문서 출력 스킨 공지사항 ver. 0.3

제작자: 라르게덴
등록일: 2010-03-26
다운로드 수: 1,422
링크1: www.animeclub.net

본 스킨은 jQuery 프레임웍을 이용하여 이쁜 효과, 디자인(?)을 구현하여 공지사항 용으로 맞게 제작 된 스킨 입니다.

라이선스: GPL v2
설치경로: ./widgets/rnq_newest_document/skins/rnq_newest_notice
최초 등록일: 2009-09-28
전체 다운로드: 1,476

다운로드 ver. 0.3

모든 버전 보기

체험하기

쉬운설치로 바로 체험할 수 있습니다

상세 설명

XpressEngine

소개
본 스킨은 jQuery 프레임웍을 이용하여 이쁜 효과, 디자인(?)을 구현하여 공지사항 용으로 맞게 제작 된 스킨 입니다.

버그 & 개선

2010.03.26 ... v0.3

- IE8에서 화면이 제대로 표시되지 못하는 버그를 수정

설치법
- 아래 첨부파일 rnq_newest_notice.zip을 다운 받으셔서 압축을 푸시고 widgets/rnq_newest_document/skins/ 폴더안에 복사해주세요.
- 스킨 사용 전 func_include 애드온을 다운 받으셔서 실행시켜주세요.
- 관리자 페이지 -> 위젯 -> 최근 문서 출력 위젯에서 코드생성 해주세요.
- 원하는 레이아웃, 페이지 등에 삽입하여 이용해주세요.

옵션
- 컬러는 위 이미지와 같이 총 6가지 입니다.
- 흰색과 검정색 바탕에 각각 3가지의 색으로 이루워져 있습니다.

그밖에 기능 소개
우선 본 스킨은 func_include 애드온을 이용하여 기존 스킨으로만 구현할 수 없었던
직접 만든 함수처리라든가 Query 결과물을 출력 하도록 하였습니다.

사용된 함수 6개
- 브라우져 버젼 구하는 함수
- 공지용 글내용 처리를 위한 함수(글 가운데 섬네일 이미지를 넣기 위한 수단)
- 문자열 자르기에서 ...을 하지 않기 위해 별도로 함수 선언
- 스킨 파일 내에 있는 lang 언어파일 로딩
- 대상 중 최근 등록한 글의 등록시간을 구하는 함수
- 대상 중 최근 등록된 글의 게시 시간으로 부터 얼마나 지났는지 표시 함수

언어변수 설정
- 본 스킨은 기본 언어 이외에 스킨 내부에서 불러오는 언어가 있습니다.
- 언어 변수 중 최근 등록 된 글의 시간과 현 시간을 비교하여
출력해주는 언어들이 있습니다.

    /* 일수 글 
*/    $lang->rnq->_time->DiffDay = array(
        /* 일수 => '내용' 
*/
            1 => '어제',
            2 => '그저께',
            3 => '그끄제',
            4 => '4일전',
            5 => '5일전',
            6 => '6일전',
            7 => '1주전',
.... 
중략
    );

- 일수에 따라 비교 할 말을 변수로 따로 뺐습니다.
- 위와 같은 형식으로 추가 시켜 주시면 됩니다.
- 형식상 일수와 초수의 글에 대해서만 대입시키도록 하였습니다.

jQuery Framework
본 스킨은 지난 로그인 스킨과 마찬가지로 jQuery를 이용하여 제작 되었습니다.
지난 번 보단 기능이 많이 내장 되어있습니다.

쿠키
본 스킨의 잠그기, 접기 기능의 쿠키 유지 기간 입니다.(기본 7일로 잡았습니다.)
rnq_newest_default/js/rnq_newest_default.js

var 
rnq_newest_default = {    /* cookie 유지 기간(일) 
*/
    date : 
7,

파일을 열어보시면 보기 쉽게 주석을 달아놨으니 원하시는 날짜 만큼 조정하시기 바랍니다.
ps : 0으로 할 경우 쿠키 생성이 되지 않습니다. 고로 페이지 새로고침 또는 이동 후에 최초 모습으로 가게 됩니다.

AJAX로 페이지 이동
본 기능을 넣을까 말까 하다가 넣었습니다. 하지만 넣긴 넣었지만 그리 추천하지는 않습니다.
해당 기능은 페이지 이동 시 AJAX를 이용하여 리플레쉬 하지 않고 이동하도록 해주는 기능 입니다.
rnq_newest_default/js/rnq_newest_default.js

/* ajax로 
페이지를 넘길지 예(true), 아니오(false) */ 
    ajax_mode : false,

파일을 열어보시면 보기 쉽게 주석을 달아놨으니 사용하실려면 true 아니면 그대로 두시기 바랍니다.
ps : 본 내용은 AJAX라도 해도 적은 트래픽으로 불러오는게 아닙니다. 그냥 일반 리플레쉬와 똑같은 트래픽이 발생되고
속도 또한 똑같습니다. 더 빠른 처리를 위해서는 스킨가지고만은 되질 않습니다.

잠그기 , 접기 기능
- 이 기능은 그냥 재미삼아 넣은 기능입니다.
단순한 디자인 가지고는 먼가 멋없어 보여서 잠그기와 접기 기능을 넣어봤습니다.
- 잠그기의 원래 목적은 관리자가 위젯은 출력하되 내용과 이동을 하지 못하도록 웹상에서 버튼 하나로 처리하도록 하는 목적이었으나,
너무 복잡해지고 그런 관계로 일단 단순한 놀이로 하였습니다.
- 접기 기능은 접고 펴고 하는건데 뭐 이런건 설명할 필요는 없겠죠.
- 본 기능은 쿠키를 가지고 이용 됩니다. 쿠키의 기간 만큼 화면상에 저장 됩니다.
- 허나 위젯의 위치나 선언 내용이 바뀌면 초기화 또는 꼬이게 되니 주의 하시기 바랍니다.(꼬여도 큰 문제는 없습니다. 다시 생성하면 되는 거니까요)

호환성
본 스킨의 호환테스트는
firefox 3.0.5,
opera 9.52,
safari 3.1.2(525.21),
Chrome(초기버전),
IE 7.0.5730.13
위 5가지로 테스트 했습니다.
IE 6이하는 테스트하지도 염두하지도 않았기 때문에 제대로 출력되지 않습니다.

IE6이하는 호환하지 않습니다.
앞으로 제가 만드는 모든 스킨은 IE6을 염두하지 않고 제작합니다.
너무 무의미하게 시간과 노력이 들어가기에, 요즘 대세도 IE6은 이미 물건너갔다고
보기 때문에 IE6인 사람들은 어쩔 수 없지만 앞으로 IE7이상에서 제작합니다.

가로 사이즈
기본 188px 입니다.(200px에 해당하는 크기)
css 파일(white.css,black.css) 제일 처음 줄 중에 .rnq_newest_notice 에 선언되어있으니 로마네스크 위젯을 이용하지 않을 경우에는
해당 크기를 조절해 주시기 바랍니다.

배경 이미지
배경이 png 이고 하나의 파일이 아니라 각 리스트 세로 크기 만큼 짤라 놓은 겁니다.
임의의 이미지를 만드시고 싶으신 분들은 해당 위젯의 images 폴더 안에 파일이 있으니 포토샵 등을 이용해서
크기는 그대로 두시고 이미지를 꾸며주시기 바랍니다.

박스 이미지
- 본 스킨의 박스는 뒷 배경을 바꿀 수 있도록 하였으며 박스 테두리는 png 파일로 되어있습니다. 하여 뒷 배경이 투명하게는 어렵습니다.
흰색 또는 검정색 배경이 아닌 다른 배경으로 사용하려면 스킨/images/(white,black)/box.png 파일을 포토샵 등으로 겉색을 바꾸셔야 합니다.
- 박스의 배경이미지는 총 17개를 만들어 봤습니다. 스킨/css/(red,green,pink).css 에서 /* Day Box 배경 */ 항목에서 숫자를 바꿔주시면 됩니다.
(박스 이미지 경로 : 스킨/images/box_background/01~17.jpg)

- 원하는 색으로 바꿔서 사용하세요.

주의
- 본 스킨을 로마네스크 최근 문서 위젯이 아닌 XE 기본 위젯에 넣을 경우 위의 페이지 기능 및 게시글 시간 여부는 표시되지 않습니다.
(언어 파일도 로딩 되지 않습니다.)
하지만 동작 과정에는 아무런 문제 없습니다.(잠그기,접기 기능은 정상 동작 함)

안내

본 스킨으로 되어있는