<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI selectable-1</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> #selectable-1 .ui-selecting { background: #707070 ; } #selectable-1 .ui-selected { background: #EEEEEE; color: #000000; } #selectable-1 { list-style-type: none; margin: 0; padding: 0; width: 20%; } #selectable-1 li { margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } </style> <script> $(function() { $( "#selectable-1" ).selectable(); }); </script> </head> <body> <ol id = "selectable-1"> <li class = "ui-widget-content">Product 1</li> <li class = "ui-widget-content">Product 2</li> <li class = "ui-widget-content">Product 3</li> <li class = "ui-widget-content">Product 4</li> <li class = "ui-widget-content">Product 5</li> <li class = "ui-widget-content">Product 6</li> <li class = "ui-widget-content">Product 7</li> </ol> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable 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> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #resizable-14{ width: 150px; height: 150px; padding: 0.5em;text-align: center; margin: 0; } </style> <!-- Javascript --> <script> $(function() { $( "#resizable-14" ).resizable({ create: function( event, ui ) { $("#resizable-15").text ("I'm Created!!"); }, resize: function (event, ui) { $("#resizable-16").text ("top = " + ui.position.top + ", left = " + ui.position.left + ", width = " + ui.size.width + ", height = " + ui.size.height); } }); }); </script> </head> <body> <!-- HTML --> <div id = "resizable-14" class = "ui-widget-content"> <h3 class = "ui-widget-header">Resize !!</h3> </div><br> <span id = "resizable-15"></span><br> <span id = "resizable-16"></span> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable 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> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #resizable-12,#resizable-13 { width: 150px; height: 150px; padding: 0.5em;text-align: center; margin: 0; } </style> <!-- Javascript --> <script> $(function() { $( "#resizable-12" ).resizable(); $( "#resizable-12" ).resizable('disable'); $( "#resizable-13" ).resizable(); $( "#resizable-13" ).resizable('destroy'); }); </script> </head> <body> <!-- HTML --> <div id = "resizable-12" class = "ui-widget-content"> <h3 class = "ui-widget-header">I'm disable!!</h3> </div><br> <div id = "resizable-13" class = "ui-widget-content"> <h3 class = "ui-widget-header">I'm Destroyed!!</h3> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable 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> <style> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } .square { width: 150px; height: 150px; border: 1px solid black; text-align: center; float: left; margin-left: 20px; margin-right: 20px; } </style> <script> $(function() { $( "#resizable-10" ).resizable({ aspectRatio: 10 / 3 }); $( "#resizable-11" ).resizable({ grid: [50,20] }); }); </script> </head> <body> <div id = "resizable-10" class = "square ui-widget-content"> <h3 class = "ui-widget-header"> Resize with aspectRatio of 10/3 </h3> </div> <div id = "resizable-11" class = "square ui-widget-content"> <h3 class = "ui-widget-header"> Snap me to the grid of [50,20] </h3> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable 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> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #resizable-8,#resizable-9{ width: 150px; height: 150px; padding: 0.5em;text-align: center; margin: 0; } </style> <!-- Javascript --> <script> $(function() { $( "#resizable-8" ).resizable({ alsoResize: "#resizable-9" }); $( "#resizable-9" ).resizable(); }); </script> </head> <body> <!-- HTML --> <div id = "resizable-8" class = "ui-widget-content"> <h3 class = "ui-widget-header">Resize!!</h3> </div><br> <div id = "resizable-9" class = "ui-widget-content"> <h3 class = "ui-widget-header">I also get resized!!</h3> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable 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> <style> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } .square { width: 150px; height: 150px; border: 1px solid black; text-align: center; float: left; margin-left: 20px; -right: 20px; } </style> <script> $(function() { $( "#resizable-5" ).resizable({ delay: 1000 }); $( "#resizable-6" ).resizable({ distance: 40 }); $( "#resizable-7" ).resizable({ autoHide: true }); }); </script> </head> <body> <div id = "resizable-5" class = "square ui-widget-content"> <h3 class = "ui-widget-header"> Resize starts after delay of 1000ms </h3> </div><br> <div id = "resizable-6" class = "square ui-widget-content"> <h3 class = "ui-widget-header"> Resize starts at distance of 40px </h3> </div><br> <div id = "resizable-7" class = "square ui-widget-content"> <h3 class = "ui-widget-header"> Hover over me to see the magnification icon! </h3> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable 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> <style> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #container-1 { width: 300px; height: 300px; } #resizable-4 {background-position: top left; width: 150px; height: 150px; } #resizable-4, #container { padding: 0.5em; } </style> <script> $(function() { $( "#resizable-4" ).resizable({ containment: "#container", minHeight: 70, minWidth: 100 }); }); </script> </head> <body> <div id = "container" class = "ui-widget-content"> <div id = "resizable-4" class = "ui-state-active"> <h3 class = "ui-widget-header"> Resize contained to this container </h3> </div> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable 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> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #resizable-2,#resizable-3 { width: 150px; height: 150px; padding: 0.5em; text-align: center; margin: 0; } </style> <!-- Javascript --> <script> $(function() { $( "#resizable-2" ).resizable({ animate: true }); $( "#resizable-3" ).resizable({ ghost: true }); }); </script> </head> <body> <!-- HTML --> <div id = "resizable-2" class = "ui-widget-content"> <h3 class = "ui-widget-header"> Pull my edges and Check the animation!! </h3> </div><br> <div id = "resizable-3" class = "ui-widget-content"> <h3 class = "ui-widget-header">I'm ghost!!</h3> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable 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> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; } #resizable { width: 150px; height: 150px; padding: 0.5em; text-align: center; margin: 0; } </style> <!-- Javascript --> <script> $(function() { $( "#resizable" ).resizable(); }); </script> </head> <body> <!-- HTML --> <div id = "resizable" class = "ui-widget-content"> <h3 class = "ui-widget-header">Pull my edges to resize me!!</h3> </div> </body> </html>
<!DOCTYPE html> <html> <head> <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> #draggable { width: 150px; height: 150px; padding: 0.5em; background:#eee;} </style> <script> $(function() { $( "#draggable" ).draggable(); }); </script> </head> <body> <div id = "draggable" class = "ui-widget-content"> <p>Drag me !!!</p> </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