@agatestudio

HTML + JQuery

Sanrio

Knight

Agate Studio

Html + JQuery

for Tools CreationSanrio 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

• Effects

• Widgets•Accordion•Autocomplete•Button•Datepicker•Dialog•Menu•Progressbar•Slider•Spinner•Tabs•Tooltip

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/