YUI与页面元素交互示例-CSDN博客


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test page</title>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>-->
<script type="text/javascript" src="yui-min.js"></script>
<script type="text/javascript">
//<!--[CDATA[
YUI({filter: 'raw'}).use('node',function(Y){
	//var foot = Y.one('#footer');
	var footer = function(e){
		/*e.preventDefault();
		Y.log("You clicked on the second YUI link.", "info", "example");
		alert('Hello Word!');*/

		//Y.log(foot.get('text'));//获取到点击节点中内容


		//获取网页中所有的div节点
		var allDiv = Y.all('#footer');
		//为所有的div标签节点添加样式类addClass
		allDiv.addClass('addClass');

		//Y.log('Hi,XiangWang');
	}
	Y.on('click',footer,'#footer');

});
//]]-->
</script>
<style type="text/css">
<!--
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd{margin:0;padding:0;}
body{font:12px/150% Arial, Helvetica, sans-serif;}
a:link,a:visited{}
a:hover{}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}

.wrapper{width:980px;margin:0 auto;}
#header{}
#navigation{}
#content{}
.l_c{width:600px;}
.r_c{width:380px;}
#footer{}
/*test style*/
.addClass{border:#efefef 1px solid;}
.diamonds{background: none repeat scroll 0 0 #FFA928;display: block;height: 10px;width: 10px;}
-->
</style>

</head>

<body>
<div class="wrapper">
<!--header module :: start-->
<div id="header">
	header module
</div>
<!--header module :: end-->
<!--navigation module :: start-->
<div id="navigation">
	<span>navigation module</span>
</div>
<!--navigation module :: end-->
<!--content module :: start-->
<div id="content">
	<div class="left l_c">
    	left content module<span class="diamonds"></span>
    </div>
    <div class="right r_c">
    	right content module
    </div>
    <div class="clear"></div>
</div>
<!--content module :: end -->
<!--footer module :: start-->
<div id="footer">
	<p><em>footer module</em></p>
</div>
<!--footer module :: end-->
<div id="foot-bottom" class="foot-bottom">

</div>
</div>
<script type="text/javascript">
//<!--[CDATA[
/*var n = [4, 8, 15 ,18 ,22];
//n.sort();
document.write(n);
(function(){
	jQuery.fn.wx = function (){
		var fc = 'wangxiang' ;
		alert(fc);
	};
	//$().wx();
})(jQuery);*/

YUI({filter: 'raw'}).use('node',function(Y){
	//var foot = Y.one('#footer');
	var navigation = Y.one('#navigation'); //获取导航节点
	//var navigation = Y.all('#content .l_c , .r_c');//获取内容子节点
	var footer = function(e){
		e.preventDefault();
		var target = e.target;
		//var tag = e.target.get('parentNode.tagName');//获取当前节点父节点标签名
		//var tag = e.target.get('tagName');获取当前节点的标签名
		//alert(tag);
		//Y.log("You clicked on the second YUI link.", "info", "example");//输出信息
		h = target.get('winHeight');//获取窗口高度
		w = target.get('winWidth');//获取窗口宽度
		hh = target.get('docHeight');//获取文档高度
		ww = target.get('docWidth');//获取文档宽度
		alert('Hello Word!' + h + ',' + w + ';' + hh + ',' + ww);
		//Y.log(foot.get('text'));//获取到点击节点中内容
		/*//获取网页中所有的div节点
		var allDiv = Y.all('div');,
		//为所有的div标签节点添加样式类addClass
		allDiv.addClass('addClass');*/
		//Y.log('Hi,XiangWang');
	}
	//小方块跟随鼠标
	var followMouse = function(e){
		Y.one('.diamonds').setXY([e.pageX, e.pageY]);
	}
	//节点样式
	var nodeStyling = function(e){
		var nav = e.currentTarget;
		//var navStyleBg = nav.getStyle('background');
		var getComputedColor = nav.getComputedStyle('color');
		//Y.log(navStyleBg);
		Y.log(getComputedColor);
		nav.hide(600);
	}
	Y.log('Found node .. Setting Content Style');
	navigation.setStyle('background', '#f00');//设置节点样式style
	navigation.setContent('<b>setNavigation</b>');//设置节点内容
	//navigation.delegate('click', footer, 'b');//delegate指令nodes.filter(':not(.yui3-pass)').setContent('Click me too please!');
	Y.on('click',footer,'#footer');
	Y.one('document').on('click', followMouse);
	navigation.on('click', nodeStyling);

});

//]]-->
</script>
</body>
</html>
yui的学习脚印
