[예제] 올블로그 위젯 소스
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://wzdapi.com/widget/">
<head>
<link rel="stylesheet" type="text/css" href="/Design/UWA.css" />
<script type="text/javascript" src="http://www.wzdapi.com/widget/emulator.js"></script>
<meta name="author" content="WZDWORKS" />
<meta name="description" content="애견미용스타일을 한번에!" />
<meta name="apiVersion" content="1.0" />
<meta name="inline" content="true" />
<meta name="debugMode" content="false" />
<meta name="autoRefresh" content="1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/png" href="http://beta.wzd.com/Design/images/widget/icon_allblog.png" />
<title>올블로그</title>
<widget:preferences>
<widget:preference name="limit" type="range" label="보여질 개수" defaultValue="5" step="1" min="1" max="25" />
<widget:preference name="omit" type="boolean" label="제목 한줄로 표시" />
<widget:preference name="tab" type="hidden" defaultValue="allPosts" />
</widget:preferences>
<style type="text/css">
/*<![CDATA[*/
/* search type 1*/
body ul, body ul li {
list-style : none;
}
body a.showAll {
display : block;
height : 15px;
background : url("/Design/images/ui/icon_ol_viewall.gif") no-repeat 0 0;
padding: 2px 0 0 18px;
font-family: Dotum, sans-serif;
font-weight : bolder;
letter-spacing: -1px;
color : black;
margin-top : 10px;
}
body a.showAll:link,
body a.showAll:visited
{
text-decoration : underline;
}
body a.showAll:hover,
body a.showAll:active
{
text-decoration : none;
}
body img {
border : 0;
}
/* search type 1*/
form.searchType1 {
border-top: 1px solid #cdcdcd;
border-bottom: 1px solid #cdcdcd;
background: url(/Design/images/ui/bg_srch1.gif) repeat-x #efefef;
text-align: center;
padding: 4px 0 6px 0;
}
form.searchType1 select {
height: 21px;
vertical-align: bottom;
}
form.searchType1 input.text {
border: 1px solid #878787;
/* background: url(images/ui/bg_srch1_inp.gif) center right no-repeat #fff;*/
padding: 3px 2px 0 3px;
width: 150px;
height: 18px;
vertical-align: bottom;
}
form.searchType1 input.btn {
margin: 2px 0 0 4px;
vertical-align : bottom;
}
span.pubDate {
display : block;
float: left;
}
div.contentsContainer ul
{
padding : 0;
margin : 10px 0 0 0;
}
li.contentsList {
background-image: none;
padding : 4px 14px 8px;
border-bottom : 1px solid #DFE5E9;
}
li.contentsList.even {
background-color: #F4F6F7;
}
li.contentsList.odd {
background-color : #FFF;
}
body div.bottomBar {
margin: 6px;
height: 38px;
width : 100%;
/* clear: both;background: url(/Design/images/widget/mncast/w-bg_round1.gif) no-repeat top left #ededed; */
}
body div.wrap {
width: 100%;
height: 34px;
padding: 0;
/* background: url(/Design/images/widget/mncast/w-bg_round2.gif) no-repeat top right; */
}
div.wrap div.pager {
float:right;
margin: 10px 4px 0;
}
div.wrap div.btns {
float:left;
margin-left: 4px;
width : 90px;
}
span.title {
display : block;
font-weight : bolder;
margin : 0;
width : 100%;
padding: 4px 0 2px;
overflow: hidden;
}
body.omit span.title{
white-space: normal;
}
span.title a {
white-space : nowrap;
overflow: hidden;
color : #265EA8;
font-size : 12px;
text-decoration: none;
border : 0;
}
span.title a:link,
span.title a:visited {
text-decoration: none;
}
li span.desc {
white-space : nowrap;
overflow: hidden;
font-size: 11px;
color : #B5B5B5;
white-space: normal;
padding-top: 3px;
}
li span.desc a:link,
li span.desc a:visited,
{
color : #B5B5B5;
}
li span.desc a:hover,
li span.desc a:active
{
color : #B5B5B5;
text-decoration : underline;
}
div.summary {
position : absolute;
width : 240px;
z-index : 10;
background: url(/Design/images/widget/allblog/w-allblog_bg_summary.gif) repeat-x top left;
color: #6e8597;
background-color : #FFF;
border-top: 1px solid #cdd9e1;
border-left: 1px solid #cdd9e1;
border-right: 2px solid #cdd9e1;
border-bottom: 2px solid #cdd9e1;
margin: -5px -8px -6px 0;
padding: 20px 8px 2px 6px;
}
div.summary div{
background-color : #FFF;
}
div.summary div.title{
width : 100%;
font-weight : bold;
background-color : #FFF;
white-space : nowrap;
overflow : hidden;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
var WZD_Allblog = {
_data : null,
_elements : {},
_item : null,
_pager : null,
tab : false,
init : function() {
this._initEl();
this._initTab();
},
_getPagerContainer : function () {
return WZD_Allblog._currentContainer.getElementsByClassName('pager')[0];
},
_initPager : function(total, count) {
var pager = this._pager = new UWA.Controls.Pager;
pager.onChange = this._render.bind(this);
pager.setMaxPageNumber(Math.ceil(total / count));
this._getPagerContainer().innerHTML = '';
pager.appendTo(this._getPagerContainer());
},
load : function(oXML) {
this._data = oXML.getElementsByTagName('item');
this._setTab();
},
_setTab : function(){
var tabName = widget.getValue('tab') || 'allPosts';
WZD_Allblog.tab.selectTab(tabName);
},
_initEl : function() {
var summary = widget.body.getElementsByClassName('summary')[0];
var contentsContainer = widget.body.getElementsByClassName('contentsContainer')[0];
this._elements.tabContainer = widget.body.getElementsByClassName('tabContainer')[0];
this._elements.summary = summary;
var containers = [];
var isOmit = widget.getValue('omit') || false;
if(isOmit) {
//전체보기
widget.body.addClassName('omit');
}
$A(contentsContainer.childNodes).each( function(item, index) {
if(!item.tagName || !item.tagName.match(/div/i)){
return;
}
containers.push(item);
}.bind(this));
this._elements.allPostsContainer = containers[0];
this._elements.votedContainer = containers[1];
this._elements.issuesContainer = containers[2];
$A(containers).each( function(item, index) {
UWA.$element(item).getElementsByClassName('wrap')[0].hide();
});
this._elements.containers = containers;
},
_initTab : function() {
if(WZD_Allblog.tab) return;
var tab = new UWA.Controls.TabView;
tab.addTab('allPosts', {text : '전체글'});
tab.addTab('voted', {text : '추천글'});
tab.addTab('issues', {text : '이슈글'});
tab.observe('activeTabView', this._showContainer.bind(this));
tab.appendTo(this._elements.tabContainer);
WZD_Allblog.tab = tab;
},
_showContainer : function(tabId){
var tabId = tabId.split(' ')[0];
widget.setValue('tab', tabId);
this._hideAllContainers();
WZD_Allblog._currentContainer = this._elements[tabId + 'Container'];
WZD_Allblog._currentContainer.show();
WZD_Allblog._currentContainer.getElementsByClassName('wrap')[0].show();
widget.setValue('tab', tabId);
UWA.Data.getXml(WZD_Allblog.sourceUrl[tabId], function(xml) {
this._data = xml.getElementsByTagName('item');
this._render(1)
}.bind(this));
},
_hideAllContainers : function() {
var containers = this._elements.containers;
$A(containers).each(function(item, index) {
item.removeClassName('Container');
item.hide();
});
return;
},
_render : function(page) {
var items = this._data;
var total = items.length;
var count = widget.getValue('limit') || 5;
var page = page || 1;
if(page == 1) {
this._initPager(total, count);
}
var offset = page - 1;
var ul =WZD_Allblog._currentContainer.getElementsByTagName('ul')[0];
ul.innerHTML = '';
$A(this._data).each(function(item, index) {
if(index < offset * count || index >= page * count) {
return;
}
var listElement = widget.createElement('li');
listElement.addClassName('contentsList');
if(index % 2) {
listElement.addClassName('even');
} else {
listElement.addClassName('odd');
}
var titleEl = this._getTitle(item, index);
var desc = this._getDescription(item);
listElement.appendChild(titleEl);
listElement.appendChild(desc);
ul.appendChild(listElement);
}.bind(this));
},
_procDate : function(date) {
var parsed = Date.parse(date);
var date = new Date(parsed);
var morningOrNot = date.getHours() <= 12 ? '오전 ' : '오후 ';
morningOrNot += date.getHours() > 12 ? date.getHours()-12 : date.getHours();
return date.getMonth()+1 + '월 ' + date.getDate()+ '일 ' + morningOrNot +'시 ' + date.getMinutes() +'분' + ' | ';
},
_getBlogName : function(item) {
var source = item.getElementsByTagName('source')[0];
var url = source.getAttribute('url');
return '<a href="'+url+'" target="_blank">'+source.firstChild.nodeValue+'</a>';
},
_getDescription : function(item) {
var desc = widget.createElement('span');
desc.addClassName('desc');
var date = this._procDate(item.getElementsByTagName('pubDate')[0].childNodes[0].nodeValue);
desc.setText(date);
desc.innerHTML += this._getBlogName(item);
return desc;
},
tooltipHTML : function(title, desc){
desc = desc.stripTags();
return '<div class="title">'+title+'</div><div>'+desc+'</div>';
},
_getTitle : function(item, index) {
var titleEl = widget.createElement('span');
var link = item.getElementsByTagName('link')[0].childNodes[0].nodeValue;
var titleAnchor = widget.createElement('a');
titleAnchor.setAttribute('index', index);
titleAnchor.href = link;
titleAnchor.target = '_blank';
var title = this._data[index].getElementsByTagName('title')[0].firstChild.nodeValue;
var desc = this._data[index].getElementsByTagName('description')[0].firstChild.nodeValue;
var tooltipText = this.tooltipHTML(title, desc);
UWA.Utils.setTooltip(titleAnchor, tooltipText, 240);
var title = item.getElementsByTagName('title')[0].childNodes[0].nodeValue;
titleAnchor.setText(title);
titleEl.appendChild(titleAnchor);
titleEl.addClassName('title');
return titleEl;
},
selectType : function(formEl) {
if(formEl.getElementsByTagName('select')[0].value == 2) {
formEl.action = 'http://tags.allblog.net';
} else {
formEl.action = 'http://search.allblog.net';
}
}
};
widget.onRefresh = widget.onLoad = function() {
WZD_Allblog.init();
WZD_Allblog.sourceUrl = {allPosts : 'http://rss.allblog.net/AllPosts.xml', voted : 'http://rss.allblog.net/MyBestPosts.xml', issues : 'http://rss.allblog.net/issue/all.xml'};
try {
UWA.Data.getXml(WZD_Allblog.sourceUrl.allPosts, WZD_Allblog.load.bind(WZD_Allblog));
widget.body.getElementsByTagName('form')[0].onsubmit = WZD_Allblog.selectType.bind(this);} catch(e) {alert(e);}
};
/*]]>*/
</script>
</head>
<body>
<form class="searchType1" action="http://search.allblog.net/" target="_blank">
<select name="type" ><option value="1">검색</option><option value="3">블로그</option><option value="2">태그</option></select>
<input type="text" class="text" name="k"/><input type="image" class="btn" src="/Design/images/ui/btn_search1.gif" />
</form>
<div class="tabContainer">
</div>
<div class="contentsContainer">
<div class="allPosts Container">
<ul></ul>
<div class="bottomBar">
<div class="wrap">
<div class="btns">
<a href="http://archive.allblog.net/" target="_blank" class="showAll">모두보기</a>
</div>
<div class="pager"></div>
</div>
</div>
</div>
<div class="voted Container" style="display : none">
<ul></ul>
<div class="bottomBar">
<div class="wrap">
<div class="btns">
<a href="http://archive.allblog.net/?opt=yesterday" target="_blank" class="showAll">모두보기</a>
</div>
<div class="pager"></div>
</div>
</div>
</div>
<div class="issues Container" style="display : none">
<ul></ul>
<div class="bottomBar">
<div class="wrap">
<div class="btns">
<a href="http://issue.allblog.net/" target="_blank" class="showAll">모두보기</a>
</div>
<div class="pager"></div>
</div>
</div>
</div>
</div>
<div class="summary" style="display : none">
<div class="title"></div>
<div></div>
</div>
</body>
</html>
History
Last edited on 06/23/2009 09:24 by puppy mam
Comments (0)