JSFiddle - React, Tailwind, and code Playground
HTML
<div id="parent">
<div id="test"></div>
</div>
CSS
#test
{
background:black;
width:20px;
height:20px;
}
#parent
{
position:relative;
width:100%;
height:100%;
background:#eee;
}
JavaScript
$.widget("ui.staticTest", {
staticVar: 'brownMamba', //this staticVar is an instance variable
_create: function() {
},
//test the static variable
testStatic: function(a) {
if (a) {
/*Here you're actually creating a new static variable called
staticVar which is associated with the staticTest object as you assign value to it. */
//Lemme show you what I mean with an example
//Here it alerts 'Undefined' as 'staticVar' it does not exists
alert("Type of $.ui.staticTest.staticVar before assignment: " + typeof $.ui.staticTest.staticVar);
$.ui.staticTest.staticVar = a;
//At this point it alerts the type of a, which in our case is a 'string'
alert("Type of $.ui.staticTest.staticVar after assignment: " + typeof $.ui.staticTest.staticVar);
//value of instance variable at this point
alert("typeof this.staticVar: " + typeof this.staticVar);
alert("Value of this.staticVar: " + this.staticVar);
//value of global variable at this point
//'Undefined' as it does not exist
alert("Type of staticVar: " + typeof staticVar); //or window.staticVar
} else {
alert("value of staticVar in testStatic with no argument: " + $.ui.staticTest.staticVar);
}
},
//test the instance variable
testInstance: function(a) {
if (a) {
/*Here you're actually working with the instance variable declared above, with the value 'brownMamba' */
//Lemme show you what I mean with an example
//Here it alerts 'string' as 'staticVar' exists and is assigned a string
alert("typeof this.staticVar is " + typeof this.staticVar + " and its value is " + this.staticVar);
//assigning the static variable with a value does not affect the value of the instance variable
...