jQuery UI options versus methods

Question

What is the semantic difference between jQuery UI widget options and methods?

Initialize slider widget with options object defining the value option.

$('#mySlider').slider({ value: 10});

Get value option.

var optValue = $('#mySlider').slider('option', 'value');

Get value.

var methodValue = $('#mySlider').slider('value');

Is it possible that optValue and methodValue can be different?

Answer 1

The short answer is, there is no semantic difference. option merely calls the underlying get/set.

On widget methods: When you call $(element).widget("someMethod", parameters) what happens is (for the purposes of the question) a call to widgetPrototype.someMethod(parameters).

widget.("option", property) is a special case of widget method. As a getter, it goes straight to the underlying options object, but as a setter calls the widget._setOptions() function. From the documentation:

option( options )

Returns: jQuery (plugin only)

Sets one or more options for the widget.

options Type: Object A map of option-value pairs to set.

Here's a breakdown of what happens:

$('#mySlider').slider({ value: 10});
// call the slider widget's initialiser with parameter {value:10}

var optValue = $('#mySlider').slider('option', 'value');
// call the slider widget's .option() method with parameter value

var methodValue = $('#mySlider').slider('value');
// calls the slider widget's .value() method.
//
// EDIT: Yes, this CAN be different from .option(value)
// It falls on the implementer to document their widget well
// enough that users know what's going on
//
// Having said that, I have yet to see a popular jquery widget
// where .someWidgetOption() is not just a shortcut to .option("someWidgetOption")

The documentation is remarkably good: http://api.jqueryui.com/jQuery.widget/