Ajaxで今よみがえる(^^;;-->[クロスブラウザ技術 ]DHTMLサンプル集

JavaScript++かも日記

このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と
[ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者
でAllaboutのJavaScriptガイドとか牛久大仏の足元で草むしりをしながら
暮らしている【高橋登史朗】によるサポートページ兼無駄話ブログです

*このスクリプト動かないよ～、とかの情報は
各「コメント欄」へ書き込んでいただけるとうれしいです。
直せないかもしれないけどf^^;;;

【カテゴリー】 ActionScript ( 6 ) AIR ( 4 ) AjaSQL ( 10 ) Ajax ( 675 ) Arax ( 1 ) canvas ( 15 ) CSS ( 24 ) 脳 ( 9 ) DLNA ( 1 ) Dojo ( 25 ) DOM ( 51 ) ES4 ( 4 ) Ext JS ( 5 ) 反重力物質 ( 1 ) ffAdd-on ( 1 ) Flash ( 48 ) Flash Remoting ( 11 ) FTP ( 2 ) GAF ( 9 ) Google Maps ( 124 ) Google ガジェット ( 1 ) GPS ( 44 ) HTML ( 11 ) HTTPヘッダサンプル ( 10 ) IME ( 2 ) Internet ( 2 ) iPhone ( 49 ) IPv6 ( 1 ) 漫画 ( 4 ) Java ( 49 ) JavaScript ( 343 ) jKamo ( 8 ) jQchart ( 4 ) jQuery ( 207 ) jquery-ref ( 1 ) jsGadget ( 19 ) jslb_ ( 3 ) jslb_ajax ( 9 ) JSON ( 49 ) JSR223 ( 7 ) kjscmd ( 1 ) KNOPPIX ( 1 ) Linux ( 18 ) Mac ( 9 ) Memo ( 3 ) Microformats ( 2 ) Mini AJAX ( 2 ) MochiKit ( 2 ) mootools ( 9 ) Movable Type ( 58 ) MySQL ( 10 ) NewGameWeb ( 2 ) Nucleus ( 8 ) OpenAJAX ( 3 ) OpenDocument ( 1 ) OS ( 10 ) P2P ( 2 ) Perl ( 8 ) PHP ( 38 ) PostGIS ( 1 ) PostgreSQL ( 4 ) prototype.js ( 28 ) ROBOT ( 1 ) RSSリーダー ( 15 ) Ruby on Rails ( 7 ) SPDY ( 1 ) Spry ( 6 ) SQLite ( 17 ) SQLiteWorker ( 2 ) ssh ( 1 ) SSI ( 2 ) SVG ( 23 ) TRON ( 1 ) Ubiquity ( 7 ) Video ( 1 ) VML ( 1 ) Web Slice ( 1 ) Web Sockets ( 22 ) Webサービス ( 107 ) widget ( 6 ) Wii ( 1 ) Wiki ( 1 ) Win ( 6 ) WSH ( 1 ) X01HT ( 30 ) XML ( 32 ) XOOPS ( 1 ) XQuery ( 2 ) XUL ( 4 ) Yahoo! UI ( 74 ) 日付入力用カレンダー ( 1 ) 『Ajax実践テクニック』 ( 1 ) 『入門 Ajax』 ( 42 ) ＷｉｎTips ( 2 ) こりゃすごい ( 7 ) チューニング ( 30 ) ダイナミックロード関数 ( 7 ) リファレンス ( 20 ) ライブラリ ( 210 ) レーダー雨量表示 ( 1 ) ハード ( 35 ) ペンギン ( 2 ) ブラウザ ( 108 ) ブログでBBS ( 1 ) アクセスグラフ ( 3 ) イベント ( 2 ) カレンダーによる日付入力スクリプト ( 4 ) クロスブラウザ ( 14 ) クロスブラウザ関数 ( 8 ) スポーツ ( 1 ) スマートフォン ( 8 ) セキュリティ ( 155 ) ソフトイーサ ( 1 ) マッシュアップ ( 23 ) 暗号 ( 4 ) 映画 ( 57 ) 河川の水位グラフ ( 3 ) 回線 ( 2 ) 開発ツール ( 38 ) 牛久大仏 ( 19 ) 携帯 ( 150 ) 言語 ( 19 ) 故障 ( 9 ) 高橋家の謎 ( 3 ) 広告とか ( 1 ) 洪水警報システム ( 2 ) 今日のひと言 ( 10 ) 仕様 ( 113 ) 雑談 ( 354 ) 実装 ( 2 ) 書籍 ( 20 ) 親子ウインドウ有無の確認関数 ( 3 ) 新海誠 ( 3 )

Web Sockets Domo

* サーバー側は、小松氏のこれをbloga.jp:80へ置いてあります。
* クライアント側はWS処理をjQueryプラグイン化してみました。これです。
* ちなみに、このDemoサンプルは、下記5行でローカルでも別ドメインでもどこにでも設置出来ます。
<script src="http://bloga.jp/ws/jq/js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://bloga.jp/ws/jq/js/jquery.ws-0.3-noenc-pre.js" type="text/javascript" charset="utf-8"></script> <script src="http://bloga.jp/ws/jq/conn/wschatdemo0.3.js" type="text/javascript"></script> <script>/*サポートしてない時のalertメッセージを抑止*/$.ws.wsSetup({nonosupportmsg:true});</script> <div id="wsdemos"></div>

【最近の記事】
かも日記

【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いです。実験用ですので、カオス(混沌)をあえて意図したりもしますので、標準やValidとは無縁だったりしますが、何卒、ご了承ください ( _ _ b

【info】 最近はTwitterでぶつぶつ言ってることが多いです。
>http://twitter.com/toshirot

2007年10月01日

【MT】最近のエントリー 5件を日付で束ねてツリーメニュー化

【Ajax , JavaScript , Movable Type , Yahoo! UI 】

ブックマーク-- Hatena

/ Livedoor

最新の記事を5件自動的にツリーメニュー化する方法です。

全部開く全部閉じる

手順としては、昨日最初に作ったtreeJSONテンプレートへ下記を記述します。

if(!Test1)var Test1={};

Test1.treeData2=[
  ["<b>かも日記</b>" ,
    [
      ["_open"],
      ["エントリー " , 
        [ //<--tBase
          ["_open"]
        ]
      ]
    ]
  ]
]

Test1.tBase=Test1.treeData2[0][1][1][1];
Test1.tChild;
Test1.dRec;

function mkTreeJsonData(day,title,link){
  if(day != Test1.dRec){
    Test1.tBase.push([day,[["_open"]]]);
    Test1.tChild=Test1.tBase[Test1.tBase.length-1][1];
  }
  Test1.tChild.push([title,link]);
  Test1.dRec=day; 
}
<MTArchiveList  lastn="5">
mkTreeJsonData(
  "<$MTArchiveDate format="%Y%m%d"$>",
  "<$MTArchiveTitle$>",
  "<$MTArchiveLink$>"
);
</MTArchiveList>

次に、エントリー側には、下記を書きます。

<link rel="stylesheet" type="text/css" href="http://jsgt.org/yui/2.3.0/yui/examples/treeview/assets/css/folders/tree.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>  
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"></script>  
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/treeview/treeview-min.js"></script>  
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/connection/connection-min.js"></script>  

<-- 昨日のYAHOO.tato.treeを読み込みます -->
<script type="text/javascript" src="./treeScript.js"></script>  

<div style="">
<a href="javascript:test1707.tree.expandAll()">全部開く</a>
<a href="javascript:test1707.tree.collapseAll()">全部閉じる</a>
</div>

<div id="menudiv1707" style=""></div>

<script type="text/javascript">
<!--

//初期化
YAHOO.tato.treeIni2 = function(){
  test1707 = new YAHOO.tato.tree("menudiv1707");
  test1707.tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
  test1707.tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);
  test1707.mkTreeByArray(Test1.treeData2);//ここでTreeデータを渡します
}

//ページ読み込み後にカスタマイズ関数YAHOO.tato.treeIni()を起動します
YAHOO.util.Event.addListener(window, "load", YAHOO.tato.treeIni2);

//-->
</script>

これで、あとは自動的に毎日「最新の記事を5件ツリーメニュー化」してくれると思います。今日は、フェイドエフェクトも追加しました。

test ( 2007年10月02日 12:23 )

test

【コメント】