2010年9月14日火曜日

UI Tabにフィード

concrete5で、jQueryのTabsをつかって、複数RSSフィードを実装しようと思い、試行錯誤したのでメモです。

普通のRSSブロックをTabsの各コンテンツ(divタグ内)にしようと思うも、自動でid,classがふられたdivが生成されてうまくいかず、まず悩みました。
そこで、HTMLブロックを使ってdivでくくってやろうとしますが、RSSフィードをうまくラップできません。
(RSSフィードブロックの上下を<div id="tabs-1">と</div>でくくってやろうとしても、勝手に閉じられてしまいます。。。 )

最後の手段として、無料のPHPブロックを導入し、そいつで無理矢理HTMLをechoで吐き出させ、
Google AJAX feed APIをつかってFeedさせたら無事表示^^
良かったっす。
(普通にフィードさせるなら、Google API+HTMLブロックで十分ですね。自分のケースでは、他にもPHPで読み込ませるものがあったので、PHPブロックが必要でした。)

あ、jQueryのUIは、基本がすでにconcrete5の中に組み込まれているので(要バージョンチェック)、
コンフリクトしないtabsのソースとcss,imagesをひっぱってきて、
それぞれ、トップディレクトリ配下のCSSとJSディレクトリ内に配置し、
「追加ヘッダー要素」でインクルードさせました。該当ページの。

この「追加ヘッダー要素」がかなり使えるしろものですが、
concrete5の編集時に現れる上のバーの「設定」の「カスタム属性」の中で「追加ヘッダー要素」を選ぶと、書き込み欄が出るので、
そこに普通のHTMLやPHPファイルに書くように、jsファイルのインクルードや、スクリプト書きができます。

あ~それにしても、Tabs+RSS Feedが実現できて幸せでした。
便利!

0 件のコメント:

コメントを投稿