1. YUI

2. YUI って何だ？

3. Y ahoo! U ser I nterface Library Yahoo! が提供する CSS と JavaScript のライブラリ

4. 何が出来るの？

5. カレンダー リッチテキストエディタ アップローダー ドラッグ＆ドロップ タブ切り替え スライドショー サジェスト（入力補完） グラフ ソート可能なテーブル

6. メリット

7. ・見た目がカッコイイ ・開発時間の短縮 ・名前の衝突がない ・ クロスブラウザ 対応

9. デメリット

10. ・読み込むファイルが多い ・読込みが重いかな？

11. 使ってみましょう ( ･ ω ･ ) ﾉ

12. ドラッグ＆ドロップ

13. <script type=“text/javascript”> new YAHOO.util.DD(&quot; ddImg &quot;); </script> <img id=&quot; ddImg &quot; src=&quot;nekomurasan.jpg&quot;>

14. タブ切り替え

15. <script type=“text/javascript”> var tab = new YAHOO.widget.TabView(&quot; myTab &quot;); </script> <div id=&quot; myTab &quot; class=&quot;yui-navset yui-navset-top&quot;> <ul class=&quot;yui-nav&quot;></ul> <div class=&quot;yui-content&quot;></div> </div>

16. <script type=“text/javascript”> var tab = new YAHOO.widget.TabView(&quot; myTab &quot;); </script> <div id=&quot; myTab &quot; class=&quot;yui-navset yui-navset-top&quot;> <ul class=&quot;yui-nav&quot;> <li><a href=&quot;#&quot;><em> tab-title1 </em></a></li> <li><a href=&quot;#&quot;><em> tab-title2 </em></a></li> <li><a href=&quot;#&quot;><em> tab-title3 </em></a></li> </ul> <div class=&quot;yui-content&quot;> <div> content1 </div> <div> content2 </div> <div> content3 </div> </div> </div>

17. <button onclick=&quot; addtabs ()&quot;> タブを追加 </button> <script type=“text/javascript”> var tab = new YAHOO.widget.TabView(&quot; myTab &quot;); var addtabs = function() { tab.addTab( new YAHOO.widget.Tab( { label: ‘ ラベル’ , content: ‘ 内容’ } )); } </script>

18. リッチテキスト エディタ

19. <script type=“text/javascript”> var myConfig = { height: '200px', width: '520px', handleSubmit: true, autoHeight: true }; var myEditor = new YAHOO.widget.SimpleEditor(' yuieditor ', myConfig); myEditor. render() ; </script> <textarea id=&quot; yuieditor &quot; name=&quot; yuieditor &quot;> </textarea>

20. アップローダー ※ 複数ファイルの同時アップロード可能

21. <div id=&quot; yuiuploader “></div> <script type=“text/javascript”> YAHOO.widget.Uploader.SWFURL = &quot;uploader.swf&quot;; var uploader = new YAHOO.widget.Uploader(&quot; yuiuploader &quot;); uploader.addListener('fileSelect',onFileSelect); uploader.addListener('uploadError',onUploadError); uploader.addListener('uploadComplete',onUploadComplete); uploader.addListener('uploadProgress',onUploadProgress); uploader.addListener('uploadStart',onUploadStart); uploader.upload(fileID, 'upload.cgi'); </script>

22. こんなことも 出来ます（・∀・）

23. スライドショー ※ slideshow.js というものを使っています。

24. <script type=“text/javascript”> var ssConfig = { effect: YAHOO.myowndb.slideshow.effects.slideRight, interval: 3000 }; var ss = new YAHOO.myowndb.slideshow(&quot; yuislide &quot;, ssConfig); </script> <div id=&quot; yuislide &quot; class=&quot;yui-sldshw-displayer&quot;> <img class=&quot; yui-sldshw-frame &quot; src=&quot;neko.jpg&quot; /> <div class=&quot; yui-sldshw-frame &quot;> <p>HTML を表示することもできます </p> </div> <div class=&quot; yui-sldshw-frame &quot;> <iframe width=&quot;312&quot; height=&quot;176&quot; src=“…&quot;></iframe> </div> </div>

25. まとめ

26. ① ID を付ける。 ② コンストラクタに ID を渡す これだけ

27. YUI++ YUI を利用して、短時間でカッコイイ Web ページを作っちゃいましょう