iGoogle みたいな動かし放題、作りたい放題のRssフィード表示画面を
簡単に実装できるライブラリです。prototype.js 非依存。
ダウンロードはここから
http://www.dhtmlgoodies.com/index.html?whichScript=dragable-boxes
インストール
フォルダを解凍してアップするだけ。
アップしたら
インストールルート/dragable-boxes/dragable-boxes
をひっぱたいてみましょう。
いきなり変なのがでるはず。
これ良く見るといきなり動かせるんですよね。
はいインストール完了！
まあ実際に必要なのはこれだけです
おきまりのインクルード
<script type=”text/javascript” src=”js/ajax.js”></script>
<script type=”text/javascript” src=”js/dragable-boxes.js”></script>表示させる div の配置
<div id=”floatingBoxParentContainer”></div>
おまけでデフォルトに戻すボタン
<a href=”#” onclick=”resetDragableBoxes();return false”>Reset back to default </a>
カスタマイズ
カスタマイズポイントは結構分かれています。
まず表示数とかのパラメータ
dragable-boxes.js の 21行目～の部分
/* USER VARIABLES */
var numberOfColumns = 3; //横に何分割するか
var columnParentBoxId = ‘floatingBoxParentContainer’; // 表示DIVのID名
var src_rightImage = ‘images/arrow_right.gif’; //右矢印画像
var src_downImage = ‘images/arrow_down.gif’; //下矢印画像
var src_refreshSource = ‘images/refresh.gif’; //更新ボタン画像
var src_smallRightArrow = ‘images/small_arrow.gif’; //小右矢印画像var transparencyWhenDragging = false; //ドラッグして重ねたときの動き true なら場所を入れ替える
var txt_editLink = ‘Edit’; //エディット画面へのリンク文字
var txt_editLink_stop = ‘End edit’; //エディット画面から抜けるときのリンク文字
var autoScrollSpeed = 4; //自動スクロール速度
var dragObjectBorderWidth = 1; //ドラッグした時の枠線の表示の大きさ（１は等倍）var useCookiesToRememberRSSSources = true; //クッキー使用可否
var nameOfCookie = ‘dragable_rss_boxes’; // クッキーを使うときのクッキー名
/* END USER VARIABLES */
デフォルト表示とRSS以外の表示系
dragable-boxes.js の 966行目～の部分
/* You customize this function */
function createDefaultBoxes()
{
if(cookieCounter==0){//ここにデフォルト表示させるBOXを書いていく
//設定は 名前,表示番号,BOXの高さ,RSSの内容の表示数,リロードまでの時間
//高さは指定すると固定になる、falseにしておけばグリグリ動かせる
//Js良くわからん人は1行コピーしてURLかえるだけでいいかな。createARSSBox(‘http://rss.cnn.com/rss/cnn_topstories.rss’,2,false,5,1);
}
/* Create static boxes */
//RSSじゃなくてHTMLとかの表示部分（これはJSに決めうちしないとだめみたい）
//とりあえず上の2行だけ変えたセットをコピーすれば作れるはず。
//ここから！
var htmlContentOfNewBox = ‘‘; //BOXの中身（HTML) Ajaxでとって来て表示するには処理かかないとだめかな。
var titleOfNewBox = ‘This is a static box’; //BOXのタイトル
if(!staticObjectArray[‘staticObject1′]){
var newIndex = createABox(1,100,false,’staticObject1’);
document.getElementById(‘dragableBoxContent’ + newIndex).innerHTML = htmlContentOfNewBox;
document.getElementById(‘dragableBoxHeader_txt’ + newIndex).innerHTML = titleOfNewBox;
}else{ // Box is stored in cookie – all we have to do is to move content into it.
document.getElementById(‘dragableBoxContent’ + staticObjectArray[‘staticObject1’]).innerHTML = htmlContentOfNewBox;
document.getElementById(‘dragableBoxHeader_txt’ + staticObjectArray[‘staticObject1’]).innerHTML = titleOfNewBox;}
hideHeaderOptionsForStaticBoxes(staticObjectArray[‘staticObject1’]);
//ここまで！setTimeout(‘saveCookies()’,100);
}
おしいなー RSSだけじゃなくてhtmlもURL指定で書き込めたら最高だったのに。
まあちょっといじるだけでできそうだけど。
にしてもこんなものがフリーではいるなんて凄い時代だ。
