flyxiang228
- 浏览: 60301 次
- 性别:
- 来自: 江西
-
文章分类
最新评论
<!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>
分享到：
发表评论
-
粒子喷泉
2011-07-18 17:43 861注：来自http://daimaren.cn/blog/?p= ... -
jquery validate addMethod
2011-06-20 15:18 1536只能输入m-n个字符且至少有一个字母和一个数字 jQuer ... -
4个跨浏览器必备的函数
2011-05-26 13:58 738http://www.cssbaby.com/archives ... -
用jquery实现的文本框只能输入数字
2011-05-25 10:14 2279用jquery实现的文本框只能输入数字简单插件 $.fn. ... -
闭包理解
2011-04-28 11:51 812直接看到代码 var list = document.ge ... -
JS/DOM/Ajax/Framework(Jquery/Yui/Mootools/EXT)
2011-03-28 10:09 1054gotop效果 <script> var B ... -
jQuery 封装function
2011-03-25 16:37 1920// JavaScript Document (func ... -
利用浏览器默认方法获取浏览器当前位置
2011-03-19 13:53 1028支持浏览器 IE FIREFOX SAFARI CHROME ... -
关于用jQuery实现效果
2011-03-19 09:37 7901、效果1：关于新闻信息文字上下切换 <div i ... -
jquery实现键盘上下键、return键选折li
2011-03-16 11:42 6591注释：code来源javaeye 使用前要引入jquery库 ... -
随滚动条移动的层
2011-02-15 09:51 804<!DOCTYPE html PUBLIC &quo ... -
vim 使用
2011-01-21 17:08 682vim命令 vi和vim是linux和u ... -
js左右滚动效果
2011-01-21 14:49 1831<!DOCTYPE html PUBLIC &quo ... -
javascript基础知识
2011-01-19 09:45 731注释：来自http://www.csssea.com/?p=7 ... -
Javascript浏览器兼容问题
2011-01-14 00:13 1021Javascript浏览器兼容 1.doc ... -
一个简单的javascript tab选项卡
2011-01-13 20:51 1090<!DOCTYPE html PUBLIC &quo ... -
常用的正则表达式
2011-01-10 13:47 654/** *postal codes regular ... -
一些比较实用的javascript方法
2011-01-10 13:25 907动态加载javascript文件 <script t ... -
javacript实现根据选择不同国家选择显示不同的省/州
2010-12-29 01:13 1451/** * @author wangxiang * ... -
javascript方法（Methods）
2010-12-28 23:49 9671、Array array.concat(item..) co ...
相关推荐
《YUI使用文档》汉语版是一份详细的YUI学习材料，它涵盖了这个JavaScript库的核心功能和使用方法。YUI，全称Yahoo! User Interface Library，是Yahoo开发的一个开放源代码的JavaScript库，旨在帮助开发者创建交互式...
通过“yui3-master.zip”这个压缩包，开发者不仅可以了解到YUI3的基本架构，还可以通过阅读源码来学习和掌握JavaScript的最佳实践，提升自身的前端开发能力。无论是初学者还是经验丰富的开发者，都能从中受益匪浅。...
在这个“关于yui的学习”主题中，我们将深入探讨YUI的核心概念、主要功能以及如何有效地使用它。 首先，YUI的源码是开放的，这意味着开发者可以查看并理解其内部工作原理，这对于学习和定制功能非常有帮助。源码的...
《深入理解YUI：基于“yui.rar 例子”的解析》 ...学习并掌握YUI，不仅可以提高开发效率，还能为用户提供更优质的交互体验。无论是新手还是经验丰富的开发者，都可以从YUI中获益，打造出更加健壮和高效的Web应用。
YUI 2.8.1是该库的一个特定版本，包含了丰富的功能和工具，对于想要深入学习前端开发，尤其是使用Yahoo框架的人来说，是一个非常宝贵的学习资源。 在YUI 2.8.1中，我们主要可以关注以下几个关键知识点： 1. **模块...
总之，YUI3.6文档及示例的压缩包是开发者学习和掌握YUI的绝佳资料，无论你是新手还是有经验的开发者，都能从中受益。通过深入研究这个包，你将能够利用YUI的强大功能，创建出高效、美观且用户体验优秀的Web应用。
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展，主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识，适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
《深入理解YUI 3.9.0 r2：界面设计与资源优化》 YUI，全称为Yahoo! User Interface Library，是由雅虎公司开发的一个开源JavaScript库，它旨在简化Web应用程序的构建，特别是对于界面设计和交互效果的实现。在3.9.0...
“源码”标签暗示这个压缩包可能包含了YUI表单验证器的源代码，这使得开发者可以查看、学习和定制验证器的内部工作原理。而“工具”标签则表明这个组件是一种实用的开发辅助工具，可以帮助开发者轻松实现表单验证...
【标签】"yahoo3.0 YUI Ｅxamples"再次强调了主题，这些标签有助于搜索和分类，便于用户找到相关的YUI学习材料。 【压缩包子文件的文件名称列表】"developer.yahoo.com"可能是指包含YUI 3.0 Examples的源码或文档...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
通过提供的压缩包文件"ext 2.rar"、"ext教程.rar"和"yui_2.3.1.zip"，你可以获得YUI-EXT的源码、文档和示例，进一步学习和研究其使用方法。这些资源将帮助你深入理解如何集成YUI-EXT到项目中，如何创建和配置组件，...
YUI 2.7提供的文档详尽介绍了每个组件的用法，包括API参考、教程和示例代码，对于初学者来说是极好的学习资源。通过文档，开发者可以快速上手，并理解如何将YUI应用到实际项目中。同时，示例代码有助于直观地展示...
YUI 2.5.2是该库的一个特定版本，包含了源码和说明文档，对于学习和使用YUI具有很高的参考价值。 1. **YUI概述** YUI的核心理念是模块化和可定制性。它允许开发者按需选择所需的组件，减少页面加载时间，提高性能...
学习YUI，首先需要掌握JavaScript基础知识，然后通过官方文档了解YUI的模块化结构和API。官方文档详细且全面，包含了大量的示例代码，便于开发者快速上手。同时，社区资源丰富，有许多优秀的教程和示例项目可供参考...
8. **API文档**：YUI3.7.3附带的API文档详细阐述了每个模块的功能和用法，是开发者学习和使用YUI的重要参考资料。 9. **响应式设计支持**：YUI3包含了一些工具，如Resize Utility，帮助开发者实现响应式设计，使...