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