Download as PDF, PPTX
Uploaded byGary Yeh
JQuery UI
This document introduces jQuery, including its environment, implementation, and use with jQuery UI. jQuery is a JavaScript library that simplifies client-side scripting by providing methods for selecting elements, handling events, performing animations and AJAX requests, and manipulating the DOM. The document provides examples of using jQuery for these tasks and binding jQuery UI widgets like tabs.
More Related Content
![谷歌留痕技术教程[ 𝙩𝙤𝙥 𝟮𝟯𝟯. 𝙘 𝙤𝙢 ]](https://cdn.slidesharecdn.com/ss_thumbnails/top233-260130173900-2eb784f9-thumbnail.jpg?width=640&height=640&fit=bounds)
JQuery UI
- 1.
- 2. • Introduction ofjQuery • Environment • Implement of jQuery – Use jQuery to write javascript – Event – AJAX – Manipulate DOM • Implement of jQuery UI
- 3. 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
- 4. Introduction of jQuery •jQuery feature – Free, open source software – DOM element selections, traversal and manipulation – Effects and animations – Events – AJAX
- 5. Introduction of jQuery •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
- 6. Introduction of jQuery •AJAX(Asynchronous JavaScript and XML) – create asynchronous web applications
- 7. Introduction of jQuery •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
- 8. 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
- 9.
- 10. Environment • Go tohttp://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 )
- 11. Implement of jQueryOutline • Use jQuery to write JavaScript • Event • AJAX • Manipulate DOM
- 12. Implement of jQuery •How to design our webpage? <html> </html> <head> </head> <body> </body> CSS jQuery Structure of html
- 13. Implement of jQuery •Example code • Result
- 14.
- 15. 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’);
- 16. Implement of jQuery •AJAX – 4 callbacks of AJAX function • beforeSend • success • error • complete
- 17. 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(); }); });
- 18. 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/
- 19. Implement of jQuery •Manipulate DOM – UI • Result
- 20. Implement of jQuery •Manipulate DOM – event
- 21. Implement of jQuery •Manipulate DOM – Count how many rows – jQuery.children() – jQuery.parent() $('#complete_button').click(function(e) { alert("一共有 "+ $('tbody').children('tr').length + " 列資料"); });
- 22. Implement of jQueryUI • Example code • Result
- 23. Implement of jQueryUI • The HTML code generated by tabs() method
- 24. Implement of jQueryUI • Without tabs() method of jQuery UI • Result <script> <!--$('#tabs').tabs();--> </script>
- 25. Implement of jQueryUI • Manipulation of jQuery UI – tabs() method • tabs(options) • tabs(“action”, params) – AJAX – bind()
- 26. Implement of jQueryUI • 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>
- 27. Implement of jQueryUI • AJAX – The red one is tabs(“url”, index, url) – The blue one is tabs(“load”, index) <script> $(“#tabs”).tabs ({ fx : {opacity : “toggle”}, }).tabs (“url”, 0, “haha.php”).tabs (“load”, 0); </script>
- 28. Implement of jQueryUI • bind() – handle “tabsadd” after called “add” <script> $(“#tabs”).tabs ({ fx : {opacity : “toggle”}, }).bind (“tabsadd”, function (event, tab) { $(tab.panel).load (“haha.php”); }).tabs (“add”, “#tab4”, “Tab4”); </script>
- 29. Conclusion • jQuery isa 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.
- 30. Future Work • jQueryMobile