YUI 3ベース

5721 ワード

Yahoo! UI Library(YUI)はオープンソースのJavaScript関数ライブラリであり、高インタラクティブなWebページを構築するためにAJAX、DHTML、DOMなどのプログラムコード技術を採用している.YUI 3はYahoo!次世代JavaScriptとCSSライブラリ.新しいYahooを強化しました!ホームページ、Yahoo!メールアドレスとYahoo!他のサイトの処理能力.このライブラリには、the core components、a full suite of utilities、the Widget Infrastructure、a growing collection of widgets、CSS resources、and toolsが含まれています.すべてのコンポーネントはBSDライセンスとして使用されています.YUI 3ライブラリに含まれるコアコンポーネント(core components)のほか、YUIコミュニティの開発者によって作成された一連のコンポーネントがあり、これらのコンポーネントは追加の機能関数を提供し、WEBアプリケーション開発においてYUI 3の機能を豊富にしている.

1.Getting Started( http://developer.yahoo.com/yui/3/ ): (1).実際にYUIパッケージが提供する例を検証する.基本的なYUIモジュール(YUI module)から始め、ノード(Node)に徐々に移行することをお勧めします.他のユーティリティ(IOやDrag、Dropなど)は、アプリケーション開発にハイライトを追加しています. (2).覚えておいてください:YUIのウェブサイトには、各コンポーネントに対してYUIライブラリの著者が書いた完全なユーザーマニュアルがあり、これらは最高のリソースです.また、問題が発生した場合は、APIドキュメントを表示してヘルプを求めることができます. (3).Visit the Gallery.YUI 3 Galleryには、数百人のユーザーが提供するYUI 3ベースのモジュール(modules)が含まれており、YUI()を通過することができます.use()メソッドは直接参照します. (4).Start building(作成開始)YUI Confiiguratorを使用してYUI 3の使用または独自の開発に基づいてYUI 3ソースパッケージではなくページを構成する例. (5).YUIコミュニティの一員となる.
2.JSとYUIのDOM JSでDOMを操作する:

<script type="text/javascript">
	function tdom () {
		var dom = document.getElementById("other");  
		dom.setAttribute("width",100);  
	}
</script>

YUI操作DOM:YUIにはDOMが封入されており、DOMの操作方法をすべてやり直しています.

<script type="text/javascript" src="yui-min.js"></script>  
<script type="text/javascript">
	YUI().use("node", function(Y){
		var dom = Y.one("#other");
		//var dom = Y.one(document.getElementById("other"));
		dom.setStyle("width",100);
	});
</script>

YUI()関数はYUIインスタンスを生成し、パラメータにdebugなどの構成項目を設定することができますが、ここでは何も設定していません.'Node'パラメータは、ロードするモジュールを示します.コンソールを使用すると、nodeモジュールにロードするために必要なすべてのjsファイルがページに表示されます.
YUI().use()メソッドのパラメータは「node」「event」「json」などであり,これはYUIのmoudleである.最後のパラメータはコールバック関数で、指定したすべてのモジュールのロードが完了した後に呼び出され、呼び出し時にパラメータ:YUIのインスタンスが渡されます.

  ：
	YUI().use("node", function(Y) {  
		//......
	});  
	
	YUI().use("node", "resize", function(Y) {  
		//......
	});

3.yuiモジュール

4.YUIを走らせる

   YUI  ：
<html>
	<head>
		<script type="text/javascript" src="yui-min.js"></script>  
		<script type="text/javascript">
			YUI().use("node",function(Y){
				var but = Y.one("#id_but");		
				but.on("click",function(e){
					alert(e.target.get('tagName'));		//INPUT
					var div = Y.one("#other");
					alert(div.getX() + ":" +div.getStyle("width"));	//60 200
					div.setStyle('backgroundColor', '#D00050'); 
					div.set("innerHTML", "Welcome");
				});
			});
		</script>
    </head>  
    <body> 
		<input type="button" nam="n_but" id="id_but" value="click"/>
		<div id="other" style="position:absolute;border:2px solid skyblue;width:200px;height:200px;background-color:yellow;top:100px;left:60px;"></div>	
	</body>
</html>

   YUI  ：
<html>
	<head>
		<script type="text/javascript" src="yui-min.js"></script>  
		<script type="text/javascript">
			YUI().use("resize",function(Y){
				var resize = new Y.Resize({
					node: '#other'
				});
			});
		</script>
    </head>  
    <body> 
		<div id="other" style="position:relative;border:2px solid skyblue;width:200px;height:200px;background-color:yellow;top:100px;left:60px"></div>	
	</body>
</html>

   YUI  ：
<html>
	<head>
		<script type="text/javascript" src="yui-min.js"></script>  
		<script type="text/javascript">
			YUI().use("resize", "node",function(Y){
				var but = Y.one("#id_but");		
				but.on("click",function(e){
					alert(e.target.get('tagName'));		//INPUT
					var div = Y.one("#other");
					alert(div.getX() + ":" +div.getStyle("width"));	//60 200
					div.setStyle('backgroundColor', '#D00050'); 
					div.set("innerHTML", "Welcome");
					var resize = new Y.Resize({
						node: '#other'
					});					
				});				
			});
		</script>
    </head>  
    <body> 
		<input type="button" nam="n_but" id="id_but" value="click"/>
		<div id="other" style="position:relative;border:2px solid skyblue;width:200px;height:200px;background-color:yellow;top:100px;left:60px"></div>	
	</body>
</html>

説明:
ではsrcでyui-min.jsを導入してIEでプログラムが正常に動作し、FFでは相対パスyui-min.jsを開く方法が分からず、HTMLファイルとyui-min.jsをサーバの下に置いてURLでアクセスすれば正常になるという問題が発生します.

margin-topが親要素に作用する問題について

Powershellによるaspの自動導入Netmvcサイトプロジェクト(二)