YUI (Yahoo! UI Library)

Yahoo! UI Library

米Yahoo!がBSDライセンスで提供しているオープン・ソースのDHTML + AJAX (+ CSS)なJavaScriptライブラリ。詳しくはここ http://developer.yahoo.com/yui/

ダウンロードしましょう

http://sourceforge.net/projects/yui

現在のバージョン 0.11.4 ダウンロードして自鯖に置いてください

ざっくり見ていきましょう

グローバル・オブジェクト

http://developer.yahoo.com/yui/yahoo/

<script type="text/javascript" src="yahoo.js" ></script>

YAHOO というオブジェクトが生成。

ユーティリティ

Animation

animation.js

http://developer.yahoo.com/yui/animation/

例

var attributes = {
 width: { to: 400 },
 height: { to: 400 }
};

var myAnim = new YAHOO.util.Anim('test', attributes);
myAnim.animate();

toは絶対値
byは相対値
fromで初期値
unitで単位
イベント・リスニング

myAnim.onComplete.subscribe(removeElement);

backgroundColorもOK

new YAHOO.util.ColorAnim

2次元のアニメ

new YAHOO.util.Motion

カーブの軌跡も描けます

var attributes = {
 points: {
  to: [400, 400],
  control: [[800, 300], [-200, 400]]
 }
};
var myAnim = new YAHOO.util.Motion('test', attributes);
myAnim.animate();

自動スクロール

Connection Manager

connection.js

XMLHttpRequestを使ったGETやPOST。

http://developer.yahoo.com/yui/connection/

DOM

dom.js

http://developer.yahoo.com/yui/dom/

たとえば・・・
- getStyle, setStyle
- getXY, setXY
- getViewportHeight, getViewportWidth
- getElementsByClassName
- addClass, removeClass, replaceClass

など

Drag and Drop

dragdrop.js

http://developer.yahoo.com/yui/dragdrop/

Event

event.js

http://developer.yahoo.com/yui/event/

コントロール

AutoComplete

autocomplete.js

http://developer.yahoo.com/yui/autocomplete/

Calendar

calendar.js

http://developer.yahoo.com/yui/calendar/

Container

container.js

http://developer.yahoo.com/yui/container/
- Tooltip
- Panel
- Dialog
- SimpleDialog
- Module
- Overlay

Logger

logger.js

http://developer.yahoo.com/yui/logger/

FireBug, Safari JavaScript Console

Slider

slider.js

http://developer.yahoo.com/yui/slider

TreeView

treeview.js

http://developer.yahoo.com/yui/treeview

CSSリソース

Aグレードのブラウザをすべてサポート

CSS Page Grids

一つのCSSファイルで100以上のレイアウトが可能です！
- ソースの順序に依存していません

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- layouts require "Standards Mode" rendering,
which the 401-strict doctype triggers -->

<link rel="stylesheet" type="text/css" href="grids.css">

詳細はこちら

http://developer.yahoo.com/yui/grids/

Standard CSS Fonts

<link rel="stylesheet" type="text/css" href="fonts.css">

一貫したfont-sizeとline-height
OSごとに適切なfont-family
ブラウザでのユーザ操作によるfont-size調整に対応
"Quirks Mode"と"Standards Mode"のどちらでも動く
ブラウザごとの"em"のサイズを統一

Standard CSS Reset

ブラウザ間のHTMLデフォルトスタイルの差を取り払ってくれます。

<link rel="stylesheet" type="text/css" href="reset.css">

h1, h2, ... , h6のfont-sizeを100%

h1,h2,h3,h4,h5,h6{font-size:100%;}

margin, paddingを0, borderのリセット

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}

strong, em, citeなどのfont-styleとfont-weightをnormalに

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}

fieldsetとimgからボーダを除去

fieldset,img{border:0;}

リストからlist-styleを除去

ol,ul {list-style:none;}

q要素の引用符を除去

q:before,q:after{content:'';}

captionとthを左寄せ

caption,th {text-align:left;}

チートシートあります

http://developer.yahoo.com/yui/docs/assets/yui-0.11-cheatsheets.zip

これを使ってYahoo!と仲良くしませんか？

新しいブログへ移行しました！こちらもよろしくお願いします。