<html> <head> <meta charset="utf-8"> <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> <link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/start/jquery-ui.css" rel="stylesheet"/> <script> $(function(){ //$("#NameID").tooltip();//shows only for tet field $(document).tooltip();// for all dom elements having title attribute shows tooltip widget //content option to display tooltip $("#NameID").tooltip({ //content: '<b>Content:</b>this will override the native title' content : getTooltip, // tooltip by calling function track : true, show:{delay:10, duration:500, effect:'explode'}, //millisesc hide: { delay:10, duration:100, effect:'slideDown'} }); }); function getTooltip(){ return 'tooltip from function' } </script> </head> <body> <form> <label title="Name">Name:</label> <input title="Name here" type="text" id="NameID" /> </form> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Droppable - Default functionality</title> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <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> <script> $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); } }); } ); </script> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px solid #dddddd; background: #ffffff; color: #333333; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background: #fffa90; } </style> </head> <body> <div id="draggable"> <p>Drag me to my target</p> </div> <div id="droppable"> <p>Drop here</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI Widget - Default functionality</title> <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $.widget("iP.myButton", { _create: function() { this._button = $("<button>"); this._button.text("My first Widget Button"); this._button.width(this.options.width) this._button.css("background-color", this.options.color); this._button.css("position", "absolute"); this._button.css("left", "100px"); $(this.element).append(this._button); }, move: function(dx) { var x = dx + parseInt(this._button.css("left")); this._button.css("left", x); if(x>400) { this._trigger("outbounds",{}, {position:x}); } } }); $("#button3").myButton(); $("#button3").myButton("move", 200); }); </script> </head> <body> <div id = "button3"></div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Droppable - Default functionality</title> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <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> <script> $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); } }); } ); </script> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px solid #dddddd; background: #ffffff; color: #333333; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background: #fffa90; } </style> </head> <body> <div id="draggable"> <p>Drag me to my target</p> </div> <div id="droppable"> <p>Drop here</p> </div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Droppable - Default functionality</title> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <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> <script> $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); } }); } ); </script> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px solid #dddddd; background: #ffffff; color: #333333; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background: #fffa90; } </style> </head> <body> <div id="draggable"> <p>Drag me to my target</p> </div> <div id="droppable"> <p>Drop here</p> </div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Droppable - Default functionality</title> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } </style> <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> <script> $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); } }); } ); </script> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px solid #dddddd; background: #ffffff; color: #333333; } #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background: #fffa90; } </style> </head> <body> <div id="draggable"> <p>Drag me to my target</p> </div> <div id="droppable"> <p>Drop here</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI Widget - Default functionality</title> <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $.widget("iP.myButton", { _create: function() { this._button = $("<button>"); this._button.text("My first Widget Button"); this._button.width(this.options.width) this._button.css("background-color", this.options.color); this._button.css("position", "absolute"); this._button.css("left", "100px"); $(this.element).append(this._button); }, move: function(dx) { var x = dx + parseInt(this._button.css("left")); this._button.css("left", x); if(x>400) { this._trigger("outbounds",{}, {position:x}); } } }); $("#button4").myButton(); $("#button4").on("mybuttonoutbounds", function(e, ui) { alert("out"); }); $("#button4").myButton("move", 500); }); </script> </head> <body> <div id = "button4"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI Widget - Default functionality</title> <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $.widget("iP.myButton", { _create: function() { this._button = $("<button>"); this._button.text("My first Widget Button"); this._button.width(this.options.width) this._button.css("background-color", this.options.color); this._button.css("position", "absolute"); this._button.css("left", "100px"); $(this.element).append(this._button); }, move: function(dx) { var x = dx + parseInt(this._button.css("left")); this._button.css("left", x); if(x>400) { this._trigger("outbounds",{}, {position:x}); } } }); $("#button3").myButton(); $("#button3").myButton("move", 200); }); </script> </head> <body> <div id = "button3"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI Widget - Default functionality</title> <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $.widget("iP.myButton", { _create: function() { this._button = $("<button>"); this._button.text("My first Widget Button"); this._button.width(this.options.width) this._button.css("background-color", this.options.color); this._button.css("position", "absolute"); this._button.css("left", "100px"); $(this.element).append(this._button); }, _setOption: function(key, value) { switch (key) { case "width": this._button.width(value); break; case "color": this._button.css("background-color",value); break; } }, }); $("#button2").myButton(); $("#button2").myButton("option", {width:100,color:"#cedc98"}); }); </script> </head> <body> <div id = "button2"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI Widget - Default functionality</title> <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $.widget("iP.myButton", { _create: function() { this._button = $("<button>"); this._button.text("My first Widget Button"); this._button.width(this.options.width) this._button.css("background-color", this.options.color); this._button.css("position", "absolute"); this._button.css("left", "100px"); $(this.element).append(this._button); }, }); $("#button1").myButton(); }); </script> </head> <body> <div id = "button1"></div> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more