<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI ProgressBar 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: #cedc98; border: 1px solid #DDDDDD; color: #333333; font-weight: bold; } </style> <script> $(function() { $( "#progressbar-1" ).progressbar({ value: 30 }); }); </script> </head> <body> <div id = "progressbar-1"></div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Menu 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-menu { width: 200px; } </style> <!-- Javascript --> <script> $(function() { $( "#menu-5" ).menu({ create: function( event, ui ) { var result = $( "#result" ); result.append( "Create event<br>" ); }, blur: function( event, ui ) { var result = $( "#result" ); result.append( "Blur event<br>" ); }, focus: function( event, ui ) { var result = $( "#result" ); result.append( "focus event<br>" ); } }); }); </script> </head> <body> <!-- HTML --> <ul id = "menu-5"> <li><a href = "#">Spring</a></li> <li><a href = "#">Hibernate</a></li> <li><a href = "#">JSF</a></li> <li><a href = "#">HTML5</a></li> <li><a href = "#">Java</a> <ul> <li><a href = "#">Java IO</a></li> <li><a href = "#">Swing</a></li> <li><a href = "#">Jaspr Reports</a></li> </ul> </li> </ul> <span id = "result"></span> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Menu 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-menu { width: 200px; } </style> <!-- Javascript --> <script> $(function() { var menu = $("#menu-4").menu(); $( "#menu-4" ).menu( "focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" )); $(menu).mouseleave(function () { menu.menu('collapseAll'); }); }); </script> </head> <body> <!-- HTML --> <ul id = "menu-4"> <li><a href = "#">Spring</a></li> <li><a href = "#">Hibernate</a></li> <li><a href = "#">JSF</a></li> <li><a href = "#">HTML5</a></li> <li><a href = "#">Java</a> <ul> <li><a href = "#">Java IO</a></li> <li><a href = "#">Swing</a></li> <li><a href = "#">Jaspr Reports</a></li> </ul> </li> </ul> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Menu 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-menu { width: 200px; } </style> <!-- Javascript --> <script> $(function() { $( "#menu-3" ).menu(); $( "#menu-3" ).menu("disable"); }); </script> </head> <body> <!-- HTML --> <ul id = "menu-3"> <li><a href = "#">Spring</a></li> <li><a href = "#">Hibernate</a></li> <li><a href = "#">Java</a> <ul> <li><a href = "#">Java IO</a></li> <li><a href = "#">Swing</a></li> <li><a href = "#">Jaspr Reports</a></li> </ul> </li> <li><a href = "#">JSF</a></li> <li><a href = "#">HTML5</a></li> </ul> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Menu 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-menu { width: 200px; } </style> <!-- Javascript --> <script> $(function() { $( "#menu-2" ).menu({ icons: { submenu: "ui-icon-circle-triangle-e"}, position: { my: "right top", at: "right-10 top+5" } }); }); </script> </head> <body> <!-- HTML --> <ul id = "menu-2"> <li><a href = "#">Spring</a></li> <li><a href = "#">Hibernate</a></li> <li><a href = "#">Java</a> <ul> <li><a href = "#">Java IO</a></li> <li><a href = "#">Swing</a></li> <li><a href = "#">Jaspr Reports</a></li> </ul> </li> <li><a href = "#">JSF</a></li> <li><a href = "#">HTML5</a></li> </ul> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Menu 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-menu { width: 200px; } </style> <!-- Javascript --> <script> $(function() { $( "#menu-1" ).menu(); }); </script> </head> <body> <!-- HTML --> <ul id = "menu-1"> <li><a href = "#">Spring</a></li> <li><a href = "#">Hibernate</a></li> <li><a href = "#">Java</a> <ul> <li><a href = "#">Java IO</a></li> <li><a href = "#">Swing</a></li> <li><a href = "#">Jaspr Reports</a></li> </ul> </li> <li><a href = "#">JSF</a></li> <li><a href = "#">HTML5</a></li> </ul> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Dialog 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,.ui-state-default, ui-button { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } </style> <!-- Javascript --> <script type = "text/javascript"> $(function() { $( "#dialog-7" ).dialog({ autoOpen: false, resize: function( event, ui ) { $( this ).dialog( "option", "title", ui.size.height + " x " + ui.size.width ); } }); $( "#opener-6" ).click(function() { $( "#dialog-7" ).dialog( "open" ); }); }); </script> </head> <body> <div id = "dialog-7" title = "Dialog Title goes here..." >Resize this dialog to see the dialog co-ordinates in the title!</div> <button id = "opener-6">Open Dialog</button> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Dialog 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,.ui-state-default, ui-button { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } .invalid { color: red; } textarea { display: inline-block; width: 100%; margin-bottom: 10px; } </style> <!-- Javascript --> <script type = "text/javascript"> $(function() { $( "#dialog-6" ).dialog({ autoOpen: false, buttons: { OK: function() { $( this ).dialog( "close" ); } }, beforeClose: function( event, ui ) { if ( !$( "#terms" ).prop( "checked" ) ) { event.preventDefault(); $( "[for = terms]" ).addClass( "invalid" ); } }, width: 600 }); $( "#opener-5" ).click(function() { $( "#dialog-6" ).dialog( "open" ); }); }); </script> </head> <body> <div id = "dialog-6"> <p>You must accept these terms before continuing.</p> <textarea>This Agreement and the Request constitute the entire agreement of the parties with respect to the subject matter of the Request. This Agreement shall be governed by and construed in accordance with the laws of the State, without giving effect to principles of conflicts of law.</textarea> <div> <label for = "terms">I accept the terms</label> <input type = "checkbox" id = "terms"> </div> </div> <button id = "opener-5">Open Dialog</button> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Dialog 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,.ui-state-default, ui-button { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } </style> <!-- Javascript --> <script type = "text/javascript"> $(function() { $("#toggle").click(function() { ($("#dialog-5").dialog("isOpen") == false) ? $( "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ; }); $("#dialog-5").dialog({autoOpen: false}); }); </script> </head> <body> <button id = "toggle">Toggle dialog!</button> <div id = "dialog-5" title = "Dialog Title!"> Click on the Toggle button to open and close this dialog box. </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Dialog 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,.ui-state-default, ui-button { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } </style> <!-- Javascript --> <script> $(function() { $( "#dialog-4" ).dialog({ autoOpen: false, modal: true, buttons: { OK: function() {$(this).dialog("close");} }, }); $( "#opener-4" ).click(function() { $( "#dialog-4" ).dialog( "open" ); }); }); </script> </head> <body> <!-- HTML --> <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div> <button id = "opener-4">Open Dialog</button> <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> <label for = "textbox">Enter Name: </label> <input type = "text"> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more