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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à JQuery UI

Similaire à JQuery UI (20)

Plus de Gary Yeh

Plus de Gary Yeh (10)

Dernier

Dernier (20)

JQuery UI