JQuery UI Plug-ins, Object Models & the Window Object Javascript & JQuery JQuery UI Plug-ins, Object Models & the Window Object Chapters 7 & 9

jQuery UI jQuery UI is a a lightweight, "write less, do more", JavaScript library, focusing on user interface interactions Widget based Built on top of the jQuery JavaScript Library can use to build highly interactive web applications

Using jQuery Ui To start using jQuery UI: Download the jQuery UI library from jQuery.com Include jQuery UI from a CDN, like Google Need to include these three files on any page Stylesheet <link rel="stylesheet" href="jquery-ui.min.css"> jQuery <script src="external/jquery/jquery.js"></script> jQuery UI <script src="jquery-ui.min.js"></script>

jQuery UI Datepicker Widget HTML <input type="text" name="date" id="date"> Javascript $( "#date" ).datepicker(); Resulting Widget http://jqueryui.com

Using options Plugins have a default configuration for the most basic and common use case can override each of its default settings using "options“ set of properties passed into a jQuery UI widget as arguments Example: Slider Widget has an option for orientation, to specify whether the slider should be horizontal or vertical $( "#mySliderDiv" ).slider({ orientation: "vertical", min: 0, max: 150, value: 50 }); $( "#mySliderDiv" ).slider({ orientation: "vertical" });

jQuery UI Accordian Widget Displays collapsible content panels for presenting information in a limited amount of space HTML <div id="accordion"> <h3>Section 1</h3> <div> <p> Mauris mauris ante, </p> </div> <h3>Section 2</h3> <p> Sed non urna, </p> etc… Javascript $( function() { $( "#accordion" ).accordion(); } );

jQuery UI Dialog Widget an overlay positioned protected from page content has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default HTML <div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> SCRIPT $( function() { $( "#dialog" ).dialog(); } ); http://jqueryui.com

jQuery UI Tooltips When you hover the element with your mouse, a little box is displayed next to the element, just like a native tooltip. Uses title attribute HTML: <p><label for="age">Your age:</label> <input type=“text” id="age" title="We ask for your age only for statistical purposes."></p> STYLE label { display: inline-block; width: 5em; } SCRIPT: $( function() { $( ‘#age’ ).tooltip(); } ); http://jqueryui.com

jQuery UI Menu When you hover the element with your mouse, a submenu appears. Has mouse and keyboard interactions for navigation HTML: <ul id="menu"> <li class="ui-state-disabled"><div>Toys(n/a)</div></li> <li><div>Books</div></li> <li><div>Clothing</div></li> <li><div>Electronics</div> <ul> <li class="ui-state-disabled"><div>Home Entertainment</div></li> <li><div>Car Hifi</div></li> <li><div>Utilities</div></li> </ul> </li> <li><div>Movies</div></li> <li><div>Music</div> SCRIPT: $( function() { $( "#menu" ).menu(); } ); http://jqueryui.com

Used for rollover effects to preload images Image object Used for rollover effects to preload images The Image object represents an HTML <img> element 2 ways to access an image using getElementById(): Images collection document.images returns an array 2 ways to create an image element var x = document.createElement("IMG"); var myImage = new Image();

Image object properties border - The width of the border around the image in pixels height - The read only height of the image in pixels hspace - The read only amount of horizontal space to the left and right sides of the image id - The assigned id of the image lowsrc - The read or write string giving the URL of an alternate image for low resolution screen display name - The assigned name of the image src - The URL of the image to be displayed. It is a read/write string vspace - The read only vertical space above and below the image width - The read only width of the image in pixels

Swapping images <img src=“dog.jpg” height=“100” width=“100” id=“pet”/> To change the image using javascript, document.getElementById(“pet”).src = “images/cat.gif”; To change the image using jQuery (“#pet”).attr(‘src’, ‘images/cat.gif’); A third way, using both: var newImg = new Image(); newImg.src=“images/cat.gif”; var pet = $(‘#pet’); pet.attr(‘src’, newImg.src); pet.attr(‘height’, newImg.height); pet.attr(‘width’, newImg.width);

Object Models

Javascript Object Model JavaScript implementation is made up of three distinct parts The Javascript Core (based on ECMAScript spec) The Document Object Model (DOM) The Browser Object Model (BOM)

Browser Object Model (BOM) The larger representation of everything provided by the browser Includes the current document, location, history, frames, and any other functionality the browser may expose to JavaScript Not standardized - can change based on different browsers Most important task is managing browser windows and enabling communication between the windows

Browser Object Model Browser object model (BOM) or client-side object model Hierarchy of objects Each provides programmatic access To a different aspect of the web browser window or the web page Window object Represents a Web browser window Called the global object Because all other BOM objects contained within it

Browser Object Model (cont’d.) Window object and Document object

Browser Object Model (cont.)

Window Object

the Window Object Window object Includes properties containing information about the web browser window or tab Contains methods to manipulate the web browser window or tab itself

Window Object

Window Object

Window Object

Window Object window.close(); self.close(); self property Refers to the current Window object Identical to using the window property to refer to the Window object Examples: window.close(); self.close(); Web browser assumes reference to global object Good practice Use window or self references When referring to a Window object property or method

Opening and Closing Windows Reasons to open a new Web browser window To launch a new Web page in a separate window To use an additional window to display information When new Web browser window opened: New Window object created Represents the new window Can assign the new window to a variable, or give it a name, to communicate to the new window Know how to open a link in a new window using the a element’s target attribute <a href=http://www.wikipedia.org/ target="wikiWindow"> Wikipedia home page</a>

Opening a Window window.open(url, name, options, replace); Syntax open() method of the Window object Opens new windows Syntax window.open(url, name, options, replace);

Opening a Window Include all (or none) window.open() method arguments Example: window.open("http://www.wikipedia.org");

Opening a Window Customize new browser window or tab appearance Use window.open() method options argument

Opening a Window window.open() name argument specifies window name where the URL should open If name argument is already in use JavaScript changes focus to the existing Web browser window instead of creating a new window window.open(‘wiki.html’,’wikiWindow’,’height=200’) <a href=‘http://www.wikipedia.org/’ target="wikiWindow"> Wikipedia home page</a>

Opening a Window Assign the new Window object created with the window.open() method to a variable to control it focus() method Makes a window the active window newWin.focus(); var newWin=window.open(‘wiki.html’,’wikiWindow’,’height=200’)

Closing a Window close() method window.close() or self.close() Closes a web browser window window.close() or self.close() Closes the current window