How to Win the Heart of CSS Boys

1,486 views

Published on

JS Girls Tokyo #1 のライトニングトークセッションのスライドです。

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

No Downloads
Views
Total views
1,486
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
6
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

How to Win the Heart of CSS Boys

  1. 1. How to Win the Heart of CSS Boys
  2. 2. twitter: @hiloki Blog: inkdesign.jp Hiroki Tani
  3. 3. JavaScript HTML/CSSB
  4. 4. $('.setting-profile .save-button') .on('click', function(e){ ... }); S T
  5. 5. <div class="setting-profile"> ... <button class="save-button"> Save! </button> </div>
  6. 6. <div class="profile"> ... <button class="profile__save-button"> Save! </button> </div> S T
  7. 7. $('.js-save-profile') .on('click', function(e){ ... }); Q B
  8. 8. .js-save-profile { ... }
  9. 9. R c .js-save-profile { ... }
  10. 10. <div class="setting-profile"> ... <button class="save-button js-save-profile"> Save! </button> </div>
  11. 11. <div class="profile"> ... <button class="profile__save-button js-save-profile"> Save! </button> </div> Q B
  12. 12. $('.js-close').on('click', function(){ $(this).parent().parent().parent() .hide(); }); S T
  13. 13. $('.js-close').on('click', function(){ $(this).closest('.js-container') .hide(); }); Q B
  14. 14. $('.register-button').css({ 'opacity': '0.5', ‘background-color': '#ccc' }); S T
  15. 15. $('.register-button') .addClass(‘is-disabled'); Q B
  16. 16. B9
  17. 17. Thanks Z twitter: @hiloki Blog: inkdesign.jp Hiroki Tani Cover Photo: www.flickr.com/photos/25969014@N06/6930963721/

×