YahooJavaScript库YUI源码资源-CSDN文库

共1245个文件

html：695个

js：336个

css：67个

Yahoo

JavaScript

4星 · 超过85%的资源需积分: 10 199 浏览量 2009-12-08 14:54:47 上传评论收藏 4.4MB ZIP 举报

**Yahoo JavaScript库 YUI源码详解** Yahoo User Interface (YUI) 是Yahoo公司推出的一款强大的JavaScript库，旨在帮助开发者构建高性能、可维护的Web应用程序。作为一款免费且开源的工具，YUI为开发者提供了丰富的组件和功能，涵盖了从布局管理、事件处理到数据绑定等各个方面，极大地提升了开发效率。 **一、YUI的核心特性** 1. **模块化设计**：YUI采用模块化架构，允许开发者按需加载所需的功能，减少了不必要的代码加载，提高了页面加载速度。每个模块都可以独立使用，也可以组合使用，形成更复杂的解决方案。 2. **跨浏览器兼容性**：YUI致力于提供一致的跨浏览器体验，支持主流的现代浏览器以及一些较旧版本，确保应用在多种环境下都能正常运行。 3. **事件系统**：YUI提供了强大的事件处理机制，可以轻松监听和响应DOM元素的各种事件，如点击、滚动等，使得交互设计更加灵活。 4. **CSS样式工具**：YUI包含了CSS Reset和Grids，帮助开发者快速创建整洁、响应式的布局，减少了样式冲突问题。 5. **数据绑定和模板引擎**：YUI的数据绑定功能允许开发者将JavaScript对象与HTML元素进行绑定，实时更新视图。模板引擎则提供了高效的数据渲染方式。 6. **动画效果**：YUI的动画模块提供了丰富的动画效果，包括平滑的过渡、淡入淡出、缩放等，为用户界面增添了动态元素。 **二、YUI的主要组件** 1. **Core（核心）**：提供基本的DOM操作、事件处理、定时器等功能，是其他组件的基础。 2. **Event（事件）**：处理各种浏览器事件，如鼠标点击、键盘输入等。 3. **Node（节点）**：对DOM元素的操作进行了封装，提供了更方便的方法来操作页面元素。 4. **Animation（动画）**：创建和控制各种动画效果。 5. **Selector（选择器）**：基于CSS3选择器，用于选取DOM元素。 6. **DataSource（数据源）**：处理异步数据请求，支持XML、JSON等多种数据格式。 7. **IO（网络通信）**：处理HTTP请求，实现AJAX功能。 8. **Calendar（日历）**：创建交互式日历组件。 9. **DataTable（表格）**：创建可排序、可搜索的表格。 10. **Resize（缩放）**：拖动调整元素大小的组件。 **三、YUI的使用方法** 使用YUI通常包括以下步骤： 1. **引入库**：在HTML文件中通过`<script>`标签引入YUI的脚本文件。 2. **配置模块**：根据项目需求，通过YUI的配置对象指定要加载的模块。 3. **初始化YUI**：调用`YUI().use()`方法初始化YUI，并传入需要的模块。 4. **编写代码**：在回调函数中编写具体的应用逻辑，使用YUI提供的API。 **四、YUI与其他JavaScript库的比较** YUI与jQuery、Dojo、Prototype等其他JavaScript库相比，各有优势。例如，YUI更注重模块化和性能优化，适合大型复杂应用；而jQuery则以其简洁的API和广泛的社区支持深受喜爱。 **五、YUI的最新发展和未来趋势** 随着前端技术的快速发展，YUI也在不断进化。它已经演进到YUI 3版本，更加注重模块化和性能。然而，随着React、Vue、Angular等新一代框架的崛起，YUI在某些场景下的使用有所减少。但其在模块化设计、性能优化方面的经验仍值得学习和借鉴。 YUI是一款功能强大的JavaScript库，虽然在现代Web开发中的使用可能不如过去广泛，但其设计理念和技术积累仍然对前端开发者有着宝贵的指导意义。通过深入理解和运用YUI，开发者可以更好地掌握JavaScript编程技巧，提升项目开发的质量和效率。

资源推荐

资源详情

资源评论

收起资源包目录

Yahoo JavaScript库 YUI源码（1245个子文件）

ac-js 5KB

README.anim 173B

api-js 94KB

README.attribute 3KB

README.base 3KB

README.cache 42B

README.classnamemanager 153B

README.collection 153B

README.console 1KB

README.console-filters 451B

README.cookie 1KB

yui.css 33KB

skin.css 10KB

grids-context.css 10KB

api.css 9KB

style.css 9KB

grids.css 7KB

grids-context-min.css 7KB

node-menunav-skin.css 6KB

reset-fonts-grids-min.css 6KB

node-menunav.css 5KB

grids-min.css 5KB

console-skin.css 4KB

dpSyntaxHighlighter.css 4KB

console.css 4KB

node-menunav-core.css 3KB

portal.css 3KB

example7.css 3KB

reset-context.css 2KB

anim.css 2KB

print.css 2KB

photos.css 2KB

base-context.css 2KB

tabview.css 2KB

base.css 2KB

reset-context-min.css 2KB

reset.css 2KB

menubutton.css 2KB

checkbox.css 1KB

base-context-min.css 1KB

fonts-context.css 1013B

console-filters-skin.css 970B

yui-bhm-navbar-demo.css 939B

reset-min.css 860B

slider-core.css 860B

console-filters.css 855B

fonts.css 844B

slider.css 824B

test-console.css 804B

base-min.css 762B

fonts-context-min.css 606B

node.css 581B

widget-stack-core.css 551B

slider-skin.css 439B

fonts-min.css 438B

widget-stack.css 356B

node-menunav-examples-base.css 329B

overlay-core.css 255B

overlay.css 240B

widget-core.css 208B

console-core.css 207B

widget.css 202B

console-filters-core.css 168B

widget-skin.css 168B

overlay-skin.css 168B

widget-stack-skin.css 168B

text.css 165B

neutral.css 120B

border.css 50B

background.css 49B

yuiDistribution.css 0B

README.cssbase 705B

README.cssfonts 431B

README.cssgrids 2KB

README.cssreset 438B

README.dataschema 42B

README.datasource 42B

README.datatype 42B

README.dd 3KB

README.dom 277B

README.dump 129B

README.event 2KB

README.event-custom 1KB

README.event-simulate 420B

ce-example.gif 10KB

logo.gif 6KB

ajax-loader.gif 3KB

bar.gif 3KB

yui.gif 2KB

example-hd-bg.gif 1KB

progress.gif 734B

inheritedSummary.gif 144B

共 1245 条

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns:yui="http://yuilibrary.com/rdf/1.0/yui.rdf#"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>API: slider Slider (YUI Library)</title> <link rel="stylesheet" type="text/css" href="assets/reset-fonts-grids-min.css" /> <link rel="stylesheet" type="text/css" href="assets/api.css" /> <script type="text/javascript" src="assets/api-js"></script> <script type="text/javascript" src="assets/ac-js"></script> </head> <body id="yahoo-com"> <div id="doc3" class="yui-t2"> <div id="hd"> <h1><a href="http://developer.yahoo.com/yui/" title="Yahoo! UI Library">Yahoo! UI Library</a></h1> <h3>slider  <span class="subtitle">3.0.0b1</span></h3> <a href="./index.html" title="Yahoo! UI Library">Yahoo! UI Library</a> > <a href="./module_slider.html" title="slider">slider</a> > Slider <form onsubmit="return false"> <div id="propertysearch"> Search: <input autocomplete="off" id="searchinput" /> <div id="searchresults">   </div> </div> </form> </div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form"> <fieldset> <legend>Filters</legend> <span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span> <span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span> <span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span> </fieldset> </form> <h2> Class <b property="yui:name">Slider</b> <span class="extends"> - extends <a href="Widget.html" title="Widget">Widget</a> </span> </h2>  <div class="summary description" property="yui:description"> Create a slider to represent an integer value between a given minimum and maximum. Sliders may be aligned vertically or horizontally, based on the <code>axis</code> configuration. </div> <div class="section constructor details" rel="yui:constructor" resource="#constructor"> <h3 id="constructor">Constructor</h3> <div class="content"> <div class="detail"> <strong property="yui:name">Slider</strong> <code> ( config ) </code> <div class="description"> <dl rel="yui:parameters"> <dt>Parameters:</dt> <dd rel="yui:parameter"> <code><span property="yui:name">config</span> <<span property="yui:type">Object</span>> </code> <span property="yui:description"> Configuration object</span> </dd> </dl> </div> </div> </div> </div> <div rel="yui:properties" resource="#properties"> <div class="section field details"> <h3 id="properties">Properties</h3> <div class="content"> <div class="protected" rel="yui:property" resource="#property__disabled"> <h4><a name="property__disabled" property="yui:name">_disabled</a> - <code>protected <span property="yui:type">Boolean</span></code> </h4> <div class="detail"> <div class="description" property="yui:description"> Deferred value for the disabled attribute when stalled (see _stall property). </div> </div> <hr /> </div> <div class="protected" rel="yui:property" resource="#property__factor"> <h4><a name="property__factor" property="yui:name">_factor</a> - <code>protected <span property="yui:type">Number</span></code> </h4> <div class="detail"> <div class="description" property="yui:description"> Factor used to translate positional coordinates (e.g. left or top) to the Slider's value. </div> </div> <hr /> </div> <div class="protected" rel="yui:property" resource="#property__key"> <h4><a name="property__key" property="yui:name">_key</a> - <code>protected <span property="yui:type">Object</span></code> </h4> <div class="detail"> <div class="description" property="yui:description"> Collection of object property names from the appropriate hash set in Slider.AXIS_KEYS. </div> </div> <hr /> </div> <div class="protected" rel="yui:property" resource="#property__railSize"> <h4><a name="property__railSize" property="yui:name">_railSize</a> - <code>protected <span property="yui:type">Number</span></code> </h4> <div class="detail"> <div class="description" property="yui:description"> Pixel dimension of the rail Node's width for X axis Sliders or height for Y axis Sliders. Used with _factor to calculate positional coordinates for the thumb.

评论收藏

内容反馈