Snap Preview Anywhere を DHTML で使ってみた。コンテナは BLOGRANGER API です。

<script type="text/javascript">
//<![CDATA[

var getblogs = new Ranger.BlogSearch();
getblogs.successHandler(ongetblogs);
getblogs.startHandler(function(activeCount) {
  if (activeCount==0)
    Element.show('indicator');
});
getblogs.endHandler(function(activeCount) {
  if (activeCount==0)
    Element.hide('indicator');
});

// run
function run(q) {
  getblogs.needsTitle();
  getblogs.needsBlog();
  getblogs.needsBody(80, q);
  getblogs.needsDate();
  getblogs.searchByKeyword(q, 1, 10);
}

// ongetblogs
function ongetblogs(result) {
  if (result.totalResults==0)
    return $('blogs').innerHTML = 'ブログは見つかりませんでした。';
  $('blogs').innerHTML = '';
  $('blogs').appendChild(result.results.inject(
    document.createElement('ol'), function(ol, v) {

    var a = document.createElement('a');
    a.href = v.url;
    a.appendChild(document.createTextNode(v.title));
    var entry = document.createElement('div');
    entry.className = 'entry';
    entry.appendChild(a);

    snap_preview_anywhere.add_link_events(a);

    var a = document.createElement('a');
    a.href = v.blogurl;
    a.appendChild(document.createTextNode(v.blogname));
    var blog = document.createElement('div');
    blog.className = 'blog';
    blog.appendChild(a);

    snap_preview_anywhere.add_link_events(a);

    var body = document.createElement('div');
    body.className = 'body';
    body.innerHTML = v.body;

    var date = new Date();
    date.setTime(v.date*1000);
    date = date.toLocaleString();
    var rel = document.createElement('div');
    rel.className = 'rel';
    rel.appendChild(document.createTextNode(date));

    var li = document.createElement('li');
    li.appendChild(entry);
    li.appendChild(blog);
    li.appendChild(body);
    li.appendChild(rel);
    ol.appendChild(li);
    return ol;
  }));
}

//]]>
</script>

<form name="f" onsubmit="run(this.q.value); return false;">
<input type="text" name="q" value="" size="20" />
<input type="submit" name="g" value="検索" />
</form>

<div id="indicator" style="display:none;"></div>
<div id="blogs"></div>