iGoogleのようにドラッグ&ドロップできるRSSボックス - DHTMLgoodies.com

昨日iGoogleのようにコンテンツを自由に移動可能にするスクリプトということで2つ紹介してみましたが、1つ目の設置方法を紹介してみます。
設定はちょっと難しいですがcookieも使えて便利ですね。 まず基本情報をdragable-boxes.jsで指定します。
/* USER VARIABLES */

var numberOfColumns = 3;  // カラム数を指定
var columnParentBoxId = 'floatingBoxParentContainer'; //RSSボックスをhtml内に表示するときの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;
var txt_editLink = 'Edit';     //フィードを編集するボタンの文字
var txt_editLink_stop = 'End edit';   //編集を終わるボタンの文字
var autoScrollSpeed = 4;  // ドラック時のスクロールスピード
var dragObjectBorderWidth = 1;	// ボックスの挿入位置を示す枠の幅

var useCookiesToRememberRSSSources = true;  //cookieを使うかどうか

var nameOfCookie = 'dragable_rss_boxes';	// cookie名を指定

ボックスの中身や位置なども全てdragable-boxes.jsで変更します。ポイントは下のほう。
/* You customize this function */
function createDefaultBoxes()
  { 
    if(cookieCounter==0){
      createARSSBox('http://rss.cnn.com/rss/cnn_topstories.rss',2,false,5,1); 
      createARSSBox('http://feeds.feedburner.com/reuters/topNews/',3,false,5); 
      createARSSBox('http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml',2,false,5,10); 
      createARSSBox('http://rss.pcworld.com/rss/latestnews.rss',1,false,5); 
    }
これでRSSフィードを表示方法を指定しています。指定方法は以下のとおりです。
createARSSBox('フィードのアドレス',表示するカラム位置,ボックスの高さ,表示する記事数,更新する間隔);
  • ボックスの高さはfalseで自動設定になります
  • 更新間隔は分単位での指定です
  • 次に静的ボックスの指定方法です。
    /* Create static boxes */
    
      var htmlContentOfNewBox = '<DIV>This is a static box created from the function createDefaultBoxes().</div>';	// ボックスの中身を記述します
      var titleOfNewBox = 'This is a static box';
        if(!staticObjectArray['staticObject1']){	// ボックスのidを指定します。idは下にもいくつかあるので同じものに揃えましょう。
          var newIndex = createABox(1,100,false,'staticObject1');    //カラム位置、ボックスの高さを指定
          document.getElementById('dragableBoxContent' + newIndex).innerHTML = htmlContentOfNewBox; 
          document.getElementById('dragableBoxHeader_txt' + newIndex).innerHTML = titleOfNewBox; 
        }else{
          document.getElementById('dragableBoxContent' + staticObjectArray['staticObject1']).innerHTML = htmlContentOfNewBox; 
          document.getElementById('dragableBoxHeader_txt' + staticObjectArray['staticObject1']).innerHTML = titleOfNewBox; 
    
        }
        hideHeaderOptionsForStaticBoxes(staticObjectArray['staticObject1']);
    
    
    まだまだ説明しきれてませんがとりあえず一番重要なdragable-boxes.jsを説明してみました。
    フィードやTwitterで最新情報をチェック
    follow us in feedly
    この記事に付いているタグの最新記事一覧
    loading...
    コメント









    ※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

    Recent Entry
    Popular Entry
    • このエントリーをはてなブックマークに追加