YUI介绍以及快速入门 Yahoo的JS框架

1、YUI介绍：

YUI库是一系列使用Javascript和CSS创建的的工具和控件集，用来创建富客户端Web应用。使用到了DOM scripting，DHTML和AJAX。

2、在页面中引入JS文件：

可以从官网下载YUI http://yuilibrary.com/yui/quick-start/ 然后引入页面，也可以在线引入

<script type="text/javascript" src="script/yui3/build/yui/yui-min.js"></script>
<!-- <script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script> -->

3、开始使用YUI：

3.1、创建一个YUI沙箱：

<script>
// Create a YUI sandbox on your page.
YUI().use('node', 'event', function (Y) {// The Node and Event modules are loaded and ready to use.// Your code goes here!
});
</script>

创建一个YUI实例用于使用所有的YUI组建，也叫一个沙箱。每一个YUI沙箱都有它自己的一个实例和一套自己的激活了的模块，所以它不会与同一个页面中的其他沙箱冲突。任何定义在沙箱内的变量只会在本沙箱内有效，不会自动变成全局变量。

当声明一个沙箱时，指定你想想要使用的模块，在上面的代码中，我们指定了使用node和even模块。这样，我们就可以在这个沙箱内通过Y来使用node和evnet的API了。

YUI会管理需要依赖的各模块的运算和加载在你的页面中单一请求或者组合请求中需要使用到得JS文件。在所有的YUI模块加载完成后你的代码将会被执行。

3.2、在YUI中使用DOM节点

YUI中的节点组件使得使用，创建和操作DOM节点变得非常方便。节点API允许使用元素相关参照物或者选择器去使用DOM决节点

<script>
YUI().use('node', function (Y) {// Access DOM nodes.var oneElementById     = Y.one('#foo'),oneElementByName   = Y.one('body'),allElementsByClass = Y.all('.bar');// Create DOM nodes.var contentNode = Y.Node.create('<div>'),listNode    = Y.Node.create('<ul>'),footerNode  = Y.Node.create('<footer>');contentNode.setContent('<p>Node makes it easy to add content.</p>');listNode.insert('<li>Buy milk</li>');footerNode.prepend('<h2>Footer Content</h2>');// Manipulate DOM nodes.Y.all('.important').addClass('highlight');Y.one('#close-button').on('click', function () {contentNode.hide();});
});
</script>

3.3、创建UI效果

使用Transition组件使得在你的用户交互中创建基于CSS的绚丽效果变得更加容易了。

<script>
YUI().use('transition', function (Y) {// Fade away.Y.one('#fademe').transition({duration: 1, // secondsopacity : 0});// Shrink to nothing.Y.one('#shrinkme').transition({duration: 1, // secondswidth   : 0,height  : 0});
});
</script>

3.4、使用Ajax加载内容

由node-load模块提供的Node.load()方法使得在页面运行时动态的添加内容更方便了。

<script>
YUI().use('node-load', function (Y) {// Replace the contents of the #content node with content.html.Y.one('#content').load('content.html');
});
</script>

YUI介绍以及快速入门 Yahoo的JS框架相关推荐

第1讲韩顺平 PHP视频教程 zend framework zend介绍 zend快速入门韩顺平php视频教程ppt 笔记心得
韩顺平 PHP视频教程 zend framework PPT笔记心得本教程贯穿了两个软件公司常用的两个项目,数据采集系统和购物车,共分20讲从本质上深入浅出的分析了zend framework运 ...
Helm基本介绍及快速入门
文章目录 Helm基本介绍及快速入门一.Helm基本介绍 Helm简介 Helm 相关组件及概念二.Helm部署 Helm客户端安装校验是否安装成功三.Helm 使用使用仓库(helm re ...
c++做界面_Adobe Photoshop基本介绍②，快速入门界面
Adobe Photoshop基本介绍②,快速入门界面.此篇文章意在讲解Adobe Photoshop界面的介绍.在本篇文章,up主会使用Adobe Photoshop CC 2018 作为讲解.(以 ...
HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID
HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在i ...
第1章 Ext JS介绍与快速入门[2/4]
1.4 Ext JS学习文档 Ext JS提供了详尽的英文版官方在线学习文档,地址是: https://docs.sencha.com/ 该在线文档提供了Ext JS.ExtAngular.ExtRe ...
第1章 Ext JS介绍与快速入门[1/4]
文章目录 1.1 Ext JS 是什么 Ext JS是什么? Ext JS能做什么? 1.2 Ext JS的开发商及产品系列 Ext JS是谁开发的? Sencha的产品簇开发工具: 设计工具: I ...
SpringCloud——Gateway（介绍、快速入门、网关集群）
介绍网关是微服务最边缘的服务,直接暴露给用户,用来做用户和微服务的桥梁. Gateway是Spring官方提供的用来代替zuul的网关组件核心逻辑:路由转发 + 执行过滤器链三大核心概念 Rou ...
[JavaWeb-HTML]HTML概念介绍和快速入门
HTML 1. 概念:是最基础的网页开发语言* Hyper Text Markup Language 超文本标记语言* 超文本:* 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本 ...
java day53【 Mybatis框架概述、 Mybatis 框架快速入门、自定义 Mybatis 框架】
第1章框架概述 1.1 什么是框架 1.1.1 什么是框架框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定 ...

YUI介绍以及快速入门 Yahoo的JS框架

YUI介绍以及快速入门 Yahoo的JS框架相关推荐

最新文章

热门文章