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(){ ??? });
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.
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.
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.
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.
From the Jquery ui documentation:
$( ".selector" ).draggable( "option", "grid", [50, 20] );
So you can do
$( ".box" ).draggable( "option", "grid", [width, height] );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With