What is jquery user interface. Installing the jQuery UI library

That's all! You can then use the jQuery UI features on your page. For example, using one line of javascript code to make a regular element draggable:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(font:9pt Arial,sans-serif;) p(color:#888; margin:8px 0 12px 0) #draggable(width:125px; height:125px; padding:0.5em; border:1px solid #ddd; background-color:#eee) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div id="draggable"~gt~ ~lt~p ~gt~Dragable element~lt~/p~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#draggable").draggable(); // this line of code that makes the element draggable ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

All behavior and widget plugins operate in a similar way. Each jQuery UI plugin is represented by one main method that is called on the selected elements. Its name always matches the name of the plugin. Using this method, you can instantiate (install) a plugin on elements, find out and change plugin properties, install event handlers, and also run plugin functions, which are usually called methods (although they are not methods in the usual sense of this concept).

To install any plugin on page elements, just select the necessary elements using jQuery and then call the plugin method on them (the name of which always matches the name of the plugin):

Typically, a method of an object in javascript means a function called on this object as follows:

obj.A();

// call method A on object obj obj.B () ;

// call method B on object obj

However, within the framework of working with specific jQuery UI plugins, methods are called this form of recording:

For example:

// make a dialog box from the element with id=someId using // the dialog plugin and specify a title for the window $("#someId" ) .dialog (( title: "Message" ) ) ;

// make the first div on the page a calendar using // the datepicker plugin, and specify the minimum and maximum date $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1) , maxDate: new Date(2013, 1 - 1, 1) ) ;

In addition, the value of any property can be found out or changed after the plugin has been instantiated. To do this you need to use the "option" method:

// change the title by adding the prefix "#1 " $("#someId" ) .dialog ("option" , "title" , "#1 " + dialogTitle) // change the minimum date in the calendar // which is installed to the first div on the page $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector" ) .dialog (( close : function (event, ui) ( ... ) ) ) ;

Creating your own plugins

In addition to organizing many convenient and intuitive plugins, jQuery UI provides a means by which you can make similar plugins yourself - the UI Widget Factory. One of its big advantages is that it organizes some OOP capabilities that allow you to modify existing widgets and create your own widget hierarchies.

What do we need to know about widgets and plugins? The first is what they are, and the second is how they work. I will try to dwell on these two points.

• Interactivity
• I'll start with useful plugins that can make life easier when creating interactive interfaces:
• Draggable – this component allows you to make any DOM element draggable with the mouse
• Droppable is a logical extension of the Draggable component; necessary for working with containers into which you can drag and drop elements
• Resizable – as the name suggests, allows you to resize any DOM elements

Widgets are already a comprehensive solution containing not only JavaScript code, but also some implementation of HTML and CSS:

All widgets and plugins are tied to the jQuery UI core, but there are also dependencies between the plugins themselves and it’s worth keeping them in mind. But don't worry - when building a jQuery UI package, all dependencies are checked automatically, i.e. when you need a previously unconnected widget, it is better to download the assembly again.

We don’t have many utilities - here is a useful Position plugin that allows you to control the position of DOM elements - http://jqueryui.com/position/, and there is also a factory for creating widgets, but I’ll tell you about it a little later.

Among the effects jQuery UI provides, I highlight four points:

• Color Animation
• Class change animation
• Effects set
• Expanding easing capabilities

The “Effects Core” component is responsible for color animation, which allows you to animate color changes using the “.animate()” function:

$("#my" ).animate(( backgroundColor: "black" ), 1000 );

Yes, yes, basic jQuery cannot do this, but jQuery UI allows you to animate the following parameters:

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• color
• outlineColor

Another feature contained in “Effects Core” is the animation of changes in the class of a DOM element, i.e. when you assign a new class to an element, instead of the usual instant application of new CSS properties, you will see an animation of these properties from the current ones to those specified in the assigned class. To use this functionality, we will need old friends - the “.addClass()”, “.toggleClass()” and “.removeClass()” methods, with only one difference - when calling the method, the animation speed must be specified as the second parameter:

$("#my" ).addClass("active" , 1000 ); $("#my" ).toggleClass("active" , 1000 ); $("#my" ).removeClass("active" , 1000 );

If from the previous paragraph you do not have an understanding of what is happening, then this code is for you:

There is also a “.switchClass()” method that replaces one class with another, but I have never found it useful.

I won’t talk long about the set of effects; it’s better to see them in action on the page http://jqueryui.com/effect/. To work with effects, the “.effect()” method appears, but it is better not to use it by itself, because the UI has expanded the functionality of the built-in methods “.show()”, “.hide()” and “.toggle()”. Now, by passing the name of the effect as the animation speed parameter, you will get the desired result:

$("#my" ).hide("puff" ); $("#my" ).show("transfer" ); $("#my" ).toggle("explode" );

I’ll give a list of effects, maybe someone will remember: blind, bounce, clip, drop, explode, fold, highlight, puff, pulsate, scale, shake, size, slide, transfer.

If at any point in time you need to make changes to the theme, open the file “jquery-ui-#.#.##-custom.css” and find the line starting with the text “To view and modify this theme, visit http:.. ." Follow the link provided and use ThemeRoller to make the necessary changes.

The starting point for you when writing a widget for jQuery UI will be the official documentation, but since not everyone has good knowledge of English, I will try to translate and adapt the information presented in it.

The first thing worth talking about is that the rules for writing plugins for jQuery are too imposing, which does not contribute to their quality. When creating jQuery UI, we decided to go by standardizing the process of writing plugins and widgets. I can’t say how successful the idea was, but it was clearly better than it was. I'll start by describing the framework for your widget:

$.widget("book.expose" , ( // default settings options: ( color: "red" ), // widget initialization // make changes to the DOM and attach handlers _create: function () ( this .element; / / searched object in jQuery wrapper this .name; // name - expose this .namespace; // space - book this .element.on("click." +this .eventNamespace, function () ( console .log("click " ); )); ), // the method is responsible for applying the settings _setOption: function ( key, value ) ( // apply changes to the settings this ._super("_setOption" , key, value); ), // the _destroy method should be the opposite of _create // it should remove all changes made to the DOM and remove all handlers, if any, _destroy: function () ( this .element.off("." +this .eventNamespace); ) ));

Let me explain for those who haven't read the comments:

options – storage of widget settings for a specific element

Create() – is responsible for initializing the widget – here changes should occur in the DOM and event handlers should be “hung”

Destroy() is the antipode to “_create()” - it should clean up everything that we have littered

SetOption(key, value) – this method will be called when trying to change any settings:

$("#my" ).expose((key:value))

An observant eye will notice that all of the listed methods begin with an underscore - this is a way to highlight “private” methods that are not available for execution. If we try to run "$("#my").expose("_destroy")", we will get an error. But keep in mind - this is just an agreement, keep it!

To bypass the privacy agreement, you can use the “data()” method:

In this example, I tried to set a good tone for writing widgets - I “hung” event handlers in the namespace. This will give you the opportunity to control what is happening in the future without having to go into the widget code. "True story".

The code described in the “_destroy()” method is redundant, because it is already executed in the public “destroy()”. Presented here for clarity.

And for the lazy, in order not to write “eventNamespace” in event handlers every time, the developers added two methods in version 1.9.0: “_on()” and “_off()”. The first one takes two parameters:

• DOM element or selector or jQuery object
• a set of event handlers as an object

All listed events will “hang” in the “eventNamespace” space, i.e. the result will presumably be the same:

The second method, "_off()", allows you to selectively disable handlers:

Well, the frame is a longboat, it’s time to move on to functionality. Let's add an arbitrary function with arbitrary functionality:

CallMe:function () ( console .log("Hello?" ); )

We can easily access this function both from other widget methods and from outside:

If your function takes parameters, then they are passed in the following way:

$("#my" ).expose("callMe" , "Hello!" )

If you want to reach a widget method in the event handler, then do not forget about the variable scope and do the following maneuver:

( _create: function () ( var self = this ; // here it is! this .element.on("click." +this .eventNamespace, function () ( // use self here, because this already points to // element on which we click self.callMe(); )) ) )

Okay, let's go, now let's talk about the events. For more flexible development and implementation of widgets, functionality is provided for creating arbitrary events and “listening” to them:

There is a lot of material, I understand, but I will also add a description of several methods that can be called from the widget itself:

Delay() – this function works like “setTimeout()”, only the context of the passed function will point to the widget itself (this is so as not to bother with the scope)

Hoverable() and _focusable() – these methods need to be fed elements for which it is necessary to listen for the “hover” and “focus” events in order to automatically add the “ui-state-hover” and “ui-state-focus” classes to them when they occur these

Hide() and _show() – these two methods appeared in version 1.9.0, they were created to standardize the behavior of widgets when using animation methods; Settings are usually hidden in options under the “hide” and “show” keys, respectively. The methods should be used as follows:

( options: ( hide: ( effect: "slideDown" , // settings are equivalent to calling duration: 500 // .slideDown(500) ) ) ) // calls to _hide() and _show() should be used inside the widget this ._hide(this .element, this .options.hide, function () ( // this is our callback function console .log("hidden" ); ));

There are a couple more methods that were implemented before us:

( enable: function () ( return this ._setOption("disabled" , false ); ), disable: function () ( return this ._setOption("disabled" , true ); ) )

In fact, these functions create a synonym to call:

$("#my" ).expose(( "disabled" : true )) // or false

Our task is simply to track this flag in the “_setOption()” method.