Your SlideShare is downloading. ×
0
Fundamental JQuery
TRAINING HARI #3 – ACHMAD SOLICHIN (@ACHMATIM)
Agenda
 Apa itu JQuery?
 jQuery Basics
 Animating, Scrolling, Resizing
 Image and Slideshow
 Forms
Apa itu JQuery?
Apa itu JQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like
HTML document traversal...
JQuery Usage Statistics
Sumber: http://trends.builtwith.com/javascript/
Mengapa JQuery?
 Mengakses bagian halaman tertentu dengan mudah.
 Dapat mengubah tampilan bagian halaman tertentu saja.
...
Kegunaan JQuery
 Mengakses bagian halaman tertentu dengan mudah.
 Dapat mengubah tampilan bagian halaman tertentu saja.
...
JQuery Basics
Download dan Install
 Download
http://jquery.com
 Install (local)
<script src=“path/to/jquery.js”></script>
 Install (C...
Struktur JQuery
Document Object Model (DOM)
JQuery Hello World!
$(document).ready(function() {
alert('Hello World!');
});
$(function() {
alert('Ready to do your biddi...
Selector
 Tag
$(‘h2’)
 ID
$(‘#celebs’)
 Class
$(‘.data’)
Selector
Contoh
jQuery dan CSS
 Membaca Property CSS
 Mengubah Property CSS
jQuery dan CSS
 Menambah dan Menghapus Class CSS
jQuery Event Handler
 HTML
 Menyembunyikan suatu komponen pada saat tombol diklik
 Selector ‘this’ yang mengacu pada li...
jQuery Event Handler
 Toggle (Show/Hide)
jQuery Manipulasi Elemen
 Menambahkan elemen baru
 Menghapus elemen
Menambahkan setelah / sebelum
Menambahkan di dalam e...
jQuery Manipulasi Elemen
 Mengganti Isi Elemen
 Apa perbedaan .html() dan .text() ?
jQuery mouseover() dan hover()
JQuery Animating, Scrolling, Resizing
jQuery animate()
 Animasi di semua paragraf saat halaman ditampilkan
 Animasi aktif saat hover()
 Color Animation
jQuery animate()
 Easing
jQuery animate() - Bouncing
jQuery animate() – Animated Navigation
jQuery Scrolling
 Fungsi scroll()
 Floating Navigation
jQuery Scrolling
 Page Scroll  scrollTop
 Manipulasi Scrollbar  plugin https://code.google.com/p/jscrollpane/
jQuery Resize
 Fungsi resize()
 Membuat komponen dapat diubah ukurannya (resizable)
 Resizable Textarea
JQuery Image & Slideshow
jQuery Lightbox
 ColorBox - http://www.jacklmoore.com/colorbox/
 LightBox - http://lokeshdhakar.com/projects/lightbox2/
...
jQuery ColorBox
jQuery Cropping Image
 Jcrop - http://deepliquid.com/content/Jcrop.html
 Image Cropper - https://github.com/fengyuanchen...
jQuery Image Slider
 ResponsiveSlider - http://responsiveslides.com/
 WowSlider - http://wowslider.com/
 Jquery Cycle -...
JQuery Menu, Tabs, Panels, Tooltips
jQuery Menu
 SmartMenu - http://www.smartmenus.org/
 SuperFish - http://users.tpg.com.au/j_birch/plugins/superfish/
 Fl...
jQuery Accordion
 liteAccordion - http://nicolahibbert.com/demo/liteAccordion/
 Slidorion - http://slidorion.com/
 jQue...
jQuery Tabs
jQuery Tabs
 jQuery UI Tabs – http://jqueryui.com
 EasyTabs - http://os.alfajango.com/easytabs
 TabulousJS - http://git...
jQuery Slide-down Login Panel
jQuery Tooltips
jQuery Tooltips
 jQuery UI Tooltips – http://jqueryui.com
 Tooltipster - http://iamceege.github.io/tooltipster/
 qTip2 ...
JQuery Forms
jQuery Form Validation
 http://achmatim.net/2012/05/22/membuat-validasi-form-dengan-jquery-validation/
jQuery Check All Checkboxes
jQuery Autocomplete
jQuery Autocomplete
 jQuery UI Autocomplete - http://jqueryui.com/autocomplete/
 Autocomplete - http://bassistance.de/jq...
jQuery Datepicker
 jQuery UI Datepicker – http://jqueryui.com/datepicker
 DatePicker - http://www.eyecon.ro/datepicker/
...
jQuery Slider
 jQuery UI Slider – http://jqueryui.com/slider
Resources
 (Book) Jquery Novice to Ninja. Sitepoint
 http://jquery.com
 http://jqueryui.com
 http://achmatim.net
Terima Kasih
 http://achmatim.net
 achmatim@gmail.com
 http://twitter.com/achmatim
 http://facebook.com/achmatim
 htt...
Upcoming SlideShare
Loading in...5
×

Fundamental JQuery

6,047

Published on

Materi training Fundamental JQuery

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,047
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
648
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Fundamental JQuery"

  1. 1. Fundamental JQuery TRAINING HARI #3 – ACHMAD SOLICHIN (@ACHMATIM)
  2. 2. Agenda  Apa itu JQuery?  jQuery Basics  Animating, Scrolling, Resizing  Image and Slideshow  Forms
  3. 3. Apa itu JQuery?
  4. 4. Apa itu JQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. (http://jquery.com)
  5. 5. JQuery Usage Statistics Sumber: http://trends.builtwith.com/javascript/
  6. 6. Mengapa JQuery?  Mengakses bagian halaman tertentu dengan mudah.  Dapat mengubah tampilan bagian halaman tertentu saja.  Mengubah isi dari halaman.  Merespond interaksi user dalam halaman  Menambahkan animasi ke halaman  Mengambil informasi dari server tanpa me-refresh seluruh halaman  Menyederhanakan penulisan Javascript biasa.
  7. 7. Kegunaan JQuery  Mengakses bagian halaman tertentu dengan mudah.  Dapat mengubah tampilan bagian halaman tertentu saja.  Mengubah isi dari halaman.  Merespond interaksi user dalam halaman  Menambahkan animasi ke halaman  Mengambil informasi dari server tanpa me-refresh seluruh halaman  Menyederhanakan penulisan Javascript biasa.
  8. 8. JQuery Basics
  9. 9. Download dan Install  Download http://jquery.com  Install (local) <script src=“path/to/jquery.js”></script>  Install (CDN) – Content Delivery Network <script src=“http://code.jquery.com/jquery.js”></script> <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/ jquery.min.js”></script>
  10. 10. Struktur JQuery
  11. 11. Document Object Model (DOM)
  12. 12. JQuery Hello World! $(document).ready(function() { alert('Hello World!'); }); $(function() { alert('Ready to do your bidding!'); });
  13. 13. Selector  Tag $(‘h2’)  ID $(‘#celebs’)  Class $(‘.data’)
  14. 14. Selector
  15. 15. Contoh
  16. 16. jQuery dan CSS  Membaca Property CSS  Mengubah Property CSS
  17. 17. jQuery dan CSS  Menambah dan Menghapus Class CSS
  18. 18. jQuery Event Handler  HTML  Menyembunyikan suatu komponen pada saat tombol diklik  Selector ‘this’ yang mengacu pada lingkup dirinya sendiri
  19. 19. jQuery Event Handler  Toggle (Show/Hide)
  20. 20. jQuery Manipulasi Elemen  Menambahkan elemen baru  Menghapus elemen Menambahkan setelah / sebelum Menambahkan di dalam elemen
  21. 21. jQuery Manipulasi Elemen  Mengganti Isi Elemen  Apa perbedaan .html() dan .text() ?
  22. 22. jQuery mouseover() dan hover()
  23. 23. JQuery Animating, Scrolling, Resizing
  24. 24. jQuery animate()  Animasi di semua paragraf saat halaman ditampilkan  Animasi aktif saat hover()  Color Animation
  25. 25. jQuery animate()  Easing
  26. 26. jQuery animate() - Bouncing
  27. 27. jQuery animate() – Animated Navigation
  28. 28. jQuery Scrolling  Fungsi scroll()  Floating Navigation
  29. 29. jQuery Scrolling  Page Scroll  scrollTop  Manipulasi Scrollbar  plugin https://code.google.com/p/jscrollpane/
  30. 30. jQuery Resize  Fungsi resize()  Membuat komponen dapat diubah ukurannya (resizable)  Resizable Textarea
  31. 31. JQuery Image & Slideshow
  32. 32. jQuery Lightbox  ColorBox - http://www.jacklmoore.com/colorbox/  LightBox - http://lokeshdhakar.com/projects/lightbox2/  FancyBox - http://fancybox.net/  Magnific Popup - http://dimsemenov.com/plugins/magnific-popup/  Nivo Lightbox - http://dev7studios.com/plugins/nivo-lightbox/  Featherlight - http://noelboss.github.io/featherlight/
  33. 33. jQuery ColorBox
  34. 34. jQuery Cropping Image  Jcrop - http://deepliquid.com/content/Jcrop.html  Image Cropper - https://github.com/fengyuanchen/cropper  CropPic - http://www.croppic.net/  Image Crop (paid) - http://codecanyon.net/item/image-crop/5348464  CropZoom - http://www.cropzoom.com.ar/
  35. 35. jQuery Image Slider  ResponsiveSlider - http://responsiveslides.com/  WowSlider - http://wowslider.com/  Jquery Cycle - http://jquery.malsup.com/cycle/  BxSlider - http://bxslider.com/  SlideJS - http://www.slidesjs.com/  NivoSlider - http://dev7studios.com/plugins/nivo-slider
  36. 36. JQuery Menu, Tabs, Panels, Tooltips
  37. 37. jQuery Menu  SmartMenu - http://www.smartmenus.org/  SuperFish - http://users.tpg.com.au/j_birch/plugins/superfish/  FlexNav - http://jasonweaver.name/lab/flexiblenavigation/  contextMenu - https://github.com/s-yadav/contextMenu.js  NOO Menu (paid) - http://codecanyon.net/item/noo-menu-wordpress-mega-menu- plugin/7873697  meanMenu - https://github.com/meanthemes/meanMenu  Zetta Menu (paid) - http://codecanyon.net/item/zetta-menu-jquery-mega-menu/7941407  And many more…
  38. 38. jQuery Accordion  liteAccordion - http://nicolahibbert.com/demo/liteAccordion/  Slidorion - http://slidorion.com/  jQuery UI Accordion – http://jqueryui.com  Flat Jquery Accordion - http://cssmenumaker.com/blog/flat-jquery-accordion-menu-tutorial  Vertical Accordion Menu - http://thecodeplayer.com/walkthrough/vertical-accordion-menu- using-jquery-css3  jQuery Accordion (paid) - http://codecanyon.net/item/jquery-accordion/4826492  And many more…
  39. 39. jQuery Tabs
  40. 40. jQuery Tabs  jQuery UI Tabs – http://jqueryui.com  EasyTabs - http://os.alfajango.com/easytabs  TabulousJS - http://git.aaronlumsden.com/tabulous.js/  Google Play’s Tabs - http://red-team-design.com/google-play-minimal-tabs-with-css3-jquery/  Folder Tabs - http://red-team-design.com/css3-jquery-folder-tabs/  And many more…
  41. 41. jQuery Slide-down Login Panel
  42. 42. jQuery Tooltips
  43. 43. jQuery Tooltips  jQuery UI Tooltips – http://jqueryui.com  Tooltipster - http://iamceege.github.io/tooltipster/  qTip2 - http://qtip2.com/  qTip - http://craigsworks.com/projects/qtip/  Toltipsy - http://tooltipsy.com/  And many more…
  44. 44. JQuery Forms
  45. 45. jQuery Form Validation  http://achmatim.net/2012/05/22/membuat-validasi-form-dengan-jquery-validation/
  46. 46. jQuery Check All Checkboxes
  47. 47. jQuery Autocomplete
  48. 48. jQuery Autocomplete  jQuery UI Autocomplete - http://jqueryui.com/autocomplete/  Autocomplete - http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/  Ajax Autocomplete - http://www.devbridge.com/sourcery/components/jquery- autocomplete/  Facebook Like Autocomplete - http://www.web2ajax.fr/2008/02/03/facebook-like-jquery- and-autosuggest-search-engine/  And many more…
  49. 49. jQuery Datepicker  jQuery UI Datepicker – http://jqueryui.com/datepicker  DatePicker - http://www.eyecon.ro/datepicker/  Bootstrap Datepicker - http://www.eyecon.ro/bootstrap-datepicker/  glDatePicker - http://glad.github.com/glDatePicker/  Zebra DatePicker - http://stefangabos.ro/jquery/zebra-datepicker/  ptTimeSelect - http://pttimeselect.sourceforge.net/example/index.html  And many more…
  50. 50. jQuery Slider  jQuery UI Slider – http://jqueryui.com/slider
  51. 51. Resources  (Book) Jquery Novice to Ninja. Sitepoint  http://jquery.com  http://jqueryui.com  http://achmatim.net
  52. 52. Terima Kasih  http://achmatim.net  achmatim@gmail.com  http://twitter.com/achmatim  http://facebook.com/achmatim  http://slideshare.net/achmatim
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×