The document discusses tools for creating HTML and JQuery applications including development, admin and data tools. It covers using JQuery for easy multiplatform access with standard HTML visuals and interactions. It provides examples of basic functions like data passing with PHP and AJAX, generating views, and DOM access. Useful JQuery functions like addClass and ajax are demonstrated. Popular JavaScript libraries that could be used are also listed, such as JQuery UI, DataTables, Expanding Text Areas, Typeahead, and a Color Picker library.

1. @agatestudio
HTML + JQuery
Sanrio
Knight
Agate Studio

2. Html + JQuery
for Tools Creation
Sanrio Hernanto

3. Tools Creation
• Game Tools
▫ Development Tools
▫ Admin Tools
▫ Data Tools

4. Why HTML + JQuery
• Easy to Access
• Multiplatform
• Standard HTML Visual & Interaction
• Many Custom Library

5. Basic - Data Passing (PHP)
• Data Passing via Direct JSON assign

6. Basic - Data Passing (PHP)
• Data Passing via AJAX

7. Basic - Generate View
• Code

8. Basic - Generate View
• Web

9. Basic - DOM Access using Class
• Access Data #X

10. Basic - DOM Access using Class
• Data Iteration

11. Basic - Ajax for Backend
Communication

12. JQuery – Useful Function
• .addClass() & .removeClass()
• .attr() & .css()

13. JQuery – Useful Function
• .html() & .val()

14. JQuery – Useful Function
• .after() & .before()

15. JQuery – Useful Function
• .data()

16. JQuery – Useful Function
• .each()

17. JQuery – Useful Function
• .ajax()

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. Library – Data Tables
• https://datatables.net/

20. Library – Data Tables

21. Library – Expanding Text Area
• http://bgrins.github.io/ExpandingTextareas/

22. Library - Typeahead
• http://twitter.github.io/typeahead.js/

23. Library – Color Picker
• http://www.eyecon.ro/colorpicker/