자바스크립트로 만든 더보기/접기(more/less) 소스입니다. 본 소스는 여러개의 게시물 중에 지정된 제한 높이 보다 긴 게시물만 더보기/접기 버튼을 일괄적으로 붙여주고 있습니다. 게시물 샘플 중에는 이미지가 포함된 것도 있고 플래시가 포함된 것도 있습니다. 구현 원리는 레이어 속성 중에 offsetHeight 속성으로 해당 레이어의 높이를 확인할 수 있고 이와 제한 높이를 비교해서 제한 높이 이외의 내용은 숨겨주고 바로 밑에 더보기 버튼을 붙여 주는 것입니다. 이는 서버 스크립트와 조합해서 블로그나 게시판에 적용해볼 수 있습니다. 이를 체험할 수 있는 하단에 제시된 HTML 소스의 실행화면은 아래 링크를 통해 확인할 수 있습니다. 자바스크립트 입문자 여러분들은 본 소스를 자신에 맞게 수정 개선해보시면 자바스크립트 학습에 도움이 될 것입니다.
[실행화면 확인 링크]
http://www.hompydesign.com/javascript/more/more_less.html
[더보기/접기 HTML 소스]
<HTML>
<HEAD>
<TITLE>More/Less TEST</TITLE>
<script type='text/javascript'>
<!--
var content_height = 112;
var content_idx_array = [1001,1002,1004,1005,1008];
var content_show_array = [];
var content_push_array = [];
for (i=0;i<content_idx_array.length;i++) {
content_show_array[content_idx_array[i]] = 'div_show_' + content_idx_array[i];
content_push_array[content_idx_array[i]] = 'div_push_' + content_idx_array[i];
}
function get_more_html(idx){
return "<a href=\"javascript:print_more('"+idx+"')\">--- [더보기] ---</a>";
}
function get_less_html(idx){
return "<a href=\"javascript:print_less('"+idx+"')\">--- [접기] ---</a>";
}
function print_less(idx){
sobj = d0cument.getElementById(content_show_array[idx]);
pobj = d0cument.getElementById(content_push_array[idx]);
if (sobj) {
sobj.style.height=content_height+'px';
pobj.innerHTML = get_more_html(idx);
}
}
function print_more(idx){
sobj = d0cument.getElementById(content_show_array[idx]);
pobj = d0cument.getElementById(content_push_array[idx]);
if (sobj) {
sobj.style.height='';
pobj.innerHTML = get_less_html(idx);
}
}
function init_more_less(){
var i, max=content_idx_array.length;
for (i=0;i<max;i++) {
sobj = d0cument.getElementById(content_show_array[content_idx_array[i]]);
pobj = d0cument.getElementById(content_push_array[content_idx_array[i]]);
if (sobj && parseInt(sobj.offsetHeight)>content_height) {
sobj.style.height=content_height+'px';
pobj.innerHTML = get_more_html(content_idx_array[i]);
}
}
}
function onload_event(){
init_more_less();
}
if (window.attachEvent) window.attachEvent('onload', onload_event);
else if (window.addEventListener) window.addEventListener('load', onload_event, false);
-->
</script>
<style>
div{margin:0; padding:0;}
body {font-family:Dotum, tahoma, sans-serif; font-size:12px;}
.my_title {font-weight:bold; margin-top:20px;}
.my_show {width:460px; overflow:hidden; word-wrap: break-word; word-break:break-all;}
.my_push {font-size:11px; margin-top:4px;}
a:link {color:blue; text-decoration:none; }
a:visited {color:blue; text-decoration:none;}
a:hover {color:blue; text-decoration:underline;}
</style>
</HEAD>
<BODY>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/517" target="_blank">위자드팩토리 위젯으로 블로그를 토핑해볼까?</a></div>
<div id="div_show_1001" class="my_show">
몇일전 위자드웍스에 의해 런칭한 위자드 팩토리에 있는 이쁜 위젯들로 블로그를 토핑해보면 어떨까요? 막 오픈한 서비스라서 선택할 수 있는 위젯의 폭이 아직은 좁은 편이나 좀더 쉽고 좀더 간편하게 사용할 수 있도록 구성한 유저 인터페이스와 아기자기한 디자인이 돋보입니다.<br>
<img src="http://hompy.info/attach/1/1182021495.jpg"><br>
유저가 직접 위젯을 제작할 수 있도록 이미 공개되었고 이번에 추가 버전업 된 오픈API도 제공하고 있으니 유저가 손수 만들어서 올릴 수 있습니다. 이렇게 만들어진 공개된 위젯은 위자드 팩토리에 의해 다양한 채널로 배포될 수 있습니다. 앞으로 퍼가고 싶은 다양하고 개성있는 위젯들이 얼마나 많이 진열될 것이냐에 따라 위젯공장의 역할을 할 수 있을지 여부가 결정될 것 같습니다. 위젯공장에 있는 눈에 띄는 시계,날씨,아기 위젯과 이번에 추천 블로그 선정으로 위젯공장에 등록된 제 블로그 RSS피드 위젯을 띄워봅니다.
</div>
<div id="div_push_1001" class="my_push"></div>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/516" target="_blank">뉴스 기사 소재, 블로깅 소스를 찾을 수 있는 뉴스와이어</a></div>
<div id="div_show_1002" class="my_show">
기자나 블로거들이 뉴스 기사 소재, 블로깅 소스를 찾을 수 있는 뉴스와이어라는 홈페이지가 있습니다. 2004년에 오픈한 이 서비스를 이용하는 기자분들이 많은 것으로 알고 있고 또한 기업이나 정부,기관,단체 입장에서 보면 홍보할 수 있는 채널로 활용될 수 있어 홍보나 마케팅에 관여하는 분들이 이 서비스를 많이 이용하고 있기도 합니다. 네이버 백과사전으로 검색해 보면 아래와 같은 소개가 나오는군요.
</div>
<div id="div_push_1002" class="my_push"></div>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/515" target="_blank">위젯 공유 서비스 위자드 팩토리 런칭 파티 후기</a></div>
<div id="div_show_1004" class="my_show">
저번에 위자드닷컴 추천 블로그로 선정되어 VIP(?) 초대장을 받고 어제 위젯 공유 서비스 위자드 팩토리 런칭 파티에 놀러 갔었습니다. 개인적으로 플래시 위젯 만드는 일이 취미이기도 하고 몇년 전 표철민 대표님과 메시지를 교환한 인연도 있었고 이번에 선정된 추천 블로거들도 만나볼려고 겸사겸사 퇴근하고 연세대 공학원에 마련된 행사장으로 직행했습니다. "1부, 위자드 팩토리 소개 및 시연회"에선 라면 이야기와 하루 2시간 자며 만들었다는 이야기가 인상적이었습니다. 위자드 웍스에 대한 자세한 회사 소개와 위자드 팩토리에 대한 간단한 소개를 들을 수 있었습니다. 1부는 식사 시간을 많이 늦출 수 없는 이유로 간소하게 진행된 것 같습니다. 위자드웍스가 어떤 일에 애정을 쏟고 있는 지 알 수 있게 되었고 앞으로 위젯 관련해서 어떤 일들이 벌어질 지 예측할 수 있는 시간이었습니다. "2부, 후원사들과 함께 하는 신나는 파티"에서는 깔끔한 식단의 뷔페식 식사 시간이 있었고 위젯을 내장한 흑맥주를 마시며 스텐딩 파티 형태의 참가자들 간 만남의 시간이 있었습니다. 예상 만큼 많은 블로거들과 인사를 나누지 못했고 위젯 관련해서 많은 정보를 교환하지 못해 아쉬운 부분이 있었습니다. 앞으로 또 다른 이름의 행사로 그 아쉬움을 채울 수 있는 기회가 만들어 질 것이라 기대하며 행사장을 빠져나왔습니다. 빠져나오는 중에 명찰을 반납하고 나니 "웹 패러다임을 바꾸는 위젯" 이라는 책이 포함된 선물을 한 보따리 주시더군요. 받은 선물을 들고 귀가 하느라 팔이 빠지는 줄 알았습니다.^^ 선물 감사했습니다.
위자드웍스 임직원 여러분들이 마련한 뜻 깊은 행사 즐거웠습니다. 앞으로 위자드웍스가 끊임없는 발전을 해서 위젯 업계의 부흥기를 이끌어갈 수 있기를 바라며 언제나 블로거들에게 사랑 받는 기업이 되주시길 바랍니다. 위하여!!!
</div>
<div id="div_push_1004" class="my_push"></div>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/514" target="_blank">전문직 직장인들이 함께하는 가을 축제가 있습니다.</a></div>
<div id="div_show_1005" class="my_show">
2008년 11월 1일에 전문직 직장인들과 함께하는 링크나우 가을 축제가 있습니다. 대학가요제 입상 경력이 있는 직장인 밴드와 가수들의 공연도 즐길 수 있고 노래와 춤 그리고 연주가 있는 직장인들의 장기자랑도 보며 즐거운 시간 가질 수 있게 될겁니다. 상품도 있다고 하니 장기자랑에 참여해보는 것도 좋겠지요. 더불어 부페 식사도 하고 맥주도 마시며 만남과 교류의 시간도 가질 수 있습니다. 행사명은 "링크나우 가을 페스티벌-음악과 만남의 밤"이고 최대 참석인원은 200명이군요. 행사 예약 페이지를 보시면 자세한 행사 내용과 어떤 분들이 참가하는 지 확인할 수 있습니다. 일정이 맞는 분들은 부담없이 참여해봐도 좋겠습니다.
</div>
<div id="div_push_1005" class="my_push"></div>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/513" target="_blank">플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #2</a></div>
<div id="div_show_1008" class="my_show">
플래시로 외부 파일 데이터를 가져오기 위한 웹서버와 통신하기 두번째 샘플 소스 코드입니다. 플래시 액션스크립트 초급자를 위해 학습용으로 부담없이 테스트할 수 있도록 만들었으므로 차근 차근 살펴 보시면 이해에 도움이 될 것이라 생각됩니다.<br>
<EMBED pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.hompydesign.com/club/blogchat.swf" width="190" height="200" type="application/x-shockwave-flash" quality="high" wmode="transparent"></EMBED><br>
아래 예제 처럼 LoadVars 객체를 이용해서 통신을 하는 것이 먼저 소개해드렸던 XML 객체를 이용하는 것 보다는 좀더 손쉽게 사용될 수 있습니다. 그러나 전달해야할 데이터가 복잡한 구조를 가질 경우 XML 객체를 이용하는 것 보다 혼란스러울 수 있으며 눈으로 손쉽게 데이터를 해석하기 어려울 수 있습니다. 아래 제공하는 샘플 소스 코드를 필요에 맞게 수정하고 개선해보면 어떻게 사용하는 것인지 이해하기 쉽습니다. 잘 익혀두었다가 사용자의 데이터를 등록하고 갱신하는 응용 프로그램 모양의 플래시를 만드는데 활용해보세요.
</div>
<div id="div_push_1008" class="my_push"></div>
</BODY>
</HTML>
[실행화면 확인 링크]
http://www.hompydesign.com/javascript/more/more_less.html
[더보기/접기 HTML 소스]
<HTML>
<HEAD>
<TITLE>More/Less TEST</TITLE>
<script type='text/javascript'>
<!--
var content_height = 112;
var content_idx_array = [1001,1002,1004,1005,1008];
var content_show_array = [];
var content_push_array = [];
for (i=0;i<content_idx_array.length;i++) {
content_show_array[content_idx_array[i]] = 'div_show_' + content_idx_array[i];
content_push_array[content_idx_array[i]] = 'div_push_' + content_idx_array[i];
}
function get_more_html(idx){
return "<a href=\"javascript:print_more('"+idx+"')\">--- [더보기] ---</a>";
}
function get_less_html(idx){
return "<a href=\"javascript:print_less('"+idx+"')\">--- [접기] ---</a>";
}
function print_less(idx){
sobj = d0cument.getElementById(content_show_array[idx]);
pobj = d0cument.getElementById(content_push_array[idx]);
if (sobj) {
sobj.style.height=content_height+'px';
pobj.innerHTML = get_more_html(idx);
}
}
function print_more(idx){
sobj = d0cument.getElementById(content_show_array[idx]);
pobj = d0cument.getElementById(content_push_array[idx]);
if (sobj) {
sobj.style.height='';
pobj.innerHTML = get_less_html(idx);
}
}
function init_more_less(){
var i, max=content_idx_array.length;
for (i=0;i<max;i++) {
sobj = d0cument.getElementById(content_show_array[content_idx_array[i]]);
pobj = d0cument.getElementById(content_push_array[content_idx_array[i]]);
if (sobj && parseInt(sobj.offsetHeight)>content_height) {
sobj.style.height=content_height+'px';
pobj.innerHTML = get_more_html(content_idx_array[i]);
}
}
}
function onload_event(){
init_more_less();
}
if (window.attachEvent) window.attachEvent('onload', onload_event);
else if (window.addEventListener) window.addEventListener('load', onload_event, false);
-->
</script>
<style>
div{margin:0; padding:0;}
body {font-family:Dotum, tahoma, sans-serif; font-size:12px;}
.my_title {font-weight:bold; margin-top:20px;}
.my_show {width:460px; overflow:hidden; word-wrap: break-word; word-break:break-all;}
.my_push {font-size:11px; margin-top:4px;}
a:link {color:blue; text-decoration:none; }
a:visited {color:blue; text-decoration:none;}
a:hover {color:blue; text-decoration:underline;}
</style>
</HEAD>
<BODY>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/517" target="_blank">위자드팩토리 위젯으로 블로그를 토핑해볼까?</a></div>
<div id="div_show_1001" class="my_show">
몇일전 위자드웍스에 의해 런칭한 위자드 팩토리에 있는 이쁜 위젯들로 블로그를 토핑해보면 어떨까요? 막 오픈한 서비스라서 선택할 수 있는 위젯의 폭이 아직은 좁은 편이나 좀더 쉽고 좀더 간편하게 사용할 수 있도록 구성한 유저 인터페이스와 아기자기한 디자인이 돋보입니다.<br>
<img src="http://hompy.info/attach/1/1182021495.jpg"><br>
유저가 직접 위젯을 제작할 수 있도록 이미 공개되었고 이번에 추가 버전업 된 오픈API도 제공하고 있으니 유저가 손수 만들어서 올릴 수 있습니다. 이렇게 만들어진 공개된 위젯은 위자드 팩토리에 의해 다양한 채널로 배포될 수 있습니다. 앞으로 퍼가고 싶은 다양하고 개성있는 위젯들이 얼마나 많이 진열될 것이냐에 따라 위젯공장의 역할을 할 수 있을지 여부가 결정될 것 같습니다. 위젯공장에 있는 눈에 띄는 시계,날씨,아기 위젯과 이번에 추천 블로그 선정으로 위젯공장에 등록된 제 블로그 RSS피드 위젯을 띄워봅니다.
</div>
<div id="div_push_1001" class="my_push"></div>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/516" target="_blank">뉴스 기사 소재, 블로깅 소스를 찾을 수 있는 뉴스와이어</a></div>
<div id="div_show_1002" class="my_show">
기자나 블로거들이 뉴스 기사 소재, 블로깅 소스를 찾을 수 있는 뉴스와이어라는 홈페이지가 있습니다. 2004년에 오픈한 이 서비스를 이용하는 기자분들이 많은 것으로 알고 있고 또한 기업이나 정부,기관,단체 입장에서 보면 홍보할 수 있는 채널로 활용될 수 있어 홍보나 마케팅에 관여하는 분들이 이 서비스를 많이 이용하고 있기도 합니다. 네이버 백과사전으로 검색해 보면 아래와 같은 소개가 나오는군요.
</div>
<div id="div_push_1002" class="my_push"></div>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/515" target="_blank">위젯 공유 서비스 위자드 팩토리 런칭 파티 후기</a></div>
<div id="div_show_1004" class="my_show">
저번에 위자드닷컴 추천 블로그로 선정되어 VIP(?) 초대장을 받고 어제 위젯 공유 서비스 위자드 팩토리 런칭 파티에 놀러 갔었습니다. 개인적으로 플래시 위젯 만드는 일이 취미이기도 하고 몇년 전 표철민 대표님과 메시지를 교환한 인연도 있었고 이번에 선정된 추천 블로거들도 만나볼려고 겸사겸사 퇴근하고 연세대 공학원에 마련된 행사장으로 직행했습니다. "1부, 위자드 팩토리 소개 및 시연회"에선 라면 이야기와 하루 2시간 자며 만들었다는 이야기가 인상적이었습니다. 위자드 웍스에 대한 자세한 회사 소개와 위자드 팩토리에 대한 간단한 소개를 들을 수 있었습니다. 1부는 식사 시간을 많이 늦출 수 없는 이유로 간소하게 진행된 것 같습니다. 위자드웍스가 어떤 일에 애정을 쏟고 있는 지 알 수 있게 되었고 앞으로 위젯 관련해서 어떤 일들이 벌어질 지 예측할 수 있는 시간이었습니다. "2부, 후원사들과 함께 하는 신나는 파티"에서는 깔끔한 식단의 뷔페식 식사 시간이 있었고 위젯을 내장한 흑맥주를 마시며 스텐딩 파티 형태의 참가자들 간 만남의 시간이 있었습니다. 예상 만큼 많은 블로거들과 인사를 나누지 못했고 위젯 관련해서 많은 정보를 교환하지 못해 아쉬운 부분이 있었습니다. 앞으로 또 다른 이름의 행사로 그 아쉬움을 채울 수 있는 기회가 만들어 질 것이라 기대하며 행사장을 빠져나왔습니다. 빠져나오는 중에 명찰을 반납하고 나니 "웹 패러다임을 바꾸는 위젯" 이라는 책이 포함된 선물을 한 보따리 주시더군요. 받은 선물을 들고 귀가 하느라 팔이 빠지는 줄 알았습니다.^^ 선물 감사했습니다.
위자드웍스 임직원 여러분들이 마련한 뜻 깊은 행사 즐거웠습니다. 앞으로 위자드웍스가 끊임없는 발전을 해서 위젯 업계의 부흥기를 이끌어갈 수 있기를 바라며 언제나 블로거들에게 사랑 받는 기업이 되주시길 바랍니다. 위하여!!!
</div>
<div id="div_push_1004" class="my_push"></div>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/514" target="_blank">전문직 직장인들이 함께하는 가을 축제가 있습니다.</a></div>
<div id="div_show_1005" class="my_show">
2008년 11월 1일에 전문직 직장인들과 함께하는 링크나우 가을 축제가 있습니다. 대학가요제 입상 경력이 있는 직장인 밴드와 가수들의 공연도 즐길 수 있고 노래와 춤 그리고 연주가 있는 직장인들의 장기자랑도 보며 즐거운 시간 가질 수 있게 될겁니다. 상품도 있다고 하니 장기자랑에 참여해보는 것도 좋겠지요. 더불어 부페 식사도 하고 맥주도 마시며 만남과 교류의 시간도 가질 수 있습니다. 행사명은 "링크나우 가을 페스티벌-음악과 만남의 밤"이고 최대 참석인원은 200명이군요. 행사 예약 페이지를 보시면 자세한 행사 내용과 어떤 분들이 참가하는 지 확인할 수 있습니다. 일정이 맞는 분들은 부담없이 참여해봐도 좋겠습니다.
</div>
<div id="div_push_1005" class="my_push"></div>
<div id="div_title_1001" class="my_title"><a href="http://hompy.info/513" target="_blank">플래시, 외부 파일 데이터 가져오기 통신 샘플 소스 #2</a></div>
<div id="div_show_1008" class="my_show">
플래시로 외부 파일 데이터를 가져오기 위한 웹서버와 통신하기 두번째 샘플 소스 코드입니다. 플래시 액션스크립트 초급자를 위해 학습용으로 부담없이 테스트할 수 있도록 만들었으므로 차근 차근 살펴 보시면 이해에 도움이 될 것이라 생각됩니다.<br>
<EMBED pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.hompydesign.com/club/blogchat.swf" width="190" height="200" type="application/x-shockwave-flash" quality="high" wmode="transparent"></EMBED><br>
아래 예제 처럼 LoadVars 객체를 이용해서 통신을 하는 것이 먼저 소개해드렸던 XML 객체를 이용하는 것 보다는 좀더 손쉽게 사용될 수 있습니다. 그러나 전달해야할 데이터가 복잡한 구조를 가질 경우 XML 객체를 이용하는 것 보다 혼란스러울 수 있으며 눈으로 손쉽게 데이터를 해석하기 어려울 수 있습니다. 아래 제공하는 샘플 소스 코드를 필요에 맞게 수정하고 개선해보면 어떻게 사용하는 것인지 이해하기 쉽습니다. 잘 익혀두었다가 사용자의 데이터를 등록하고 갱신하는 응용 프로그램 모양의 플래시를 만드는데 활용해보세요.
</div>
<div id="div_push_1008" class="my_push"></div>
</BODY>
</HTML>
'JavaScript' 카테고리의 다른 글
| ASP.NET 개발자들을 위한 JavaScript Tips - Part 1 (0) | 2009.01.02 |
|---|---|
| 자바스크립트로 구성된 이미지 슬라이더입니다. (0) | 2009.01.02 |
| 움직이는 막대그래프 자바스크립트 소스 (0) | 2009.01.02 |
| 자바스크립트 #1 객체지향 흉내내기 (0) | 2009.01.02 |
| 한글 체크 자바스크립트 (0) | 2009.01.02 |
