jquery ui - Why is $(...).widget undefined? -

according jqueryui widget factory documentation, should possible call method named widget on jquery object manipulate widget. example:

$( ".selector" ).widget({   disabled: true }); 

however, trying call method throws exception, , appears $(...).widget undefined:

$('#btn').button();  $('body').append('<br/><br/>$(\'#btn\').widget ' + $('#btn').widget);  console.log($('#btn').widget);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>    <button id="btn">button</button>

is documentation wrong / out of date, or there else i'm missing here?

the documentation perhaps bit confusing. uses name "widget" placeholder custom widget, in order provide example of options/methods provided default base widget. jqueryui never provides widget explicit name "widget". can use

$.widget("ns.widget", {}); 

to make sample run way is.

also, note due inheritance model, instantiating derived widget on node create data derived widget, not base. can call methods name of instantiated widget:

$.widget("ns.subbutton", $.ui.button, {}); $("#btn").subbutton(); $("#btn").subbutton("widget"); // <- correct use $("#btn").button("widget"); // <- error 

$.widget("my.widget", {});  $('#btn').widget();  $('body').append('<br/><br/>$(\'#btn\').widget ' + $('#btn').widget);  console.log($('#btn').widget);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>    <button id="btn">button</button>