`

yui的学习脚印

YUIjQueryCC++C# 
阅读更多 
<!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>
分享到：
| PHP中单例模式和工厂模式学习总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    《YUI使用文档》汉语版的yui学习材料

    YUI的使用文档，汉语版的，个人日记，是别人写的，不是我写的

    YUI 入门教程YUI 入门教程YUI 入门教程

    YUI教程YUI 入门教程YUI 入门教程YUI 入门教程

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    yui_2.9.0前端UI

    YUI 库，全称Yahoo! UI Library。是一组工具和控件，用JavaScript写成, 为的是用DOM 脚本，DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议，对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    yui3-master.zip

    yui3-master.zip

    Yui_ext 学习笔记

    Yui_ext 学习笔记 MSN:zhoujianguo_leo@hotmail.com

    yuitest YUI测试工具

    YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...

    yui_2.6.0r2

    yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2 yui_2.6.0r2

    雅虎 用户接口库YUI

    YUI资料 雅虎 用户接口库 中文说明及如何使用学习 Yui组件分成2类：工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。...

    js 压缩YUI

    雅虎的东西,简单的操作很好用 使用例子:java -jar D:\yuicompressor\yuicompressor\yuicompressor.jar E:\js\all.js -o E:\wap\wap2\js\all-min.js --charset utf-8 当然要装jdk了 不然就玩完了

    yui 资源包

    yui 源码下载，3.9.0 r2 包，最新版本

    yuicompressor，给YUI Compressor添加右键命令

    YUI Compressor非常好用，特别是JS的混淆是众多JS Coding的最爱。可惜官网提供的版本都不具备右键功能，每次压缩都要cmd输入一些命令实在是繁琐，本文就介绍如何给YUI Compressor添加右键命令，方便使用。 网上已有...

    从YUI2到YUI3看前端的演变 pdf

    YUI3 引入了粒度更细的模块管理方式，通过异步 HTTP 请求加载模块、然后执行...YUI是个“学院派”的框架，以性能和严谨著称，易用性相对而言弱了一些。它能否在已经拉开的 JavaScript 框架大战中胜出，让我们拭目以待。

    从YUI2到YUI3看前端的演变

    从YUI2到YUI3看前端的演变

    YUI中文文档CHM

    YAHOO YUI 中文文档 AJAX 详细 比较好用

    yui压缩

    yui压缩

    YUI3 dialog组件

    基于YUI3的dialog组件该组件是基于YUI3开发的，功能强大，详细见http://www.qiqicartoon.com

    yahoo yui 实例教程

    利用Yahoo YUI库做的一个TREE实例,很详细的阐述了YUI的使用原理

    高效WEB前端开发之路：YUI3.15

    JavaScript是一种最初由Netscape的LiveScript发展而来的面向对象的Web脚本语言，被ECMA国际定义为国际化标准——ECMAScript。JavaScript具有使用局限性。...　本书适用于YUI工程师，也可以作为教材供高校师生学习使用。

    YUI3 完整包

    Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。

Magicbox
Global site tag (gtag.js) - Google Analytics