JQuery UI

• Introduction of jQuery
• Environment
• Implement of jQuery
– Use jQuery to write javascript
– Event
– AJAX
– Manipulate DOM
• Implement of jQuery UI

Introduction of jQuery
• jQuery is a multi-browser(cross browser)
JavaScript library designed to simplify the
client-side scripting of HTML
• It was released in January 2006
• Used by over 65% of the 10000 most visited
websites

• jQuery feature
– Free, open source software
– DOM element selections, traversal and
manipulation
– Effects and animations
– Events
– AJAX

• DOM(Document Object Model)
– A cross-platform and language-independent
convention for representing and interacting with
object in HTML and XML documents
– An API for HTML and XML documents
– Objects in the DOM tree may be addressed and
manipulated by using methods on the objects

• AJAX(Asynchronous JavaScript and XML)
– create asynchronous web applications

• jQuery UI
– jQuery UI is a curated set of user interface
interactions, effects, widgets, and themes built on
top of the jQuery JavaScript Library
– jQuery UI is built for designers and developers
alike

Environment
• Development Environment
• Eclipse HTML Editor
– An Eclipse plugin for HTML/JSP/XML Editing.
– It requires JDT
• http://amateras.sourceforge.jp/cgi-
bin/fswiki_en/wiki.cgi?page=EclipseHTMLEdit
or
• Install
– Put the jar into plugins directory

Environment
• Source
• Preview

Environment
• Go to http://jqueryui.com/ and download
jQuery UI
• Put the jQuery UI and your html file together
(Or you can choose not to. However, you need
to include the tag by absolute path )

Implement of jQuery Outline
• Use jQuery to write JavaScript
• Event
• AJAX
• Manipulate DOM

Implement of jQuery
• How to design our webpage?
<html>
</html>
<head>
</head>
<body>
</body>
CSS
jQuery
Structure
of
html

Implement of jQuery
• Example code
• Result

Implement of jQuery
• bind() and trigger()
• When there is click event, call showMsg
• Custom event
• Use trigger function to send event
$('#btn').bind('click', showMsg);
$('#btn').bind(‘haha’, showMsg);
$('#btn').trigger(‘haha’);

Implement of jQuery
• AJAX
– 4 callbacks of
AJAX function
• beforeSend
• success
• error
• complete

Implement of jQuery
• AJAX event handler
– Add a loading image
– When AJAX request is sent, show loading image
<img src="spinner.gif" style="display:none" id="loading" >
$(document).ready(function(e){
$('#btn').click(showMsg);
$('#loading').ajaxStart(function(e){
$(e.target).show();
});
$('#loading').ajaxComplete(function(e){
$(e.target).hide();
});
});

Implement of jQuery
• JavaScript standard offer the following API to
access the elements in a DOM
– document.getElementById
– document.getElementByTagName
– document.getElementByName
• jQuery offers a powerful set of tools for
matching a set of elements in a document
• Full jQuery selector support can be checked
at http://api.jquery.com/category/selectors/

Implement of jQuery
• Manipulate DOM
– UI
• Result

Implement of jQuery
• Manipulate DOM
– event

Implement of jQuery
• Manipulate DOM
– Count how many rows
– jQuery.children()
– jQuery.parent()
$('#complete_button').click(function(e) {
alert("一共有 "+
$('tbody').children('tr').length + " 列資料");
});

Implement of jQuery UI
• Example code
• Result

• The HTML code generated by tabs() method

• Without tabs() method of jQuery UI
• Result
<script>

</script>

• Manipulation of jQuery UI
– tabs() method
• tabs(options)
• tabs(“action”, params)
– AJAX
– bind()

• How can I add a tab dynamically
– The green one is tabs(options)
– The blue one is tabs(“action”, params)
• tabs(“add”, “#id”, title, index)
<script>
$(“#tabs”).tabs ({
fx : {opacity : “toggle”},
}).tabs (“add”, “#tab4”, Tab4);
</script>

• AJAX
– The red one is tabs(“url”, index, url)
– The blue one is tabs(“load”, index)
<script>
}).tabs (“url”, 0, “haha.php”).tabs (“load”, 0);
</script>

• bind()
– handle “tabsadd” after called “add”
<script>
}).bind (“tabsadd”, function (event, tab)
{
$(tab.panel).load (“haha.php”);
}).tabs (“add”, “#tab4”, “Tab4”);
</script>

Conclusion
• 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.

JQuery UI

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a JQuery UI

Similar a JQuery UI (20)

Más de Gary Yeh

Más de Gary Yeh (10)

Último

Último (20)

JQuery UI