YUI介绍以及快速入门 Yahoo的JS框架
2013-12-25 20:00
633 查看
1、YUI介绍:
YUI库是一系列使用Javascript和CSS创建的的工具和控件集,用来创建富客户端Web应用。使用到了DOM scripting,DHTML和AJAX。
2、在页面中引入JS文件:
可以从官网下载YUI http://yuilibrary.com/yui/quick-start/ 然后引入页面,也可以在线引入
3、开始使用YUI:
3.1、创建一个YUI沙箱:
创建一个YUI实例用于使用所有的YUI组建,也叫一个沙箱。每一个YUI沙箱都有它自己的一个实例和一套自己的激活了的模块,所以它不会与同一个页面中的其他沙箱冲突。任何定义在沙箱内的变量只会在本沙箱内有效,不会自动变成全局变量。
当声明一个沙箱 时,指定你想想要使用的模块,在上面的代码中,我们指定了使用node和even模块 。这样,我们就可以在这个沙箱内通过Y来使用node和evnet的API了。
YUI会管理需要依赖的各模块的运算和加载在你的页面中单一请求或者组合请求中需要使用到得JS文件。在所有的YUI模块加载完成后你的代码将会被执行。
3.2、在YUI中使用DOM节点
YUI中的节点组件使得使用,创建和操作DOM节点变得非常方便。节点API允许使用元素相关参照物或者选择器去使用DOM决节点
3.3、创建UI效果
使用Transition组件使得在你的用户交互中创建基于CSS的绚丽效果变得更加容易了。
3.4、使用Ajax加载内容
由node-load模块提供的Node.load()方法使得在页面运行时动态的添加内容更方便了。
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, // seconds opacity : 0 }); // Shrink to nothing. Y.one('#shrinkme').transition({ duration: 1, // seconds width : 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>
相关文章推荐
- Shiro权限控制框架入门1:Shiro的认证流程以及基本概念介绍
- OC与JS交互(JavaScriptCore框架入门介绍)
- Apache MINA 快速入门以及架构介绍
- 八款Js框架介绍及比较,Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- (pomelo系列入门教程)深入浅出node.js游戏服务器开发——Pomelo框架的设计动机与架构介绍
- (zz)actors角色模型系列之一 actors介绍以及akka 框架的使用入门
- JS前端框架快速入门之vue.js
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- JAVAWEB开发之Struts2详解(一)——Struts2框架介绍与快速入门、流程分析与工具配置以及Struts2的配置以及Action和Result的详细使用
- AngularJS实际项目应用——前端js框架以及库介绍
- 八款JS框架介绍及比较,DOJO 、SCRIPTACULOUS 、PROTOTYPE 、YUI-EXT 、JQUERY 、MOCHIKIT、MOOTOOLS 、MOO.FX,COMPONENTARTU
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- node.js第十二课(Express框架及入门介绍)
- Jquery与其它js框架(MooTools以及Prototype、Dojo、YUI等等)之间共享冲突的解决办法
- 【ASP.NET Core快速入门】(九) RoutingMiddleware介绍以及MVC引入
- (二)underscore.js框架Utility类API学习以及模型template的详细介绍
- linux系统学习:基础篇(系统介绍以及命令行的使用)快速入门linux系统
- actors角色模型系列之一 actors介绍以及akka 框架的使用入门
- (pomelo系列入门教材)深入浅出node.js游戏服务器开发1——基础架构与框架介绍