YUI Workshop
         @ncu




       October 6, 2008
http://josephj.com/entry.php?id=61
YUI

      http://josephj.com/entry.php?id=61
- -
What’s New in 2.5.0




        - -
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
- -
Getting Start




     - -
•
•
•
•
•
•
- -
- -
- -
<!DOCTYPE HTML PUBLIC quot;-//
  W3C//DTD HTML 4.01//ENquot;
  quot;http://www.w3.org/TR/html4/
  strict.dtdquot;>




   ...
<!DOCTYPE HTML PUBLIC quot;-//
  W3C//DTD HTML 4.01//ENquot;
  quot;http://www.w3.org/TR/html4/
  strict.dtdquot;>
  •



...
<!DOCTYPE HTML PUBLIC quot;-//
  W3C//DTD HTML 4.01//ENquot;
  quot;http://www.w3.org/TR/html4/
  strict.dtdquot;>
  •
   ...
<!DOCTYPE HTML PUBLIC quot;-//
  W3C//DTD HTML 4.01//ENquot;
  quot;http://www.w3.org/TR/html4/
  strict.dtdquot;>
  •
   ...
- -
- -
- -
•
•
•
•
•
    –
•
•
    –
    –
•
•
    –
    –
    –
•
•
    –
    –
    –
•
•
•
    –
    –
    –
•
•
•
    –
    –
    –
•
•
•
    –
    –
    –
•
•
•
    –
    –
    –
•
- -
- -
YAHOO.util.Connect
YAHOO.util.DataSource
YAHOO.util.Resize
YAHOO.widget.DataTable
YAHOO.widget.Uploader
YAHOO.widget.Image...
•
•
    –
•
    –
    –
•
    –
    –
•
•
    –
    –
•

•
YAHOO.util.Connect
YAHOO.util.DataSource
YAHOO.util.Resize
YAHOO.widget.Uploader
YAHOO.widget.DataTable
YAHOO.widget.Image...
- -
- -
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
                 - -
•
•
    –
•
    –
•
•
    –
•
    • YAHOO.util.Event.addListener(
      document, ‘click’, onDocumentClick);
•
    –
•
    • YAHOO.util.Event.addListener(
      document, ‘click’, onDocumentClick);
    • addListener = on
•
    –
•
    • YAHOO.util.Event.addListener(
      document, ‘click’, onDocumentClick);
    • addListener = on
•
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

  (‘list-item’, ‘...
•
•
    –
•
    –
    –
•
    –
    –
    –
•
    –
    –
    –
•
•
    –
    –
    –
•
    –
•
    –
    –
    –
•
    –

    –
•
    –
    –
    –
•
    –

    –
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

       (‘list-ite...
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

       (‘list-ite...
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

       (‘list-ite...
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

       (‘list-ite...
var YUE = YAHOO.util.Event;

YUE.on(linkEl,‘click’, function(e){

  //



});
•
•
•


•
•


•


•
var YUE = YAHOO.util.Event;

YUE.on(linkEl,‘click’, function(e){

  //



});



                   - -
•
•


•
•


•
•


•
•


•
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
YUI Library Workshop (Yahoo! Course at NCU)
Upcoming SlideShare
Loading in …5
×

YUI Library Workshop (Yahoo! Course at NCU)

2,961 views

Published on

2008/10/5 在中央大學介紹 YUI 使用者函式庫 Part 1.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

YUI Library Workshop (Yahoo! Course at NCU)

  1. 1. YUI Workshop @ncu October 6, 2008
  2. 2. http://josephj.com/entry.php?id=61
  3. 3. YUI http://josephj.com/entry.php?id=61
  4. 4. - -
  5. 5. What’s New in 2.5.0 - -
  6. 6.
  7. 7. • •
  8. 8. • • •
  9. 9. • • • •
  10. 10. • • • • •
  11. 11. • • • • •
  12. 12. • • • • •
  13. 13. • • • • •
  14. 14. • • • • •
  15. 15. • • • • •
  16. 16. • • • • •
  17. 17. • • • • •
  18. 18. • • • • •
  19. 19. - -
  20. 20. Getting Start - -
  21. 21.
  22. 22.
  23. 23. • •
  24. 24. • •
  25. 25. - -
  26. 26. - -
  27. 27. - -
  28. 28. <!DOCTYPE HTML PUBLIC quot;-// W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> - -
  29. 29. <!DOCTYPE HTML PUBLIC quot;-// W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> • - -
  30. 30. <!DOCTYPE HTML PUBLIC quot;-// W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> • – - -
  31. 31. <!DOCTYPE HTML PUBLIC quot;-// W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ strict.dtdquot;> • – – - -
  32. 32. - -
  33. 33. - -
  34. 34. - -
  35. 35.
  36. 36. • •
  37. 37. • • –
  38. 38. • • – –
  39. 39. • • – – –
  40. 40. • • – – – •
  41. 41. • • – – – •
  42. 42. • • – – – •
  43. 43. • • – – – •
  44. 44. • • – – – •
  45. 45. - -
  46. 46. - -
  47. 47. YAHOO.util.Connect YAHOO.util.DataSource YAHOO.util.Resize YAHOO.widget.DataTable YAHOO.widget.Uploader YAHOO.widget.ImageCropper - -
  48. 48.
  49. 49. • –
  50. 50. • – –
  51. 51. • – – •
  52. 52. • – – • •
  53. 53. YAHOO.util.Connect YAHOO.util.DataSource YAHOO.util.Resize YAHOO.widget.Uploader YAHOO.widget.DataTable YAHOO.widget.ImageCropper - -
  54. 54. - -
  55. 55. - -
  56. 56. YAHOO.util.Event.on( formEl, ‘submit’, onFormSubmit ); - -
  57. 57.
  58. 58. • –
  59. 59. • – •
  60. 60. • – • • YAHOO.util.Event.addListener( document, ‘click’, onDocumentClick);
  61. 61. • – • • YAHOO.util.Event.addListener( document, ‘click’, onDocumentClick); • addListener = on
  62. 62. • – • • YAHOO.util.Event.addListener( document, ‘click’, onDocumentClick); • addListener = on •
  63. 63. YAHOO.util.Event.on( formEl, ‘submit’, onFormSubmit );
  64. 64. YAHOO.util.Event.on( formEl, ‘submit’, onFormSubmit );
  65. 65. YAHOO.util.Event.on( formEl, ‘submit’, onFormSubmit );
  66. 66. YAHOO.util.Event.on( formEl, ‘submit’, onFormSubmit );
  67. 67. var YUD = YAHOO.util.Dom; var linkEl = YUD.get(‘mylink’); var listItems = YUD.getElementsByClassName (‘list-item’, ‘li’); - -
  68. 68.
  69. 69. • –
  70. 70. • – –
  71. 71. • – – –
  72. 72. • – – – •
  73. 73. • – – – • –
  74. 74. • – – – • – –
  75. 75. • – – – • – –
  76. 76. var YUD = YAHOO.util.Dom; var linkEl = YUD.get(‘mylink’); var listItems = YUD.getElementsByClassName (‘list-item’, ‘li’);
  77. 77. var YUD = YAHOO.util.Dom; var linkEl = YUD.get(‘mylink’); var listItems = YUD.getElementsByClassName (‘list-item’, ‘li’);
  78. 78. var YUD = YAHOO.util.Dom; var linkEl = YUD.get(‘mylink’); var listItems = YUD.getElementsByClassName (‘list-item’, ‘li’);
  79. 79. var YUD = YAHOO.util.Dom; var linkEl = YUD.get(‘mylink’); var listItems = YUD.getElementsByClassName (‘list-item’, ‘li’);
  80. 80. var YUE = YAHOO.util.Event; YUE.on(linkEl,‘click’, function(e){ // });
  81. 81.
  82. 82.
  83. 83. • •
  84. 84. • • •
  85. 85. var YUE = YAHOO.util.Event; YUE.on(linkEl,‘click’, function(e){ // }); - -
  86. 86.
  87. 87. • •
  88. 88. • •
  89. 89. • •
  90. 90. • •

×