<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI effect Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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> <!-- CSS --> <style> #box-1 { height: 100px; width: 100px; background: #b9cd6d; } </style> <script> $(document).ready(function() { $('#box-1').click(function() { $( "#box-1" ).effect( "shake", { times: 10, distance: 100 }, 3000, function() { $( this ).css( "background", "#cccccc" ); }); }); }); </script> </head> <body> <div id = "box-1">Click On Me</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI addClass Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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> <style> .elemClass { width: 200px; height: 50px; background-color: #b9cd6d; } .myClass { font-size: 40px; background-color: #ccc; color: white; } </style> <script type = "text/javascript"> $(document).ready(function() { $('#button-1').click(function() { $('#animTarget').animate({ backgroundColor: "black", color: "white" }) }) }); </script> </head> <body> <div id = animTarget class = "elemClass"> Hello! </div> <button id = "button-1">Click Me</button> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI addClass Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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> <!-- CSS --> <style> .red { color: red; } .big { font-size: 5em; } .spaced { padding: 1em; } </style> <script> $(document).ready(function() { $('.button-1').click(function() { $( "#welcome" ).addClass( "red big spaced", 3000 ); }); }); </script> </head> <body> <p id = "welcome">Welcome to Tutorials Point!</p> <button class = "button-1">Click me</button> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>jQuery UI addClass Example</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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> <style> .elemClass { width: 200px; height: 50px; background-color: #b9cd6d; } .myClass { font-size: 40px; background-color: #ccc; color: white; } </style> <script type = "text/javascript"> $(document).ready(function() { $('.button').click(function() { if (this.id == "add") { $('#animTarget').addClass("myClass", "fast") } else { $('#animTarget').removeClass("myClass", "fast") } }) }); </script> </head> <body> <div id = animTarget class = "elemClass"> Hello! </div> <button class = "button" id = "add">Add Class</button> <button class = "button" id = "remove">Remove Class</button> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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> <!-- Javascript --> <script> $(function() { $('.tooltip-9').tooltip({ items: 'a.tooltip-9', content: 'Hello welcome…', show: "slideDown", // show immediately open: function(event, ui) { ui.tooltip.hover( function () { $(this).fadeTo("slow", 0.5); }); } }); }); $(function() { $('.tooltip-10').tooltip({ items: 'a.tooltip-10', content: 'Welcome to TutorialsPoint…', show: "fold", close: function(event, ui) { ui.tooltip.hover(function() { $(this).stop(true).fadeTo(500, 1); }, function() { $(this).fadeOut('500', function() { $(this).remove(); }); }); } }); }); </script> </head> <body style = "padding:100px;"> <!-- HTML --> <div id = "target"> <a href = "#" class = "tooltip-9">Hover over me!</a> <a href = "#" class = "tooltip-10">Hover over me too!</a> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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> <!-- Javascript --> <script> $(function() { $("#tooltip-8").tooltip({ //use 'of' to link the tooltip to your specified input position: { of: '#myInput', my: 'left center', at: 'left center' }, }), $('#myBtn').click(function () { $('#tooltip-8').tooltip("open"); }); }); </script> </head> <body style = "padding:100px;"> <!-- HTML --> <a id = "tooltip-8" title = "Message" href = "#"></a> <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" /> <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" /> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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> <!-- CSS --> <style> body { margin-top: 100px; } .ui-tooltip-content::after, .ui-tooltip-content::before { content: ""; position: absolute; border-style: solid; display: block; left: 90px; } .ui-tooltip-content::before { bottom: -10px; border-color: #AAA transparent; border-width: 10px 10px 0; } .ui-tooltip-content::after { bottom: -7px; border-color: white transparent; border-width: 10px 10px 0; } </style> <!-- Javascript --> <script> $(function() { $( "#tooltip-7" ).tooltip({ position: { my: "center bottom", at: "center top-10", collision: "none" } }); }); </script> </head> <body> <!-- HTML --> <label for = "name">Enter Date of Birth:</label> <input id = "tooltip-7" title = "Please use MM.DD.YY format."> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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> <!-- Javascript --> <script> $(function() { $( "#tooltip-3" ).tooltip({ content: "<strong>Hi!</strong>", track:true }), $( "#tooltip-4" ).tooltip({ disabled: true }); }); </script> </head> <body> <!-- HTML --> <label for = "name">Message:</label> <input id = "tooltip-3" title = "tooltip"><br><br><br> <label for = "name">Tooltip disabled for me:</label> <input id = "tooltip-4" title = "tooltip"> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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> <!-- Javascript --> <script> $(function() { $("#tooltip-1").tooltip(); $("#tooltip-2").tooltip(); }); </script> </head> <body> <!-- HTML --> <label for = "name">Name:</label> <input id = "tooltip-1" title = "Enter You name"> <p><a id = "tooltip-2" href = "#" title = "Nice tooltip"> I also have a tooltip</a></p> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tabs functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <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() { $( "#tabs-21" ).tabs({ activate: function( event, ui ) { var result = $( "#result-2" ).empty(); result.append( "activated" ); }, create: function( event, ui ) { var result = $( "#result-1" ).empty(); result.append( "created" ); } }); }); </script> <style> #tabs-21{font-size: 14px;} .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .resultarea { background: #cedc98; border-top: 1px solid #000000; border-bottom: 1px solid #000000; color: #333333; font-size:14px; } </style> </head> <body> <div id = "tabs-21"> <ul> <li><a href = "#tabs-22">Tab 1</a></li> <li><a href = "#tabs-23">Tab 2</a></li> <li><a href = "#tabs-24">Tab 3</a></li> </ul> <div id = "tabs-22"> <p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </p> </div> <div id = "tabs-23"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div id = "tabs-24"> <p> ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div><br> <span class = "resultarea" id = result-1></span><br> <span class = "resultarea" id = result-2></span> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more