Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I change a jQuery UI widget's options after it has been created?

It seems that the usual method of making jQuery widgets is to call a function on an element, passing the options as a parameter, and then not touching the widget directly again. Is there a way to change a widget's options after it has been created?

I want to create a draggable box that is aligned to a grid, but if the user resizes the page, I want to scale the grid. In the window resize event, how can I access the grid property of the draggable element?

$('.box').draggable({grid: [40,40]});
...
$(window).resize(function(){ ??? });
like image 610
davidscolgan Avatar asked Nov 03 '11 15:11

davidscolgan


People also ask

How do you extend widgets?

To allow for extension, $. widget() optionally accepts the constructor of a widget to use as a parent. When specifying a parent widget, pass it as the second argument - after the widget's name, and before the widget's prototype object.

What is a jQuery UI widget?

a jQuery UI widget is a specialized jQuery plug-in. Using plug-in, we can apply behaviours to the elements. However, plug-ins lack some built-in capabilities, such as a way to associate data with its elements, expose methods, merge options with defaults, and control the plug-in's lifetime.

Is jQuery UI still maintained?

The jQuery project is actively maintained and widely implemented — it's used by 73% of 10 million most popular websites. As part of its ongoing effort to modernize the project, jQuery maintainers have taken steps to wind down one of its projects under the jQuery umbrella through a careful transition.

What is jQuery UI custom?

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.


1 Answers

From the Jquery ui documentation:

$( ".selector" ).draggable( "option", "grid", [50, 20] );

So you can do

$( ".box" ).draggable( "option", "grid", [width, height] );
like image 57
Keith.Abramo Avatar answered Nov 01 '22 21:11

Keith.Abramo