@agatestudio
HTML + JQuery
Sanrio
Knight
Agate Studio
Html + JQuery
for Tools Creation
Sanrio Hernanto
Tools Creation
• Game Tools
▫ Development Tools
▫ Admin Tools
▫ Data Tools
Why HTML + JQuery
• Easy to Access
• Multiplatform
• Standard HTML Visual & Interaction
• Many Custom Library
Basic - Data Passing (PHP)
• Data Passing via Direct JSON assign
Basic - Data Passing (PHP)
• Data Passing via AJAX
Basic - Generate View
• Code
Basic - Generate View
• Web
Basic - DOM Access using Class
• Access Data #X
Basic - DOM Access using Class
• Data Iteration
Basic - Ajax for Backend
Communication
JQuery – Useful Function
• .addClass() & .removeClass()
• .attr() & .css()
JQuery – Useful Function
• .html() & .val()
JQuery – Useful Function
• .after() & .before()
JQuery – Useful Function
• .data()
JQuery – Useful Function
• .each()
JQuery – Useful Function
• .ajax()
Library – JQuery UI
• https://jqueryui.com/
• Interactions
▫ Draggable
▫ Droppable
▫ Resizable
▫ Selectable
▫ Sortable
• E...
Library – Data Tables
• https://datatables.net/
Library – Data Tables
Library – Expanding Text Area
• http://bgrins.github.io/ExpandingTextareas/
Library - Typeahead
• http://twitter.github.io/typeahead.js/
Library – Color Picker
• http://www.eyecon.ro/colorpicker/
Upcoming SlideShare
Loading in …5
×

HTML+JQuery by Rio

407 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
407
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML+JQuery by Rio

  1. 1. @agatestudio HTML + JQuery Sanrio Knight Agate Studio
  2. 2. Html + JQuery for Tools Creation Sanrio Hernanto
  3. 3. Tools Creation • Game Tools ▫ Development Tools ▫ Admin Tools ▫ Data Tools
  4. 4. Why HTML + JQuery • Easy to Access • Multiplatform • Standard HTML Visual & Interaction • Many Custom Library
  5. 5. Basic - Data Passing (PHP) • Data Passing via Direct JSON assign
  6. 6. Basic - Data Passing (PHP) • Data Passing via AJAX
  7. 7. Basic - Generate View • Code
  8. 8. Basic - Generate View • Web
  9. 9. Basic - DOM Access using Class • Access Data #X
  10. 10. Basic - DOM Access using Class • Data Iteration
  11. 11. Basic - Ajax for Backend Communication
  12. 12. JQuery – Useful Function • .addClass() & .removeClass() • .attr() & .css()
  13. 13. JQuery – Useful Function • .html() & .val()
  14. 14. JQuery – Useful Function • .after() & .before()
  15. 15. JQuery – Useful Function • .data()
  16. 16. JQuery – Useful Function • .each()
  17. 17. JQuery – Useful Function • .ajax()
  18. 18. Library – JQuery UI • https://jqueryui.com/ • Interactions ▫ Draggable ▫ Droppable ▫ Resizable ▫ Selectable ▫ Sortable • Effects • Widgets •Accordion •Autocomplete •Button •Datepicker •Dialog •Menu •Progressbar •Slider •Spinner •Tabs •Tooltip
  19. 19. Library – Data Tables • https://datatables.net/
  20. 20. Library – Data Tables
  21. 21. Library – Expanding Text Area • http://bgrins.github.io/ExpandingTextareas/
  22. 22. Library - Typeahead • http://twitter.github.io/typeahead.js/
  23. 23. Library – Color Picker • http://www.eyecon.ro/colorpicker/

×