JQuery UI Widget Effects Animation Example

11-Apr-2023

.

Admin

JQuery UI Widget Effects Animation Example

Hi Guys,

In this blog, I will show you widget effect animation in jquery ui. Widgets are full-featured UI controls that bring the richness of desktop applications to the Web

Example


<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Widget Example</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>

.custom-colorize {

color:#fff;

font-size: 20px;

position: relative;

width: 75px;

height: 75px;

float:left;

margin-left:5px;

padding:20px;

text-align: center;

}

.custom-colorize-changer {

font-size: 10px;

position: absolute;

right: 0;

bottom: 0;

margin:5px;

font-size:12px;

}

#green{

border:unset;

color:#fff;

background: #000;

padding:6px 8px;

}

#disable{

background: #000;

color:#fff;

border:unset;

padding:6px 8px;

margin-left:-300px;

margin-top:150px;

}

</style>

</head>

<body>

<div>

<div id="my-widget1">color me</div>

<div id="my-widget2">color me</div>

<div id="my-widget3">color me</div>

<button id="disable">Toggle disabled option</button>

<button id="green">Go green</button>

</div>

<script type="text/javascript">

$( function() {

$.widget( "custom.colorize", {

options: {

red: 255,

green: 0,

blue: 0,

change: null,

random: null

},

// The constructor

_create: function() {

this.element

// add a class for theming

.addClass( "custom-colorize" );

this.changer = $( "<button>", {

text: "change",

"class": "custom-colorize-changer"

})

.appendTo( this.element )

.button();

// Bind click events on the changer button to the random method

this._on( this.changer, {

// _on won't call random when widget is disabled

click: "random"

});

this._refresh();

},

// Called when created, and later when changing options

_refresh: function() {

this.element.css( "background-color", "rgb(" +

this.options.red +"," +

this.options.green + "," +

this.options.blue + ")"

);

// Trigger a callback/event

this._trigger( "change" );

},

// A public method to change the color to a random value

// can be called directly via .colorize( "random" )

random: function( event ) {

var colors = {

red: Math.floor( Math.random() * 256 ),

green: Math.floor( Math.random() * 256 ),

blue: Math.floor( Math.random() * 256 )

};

// Trigger an event, check if it's canceled

if ( this._trigger( "random", event, colors ) !== false ) {

this.option( colors );

}

},

// Events bound via _on are removed automatically

// revert other modifications here

_destroy: function() {

// remove generated elements

this.changer.remove();

this.element

.removeClass( "custom-colorize" )

.enableSelection()

.css( "background-color", "transparent" );

},

// _setOptions is called with a hash of all options that are changing

// always refresh when changing options

_setOptions: function() {

// _super and _superApply handle keeping the right this-context

this._superApply( arguments );

this._refresh();

},

// _setOption is called for each individual option that is changing

_setOption: function( key, value ) {

// prevent invalid color values

if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {

return;

}

this._super( key, value );

}

});

// Initialize with default options

$( "#my-widget1" ).colorize();

// Initialize with two customized options

$( "#my-widget2" ).colorize({

red: 60,

blue: 60

});

// Initialize with custom green value

// and a random callback to allow only colors with enough green

$( "#my-widget3" ).colorize( {

green: 128,

random: function( event, ui ) {

return ui.green > 128;

}

});

// Click to toggle enabled/disabled

$( "#disable" ).on( "click", function() {

// use the custom selector created for each widget to find all instances

// all instances are toggled together, so we can check the state from the first

if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {

$( ":custom-colorize" ).colorize( "enable" );

} else {

$( ":custom-colorize" ).colorize( "disable" );

}

});

// Click to set options after initialization

$( "#green" ).on( "click", function() {

$( ":custom-colorize" ).colorize( "option", {

red: 64,

green: 250,

blue: 8

});

});

});

</script>

</body>

</html>

It will help you....

#Jqury UI