サイドバーから切り離し

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

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

サイドバーからの出し入れに発生するイベントは次の関数で拾う。
起動時にサイドバーに入っているか否か処理をonloadの中なんかで行う必要がある。行わと、起動時サイドバーから出ている状態でサイドバーが起動するとデフォルト処理になってしまう。

if (System.Gadget.docked){
           サイドバーの中にある時の処理
}else{
           サイドバーの外にある時の処理
}

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

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

具体例

表示ページ

htmlファイル

<!-- サイドバーに入っている時の表示内容 blockで初期値レイヤー表示 -->
<div name"LAY1" id="LAY1" style="display: block;">
<!--バックの画像指定z-index:-1はz方向に-1つまり下方向に表示 -->
<g:background id="bgimage" style="position:absolute;z-index:-1" />
<SCRIPT>
  writedata();
  document.write(doc);
</SCRIPT>
</div>

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

jsファイル

//起動時にサイドバーあるか否かのチェック
function onload(){
    if (System.Gadget.docked){
         inDock();
    }else{
         outDock();
    }
}

//サイドバーから出したとき
  System.Gadget.onUndock = function ()
   {
       outDock();
   }
   outDock()(){
	onDockflag = 0;
	document.body.style.width  = '300px';  <==出たときに表示の大きさ指定
  	document.body.style.height = '330px';
       bgimage.style.width  = '280px'; <==画像の大きさ指定 bgimageはg:backgroundのid
       bgimage.style.height = '330px'; <==これがないと画像が大きさどおり表示されない
	bgimage.src = "url(l-bg.png)";  <==画像を指定
//サイドバーに入っている時の表示内容のレイヤーを非表示
	document.getElementById("LAY1").style.display='none';
//サイドバーから出たときの表示内容のレイヤーを表示
	document.getElementById("LAY2").style.display='block';
	svread0();
  }

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

外部URLのページの取得

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

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

XMLHttpRequest の通信の状態

  • 0 = uninitialized(読み込み開始前の初期状態)
  • 1 = loading(読み込み中)
  • 2 = loaded(とりあえず読み込んだ)
  • 3 = interactive(読み込んだデータを解析中)
  • 4 = complete(読み込んだデータの解析完了、または失敗した。)

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){
  //onDock時の処理
       //レスポンスを取得
       res  = oj.responseText //
       
       //ダイアログで表示
       alert(res);
       //受け取った内容を配列に分解(トークンは";")
       data = res.split(";");
}

  function on_loaded2(oj, host){
  //onUnDock時の処理
       //レスポンスを取得
       res  = oj.responseText //
       
       //ダイアログで表示
       alert(res);
       //受け取った内容を配列に分解(トークンは";")
       data = res.split(";");
}

注)以下のようにhttpoj.onreadystatechangeの中でdocument.write(res)で書くとなぜかhtml自体が書き換えられしまうそこで、以下のようにhtml内部でかくといいけどhttpoj.open( 'GET' , host , false )でこのように同期を指定しないとデータを取得する前にdocument.write(res)が実行されてしまう

 jsonRead();
 document.write(res);

JSON

JSON(ジェイソン、JavaScript Object Notation[表記(法)])はJavaScriptにおけるオブジェクト表記法、JSONテキストはUnicodeでエンコードするとされている。デフォルトのエンコーディングはUTF-8である。
JSONテキスト

{"item":[

{"itemNo":"1",
"itemName":"Sum",
"itemData":"1538400"},

{"itemNo":"2",
"itemName":"Used",
"itemData":"647612"},

{"itemNo":"3",
"itemName":"Free",
"itemData":"890788"} 

]
}

Javascriptでは以下のようにしてデータを受け取るjsDataは上記httpojと同じ変数

 function on_loaded(jsData){
   resultdata = 'TEST <BR>';
   var data = eval("("+jsData.responseText+")");
   for(var i=0; i<data.item.length; i++){
      var itemNo = data.item[i].itemNo; // No
      var itemName = data.item[i].itemName; // 名前
      var itemData = data.item[i].itemData; //内容
      resultdata = resultdata + itemNo + ':' + itemName + ':' + itemData +'<BR>\r\n';
   }
 }

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-07-31 (木) 15:28:29 (4557d)