Yahoo!用戶界面博客（YUIBlog）

在YUI 3畫廊：亞當摩爾定律YUI TreeView的港口

由於YUI小組包銳3核心部件的基礎上，我們在看到的事情之一YUI 3畫廊是過渡性的解決方案助陣肉銳3實現。 其中的一些，像朱利安Lecomte的SimpleMenu純銳3，和別人，像亞當摩爾的TreeView的模塊 ，彌合的之間的差距YUI的2和3和將可能被其他畫廊模塊或在道路上航運銳3部件更換。

亞當的TreeView的端口是一個流行的轉換，從銳2 TreeView控件。 銳3畫廊版本YUI 3的基礎上運行，並使用DAV玻璃gallery-port模塊，橋的一些API的變化。 在YUI 2版本的所有功能的支持（最新編輯和動畫，例如，不包括在內），但它是微不足道的獲得與該畫廊模塊運行一個標準的TreeView。 所有的代碼是關閉的CDN和可組合處理。

這裡是一些示例代碼。 腳本和CSS文件包含：

  <鏈接類型 =“文/ CSS”REL =“樣式表”
 HREF =“htt​​p://yui.yahooapis.com/gallery-2010.02.17-20/build/gallery-treeview/assets/skins/sam
      /畫廊 treeview.css“/>
 <腳本類型 =“text / javascript中”的
      SRC =“htt​​p://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js
      gallery-2009.11.02-20/build/gallery-port/gallery-port-min.js＆
      gallery-2009.11.19-20/build/gallery-treeview/gallery-treeview-min.js“> </ SCRIPT> 

標記：

  <div id="treeView"> </ DIV> 

執行腳本：

 中<SCRIPT LANGUAGE="JavaScript">

 / /創建一個 YUI實例使用TreeView的畫廊模塊
 YUI（）。使用（“畫廊 TreeView的”功能（Y）{

 / /協理與雅虎的變量和DAV玻璃的實例
 / /端口實用工具：
 VAR雅虎= ​​Y港口（）;

 / /實例化樹使用標準銳 2語法：
樹 =新YAHOO.widget.TreeView（“樹視圖”，[
	 {類型：“文字”標籤：“車”，擴大了：真實，兒童：[
			 “阿斯頓馬丁”
			 “布加迪”，
			 {類型：“文字”標籤：“通用”，HREF：“http://gm.com”，擴大了假，兒童：[
				 “別克”，
				 “凱迪拉克”
				 “雪佛蘭”，
				 “GMC”
			 ]}，
			 “雷諾”，
			 “豐田”，
			 “大眾”
		 ]
	 }，
	 {類型：“文字”標籤：“計算機”，可編輯：真實，兒童：[
			 “宏”，
			 “蘋果”
			 “惠普”，
			 “戴爾”
		 ]
	 }
 ]）;

 / /渲染樹：
 tree.render（）;

 }）;
 </ SCRIPT> 

點擊通過這個例子中的一個工作版本。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us | Digg它！ | 書籤交易！