dragable-boxes.js を使ってみた 8


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; //ドラッグした時の枠線の表示の大きさ(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指定で書き込めたら最高だったのに。
まあちょっといじるだけでできそうだけど。

にしてもこんなものがフリーではいるなんて凄い時代だ。


->