<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Datepicker 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() { $( "#datepicker-5" ).datepicker({ beforeShowDay : function (date) { var dayOfWeek = date.getDay (); // 0 : Sunday, 1 : Monday, ... if (dayOfWeek == 0 || dayOfWeek == 6) return [false]; else return [true]; } }); }); </script> </head> <body> <!-- HTML --> <p>Enter Date: <input type = "text" id = "datepicker-5"></p> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Datepicker 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() { $( "#datepicker-3" ).datepicker({ appendText:"(yy-mm-dd)", dateFormat:"yy-mm-dd", altField: "#datepicker-4", altFormat: "DD, d MM, yy" }); }); </script> </head> <body> <!-- HTML --> <p>Enter Date: <input type = "text" id = "datepicker-3"></p> <p>Alternate Date: <input type = "text" id = "datepicker-4"></p> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Datepicker 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() { $( "#datepicker-2" ).datepicker(); }); </script> </head> <body> <!-- HTML --> Enter Date: <div id = "datepicker-2"></div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Datepicker 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() { $( "#datepicker-1" ).datepicker(); }); </script> </head> <body> <!-- HTML --> <p>Enter Date: <input type = "text" id = "datepicker-1"></p> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Buttons 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> .resultarea { background: #cedc98; border-top: 1px solid #000000; border-bottom: 1px solid #000000; color: #333333; font-size:14px; } </style> <script> $(function() { $( "#button-12" ).button({ create: function() { $("p#result").html ($("p#result") .html () + "<b>created</b><br>"); } }); }); </script> </head> <body> <button id = "button-12"> A button element </button> <p class = "resultarea" id = result></p> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Buttons 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() { $( "#button-9" ).button({ text: false, icons: { primary: "ui-icon-seek-start" } }); $( "#button-9" ).button('destroy'); $( "#button-10" ).button({ icons: { primary: "ui-icon-seek-prev" } }); $( "#button-10" ).button('disable'); $( "#button-11" ).button({ text: false, icons: { primary: "ui-icon-play" } }); }); </script> </head> <body> <button id = "button-9"> I'm destroyed </button> <button id = "button-10"> I'm disabled </button> <button id = "button-11"> play </button> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Buttons 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() { $( "#button-6" ).button({ icons: { primary: "ui-icon-locked" }, text: false }); $( "#button-7" ).button({ disabled:true }); $( "#button-8" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }); }); </script> </head> <body> <button id = "button-6"> Button with icon only </button> <button id = "button-7"> Button Disabled </button> <button id = "button-8"> Button with two icons </button> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Buttons 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() { $( "#button-1, #button-2, #button-3, #button-4" ).button(); $( "#button-5" ).buttonset(); }); </script> </head> <body> <button id = "button-1">A button element</button> <input id = "button-2" type = "submit" value = "A submit button"> <a id = "button-3" href = "">An anchor</a> <input type = "checkbox" id = "button-4" > <label for = "button-4">Toggle</label> <br><br> <div id = "button-5"> <input type = "checkbox" id = "check1"> <label for = "check1">Left</label> <input type = "checkbox" id = "check2"> <label for = "check2">Middle</label> <input type = "checkbox" id = "check3"> <label for = "check3">Right</label> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Autocomplete 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> #project-label { display: block; font-weight: bold; margin-bottom: 1em; } #project-icon { float: left; height: 32px; width: 32px; } #project-description { margin: 0; padding: 0; } </style> <!-- Javascript --> <script> $(function() { var projects = [ { value: "java", label: "Java", desc: "write once run anywhere", }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", }, { value: "Bootstrap", label: "Twitter Bootstrap", desc: "popular front end frameworks ", } ]; $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc ); return false; } }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; }); </script> </head> <body> <div id = "project-label">Select a project (type "a" for a start):</div> <input id = "project"> <input type = "hidden" id = "project-id"> <p id = "project-description"></p> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Autocomplete 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() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", "Ecommerce", "Jquery", "Groovy", "Java", "JavaScript", "Lua", "Perl", "Ruby", "Scala", "Swing", "XHTML" ]; $( "#automplete-6" ).autocomplete({ source: availableTutorials }); $( "#automplete-6" ).autocomplete("option", "position", { my : "right-10 top+10", at: "right top" }) }); </script> </head> <body> <!-- HTML --> <div class = "ui-widget"> <p>Type "a" or "s"</p> <label for = "automplete-6">Tags: </label> <input id = "automplete-6"> </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