YUI

3,245 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,245
On SlideShare
0
From Embeds
0
Number of Embeds
177
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

YUI

  1. 1. YUI
  2. 2. YUI って何だ?
  3. 3. Y ahoo! U ser I nterface Library Yahoo! が提供する CSS と JavaScript のライブラリ
  4. 4. 何が出来るの?
  5. 5. カレンダー リッチテキストエディタ アップローダー ドラッグ&ドロップ タブ切り替え スライドショー サジェスト(入力補完) グラフ ソート可能なテーブル
  6. 6. メリット
  7. 7. ・見た目がカッコイイ ・開発時間の短縮 ・名前の衝突がない ・ クロスブラウザ 対応
  8. 9. デメリット
  9. 10. ・読み込むファイルが多い ・読込みが重いかな?
  10. 11. 使ってみましょう ( ・ ω ・ ) ノ
  11. 12. ドラッグ&ドロップ
  12. 13. <script type=“text/javascript”>    new YAHOO.util.DD(&quot; ddImg &quot;); </script> <img id=&quot; ddImg &quot; src=&quot;nekomurasan.jpg&quot;>
  13. 14. タブ切り替え
  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>
  15. 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>
  16. 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>
  17. 18. リッチテキスト エディタ
  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>
  19. 20. アップローダー ※ 複数ファイルの同時アップロード可能
  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>
  21. 22. こんなことも 出来ます(・∀・)
  22. 23. スライドショー ※ slideshow.js というものを使っています。
  23. 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>
  24. 25. まとめ
  25. 26. ① ID を付ける。 ② コンストラクタに ID を渡す これだけ
  26. 27. YUI++ YUI を利用して、短時間でカッコイイ Web ページを作っちゃいましょう

×