Handling Style Sheet(2) - Agile Web Database Development

Website Builder for jQuery and SQL
- Development with HTML, JavaScript and SQL -

HOME
Tags
Programmoing Topics
Handling Style Sheet

Pages having css tag

jQuery Progress Bar example

jQuery Progressbar is very useful UI parts to make web application user wait. In this page, I'll show you the example of managing server side backend process with the jQuery ProgressBar.

Access and work the example
Implementation

Included jQuery files
First html form
Launch the backend job process
About backend job
Checking progress of backend job

Install script
Testing automation

Access and work the example

In order to access this example, please access the url below or "jQuery Progress Bar" link from the toppage.

http://localhost:8080/samples/progressbar/

javascript

threading

css

progressbar

jquey

jQuery jqTree plugin example

The jqTree is useful tree widget made as jQuery plugin. This example shows you how to use this jQuery plugin with the server side program.

This example is using jqTree jQuery plugin.

Access and work the example
Implementation

Included jQuery files
Create tree control
JSon data
Click callback
Drag and Drop support
Server side program
Testing automation

Access and work the example

In order to access this example, please access the url below or "jQuery Autocomplete" link from the toppage.

javascript

css

tree

jquey

json

jQuery jeditable example

The jeditable is useful parts to make dynamic input form. This example shows you how to use it and co-work with the server side program and database.

Access and work the example

Normal text area
Select input area
Ajax Select area

Implementation

Included jQuery files
Set up Html
Set up normal text input
Report change to the server script
Set up ajax select area
Get candidate items via Ajax
Get label string from the id in server side

Install script
Testing automation

Access and work the example

In order to access this example, please access the url below or "jQuery jeditable" link from the top page.

http://localhost:8080/samples/jeditable/

javascript

debugger

css

jquey

json

jQuery Dialog example

jQuery Dialog is main and basic part to use Ajax. This example shows you how to use Ajax jQuery Dialog.

Access and work the example

Included jQuery files
Setup Ajax dialog
Source code of Ajax dialog

Implementation
Testing automation

Access and work the example

In order to access this example, please access the url below or "jQuery Dialog" link from the toppage.

http://localhost:8080/samples/dialog/

javascript

css

dialog

jquey

jQuery Autocomplete example

jQuery Autocomplete is used when the select target is too many to select from the combobox. In this example, it uses Ajax in order to get selection candidates.

Access and work the example
Implementation

Included jQuery files
Autocomplete form and Html
Ajax script

Install script
Testing automation

Access and work the example

In order to access this example, please access the url below or "jQuery Autocomplete" link from the toppage.

http://localhost:8080/samples/autocomplete/

javascript

css

autocomplete

jquey

json

FullCalendar jQuery plugin example

This is an example using FullCalendar jQuery plugin. You can use this application omponent as schedule manegement system.

Access and work the example
Implementation

Included jQuery files
Set up html
Load FullCalendar plugin
Handle click event on the calendar
Show new event dialog
Make new event in server side
Get event information
Change start date or time by dragging
Change period of the event by dragging

Install script
Testing automation

Access and work the example

In order to access this example, please access the url below or "jQuery Calendar UI" link from the top page.

http://localhost:8080/samples/calendar/

javascript

css

calendar

jquey

json

Datatable jQuery plugin example

This is an example using the Datatable jQuery plugin. This example shows record in a table with paging and search.

Access and work the exampleAccess and work the example
Implementation

Included jQuery files
Set up Html
Load datatable plugin
Server side program

Install script
Testing automation

Access and work the example

In order to access this example, please access the url below or "jQuery DataTable UI" link from the top page.

http://localhost:8080/samples/gridtable/

javascript

css

table

jquey

json

This software archives the web page to record visitor's action, in order to show heat map and replay user's actions. The web page to record is often upgraded, therefore this software often archive the web page and store each versions.

Archiving Page

Archive html
Where the archived page used

View archived page

Archiving Page

The archiver archive your page automatically. When you log the action using this software, and there is no archive in the database or the last archive is lame, it automatically do it.

Archive html

When it archive html of the page

heatmap

css

image

Mouse Move Heatmap

Mouse Move Heat map

By using website visitor's action log, it can generate heatmap of the mouse move. The best way to know user's experience deeply is to wach recorded action, but the number of accesses increases, mousemove heat map is useful.