サイドバーから切り離し

更新日 2008-07-31 (木) 15:28:29

サイドバーから切り離したときのプログラミングについては、htmlでは<div>タグを利用してレイヤーを切り替えることを行う。その時表示大きさなどをを変更する。ちなみに<LAYER>タグはIEでは使用できない。

サイドバーからの出し入れに発生するイベントは次の関数で拾う。

System.Gadget.onUndock = function (){
       [サイドバーから出したときの処理
}

System.Gadget.onDock = function (){
       [サイドバーに入れた処理したときの処理
}

具体例

表示ページ

htmlファイル

<!-- サイドバーに入っている時の表示内容 blockで初期値レイヤー表示 -->
<div name"LAY1" id="LAY1" style="display: block;">
<SCRIPT>
  writedata();
  document.write(doc);
</SCRIPT>
</div>

<!-- サイドバーから出たときの表示内容 noneでレイヤー初期値非表示 --> 
<div name"LAY2" id="LAY2" style="display: none;">
<SCRIPT>
 writedata2();
 document.write(doc);
</SCRIPT>
</div>

jsファイル

//サイドバーから出したとき
  System.Gadget.onUndock = function (){
	onDockflag = 0;
	document.body.style.width  = '300px';  <==出たときに表示の大きさ指定
  	document.body.style.height = '330px';
//サイドバーに入っている時の表示内容のレイヤーを非表示
	document.getElementById("LAY1").style.display='none';
//サイドバーから出たときの表示内容のレイヤーを表示
	document.getElementById("LAY2").style.display='block';
	svread0();
  }

//サイドバーに入れたとき
  System.Gadget.onDock = function (){
	onDockflag = 1;
	document.body.style.width  = '138px';
  	document.body.style.height = '200px';
	document.getElementById("LAY1").style.display='block';
	document.getElementById("LAY2").style.display='none';
	svread0();
  }

外部URLのページの取得

Ajaxで外部URLの内容を取得する。取得データを処理しやすいようにTEXTで取得する ここのぺーじを参考にした。

注)指定URLに"?'+(new Date).getTime();"をつけることで毎回違う内容にアクセスするように見せかける。そうしないPC内にキャッシュされた内容をもってきて実際のURLに2回目からアクセスしない

jsファイル

 //XMLHttpRequestオブジェクト生成
 function createHttpRequest(){

   //Win ie用
   if(window.ActiveXObject){
       try {
           //MSXML2以降用
           return new ActiveXObject("Msxml2.XMLHTTP") //
       } catch (e) {
           try {
               //旧MSXML用
               return new ActiveXObject("Microsoft.XMLHTTP") //
           } catch (e2) {
               return null
           }
        }
   } else if(window.XMLHttpRequest){
       //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
       return new XMLHttpRequest() //
   } else {
       return null
   }
 }

   //XMLHttpRequestオブジェクト生成
   var httpoj = createHttpRequest() //
   
   //open メソッド
   if (host =='uso5005'&& onDockflag == 1){
      url = 'http://www.abc-u.ac.jp/~okada/?'+(new Date).getTime();

   //method , fileName , async
   httpoj.open( 'GET' , url , true ) //
   
   //受信時に起動するイベント
   httpoj.onreadystatechange = function()  //
   { 
     //readyState値は4で受信完了
     if (httpoj.readyState==4)  //
     { 
       //コールバック
	if(onDockflag == 1){
          on_loaded(httpoj, host);
	}else{
	   on_loaded2(httpoj, host);
       }
     }
   }
   
   //send メソッド
   httpoj.send( '' ) //
 }
 
  function on_loaded(oj, host){
 
       //レスポンスを取得
       res  = oj.responseText //
       
       //ダイアログで表示
       alert(res);
       //受け取った内容を配列に分解(トークンは";")
       data = res.split(";");
}

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS