<!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() { $( "#autocomplete-5" ).autocomplete({ source: "/jqueryui/search.php", minLength: 2 }); }); </script> </head> <body> <input id = "autocomplete-5"> </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() { $( "#autocomplete-4" ).autocomplete({ source: [ { label: "India", value: "IND" }, { label: "Australia", value: "AUS" } ] }); }); </script> </head> <body> <!-- HTML --> <div class = "ui-widget"> <p>Type I OR A</p> <input id = "autocomplete-4"> </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> <!-- Javascript --> <script> $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", "Ecommerce", "Jquery", "Groovy", "Java", "JavaScript", "Lua", "Perl", "Ruby", "Scala", "Swing", "XHTML" ]; $( "#automplete-3" ).autocomplete({ minLength:2, delay:500, source: availableTutorials }); }); </script> </head> <body> <!-- HTML --> <div class = "ui-widget"> <p>Type two letter for e.g:ja,sc etc</p> <label for = "automplete-3">Tags: </label> <input id = "automplete-3"> </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> <!-- Javascript --> <script> $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-2" ).autocomplete({ source: availableTutorials, autoFocus:true }); }); </script> </head> <body> <!-- HTML --> <div class = "ui-widget"> <p>Type "a" or "s"</p> <label for = "automplete-2">Tags: </label> <input id = "automplete-2"> </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> <!-- Javascript --> <script> $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-1" ).autocomplete({ source: availableTutorials }); }); </script> </head> <body> <!-- HTML --> <div class = "ui-widget"> <p>Type "a" or "s"</p> <label for = "automplete-1">Tags: </label> <input id = "automplete-1"> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Accordion 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> <script> $(function() { $( "#accordion-6" ).accordion({ create: function (event, ui) { $("span#result").html ($("span#result").html () + "<b>Created</b><br>"); }, beforeActivate : function (event, ui) { $("span#result").html ($("span#result").html () + ", <b>beforeActivate</b><br>"); }, activate: function (event, ui) { $("span#result").html ($("span#result").html () + "<b>activate</b><br>"); } }); }); </script> <style> #accordion-6{font-size: 14px;} </style> </head> <body> <div id = "accordion-6"> <h3>Tab 1</h3> <div> <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> <h3>Tab 2</h3> <div> <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> <h3>Tab 3</h3> <div> <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> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <hr /> <span id = result></span> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Accordion 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> <script> $(function() { $( "#accordion-5" ).accordion({ disabled: false }); $("input").each(function () { $(this).change(function () { if ($(this).attr("id") == "disableaccordion") { $("#accordion-5").accordion("option", "disabled", true); } else { $("#accordion-5").accordion("option", "disabled", false); } }); }); }); </script> <style> #accordion-5{font-size: 14px;} </style> </head> <body> <div id = "accordion-5"> <h3>Tab 1</h3> <div> <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> <h3>Tab 2</h3> <div> <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> <h3>Tab 3</h3> <div> <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> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <div style = "margin-top:30px"> <input type = "radio" name = "disable" id = "disableaccordion" value = "disable">Disable accordion <input type = "radio" name = "disable" id = "enableaccordion" checked value = "enable">Enable accordion </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Accordion 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> <script> $(function() { $( "#accordion-3" ).accordion({ heightStyle: "content" }); $( "#accordion-4" ).accordion({ heightStyle: "fill" }); }); </script> <style> #accordion-3, #accordion-4{font-size: 14px;} </style> </head> <body> <h3>Height style-content</h3> <div style = "height:250px"> <div id = "accordion-3"> <h3>Tab 1</h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>List item four</li> <li>List item five</li> </ul> </div> <h3>Tab 2</h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <h3>Tab 3</h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div><br><br> <h3>Height style-Fill</h3> <div style = "height:250px"> <div id = "accordion-4"> <h3>Tab 1</h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>List item four</li> <li>List item five</li> </ul> </div> <h3>Tab 2</h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <h3>Tab 3</h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Accordion 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> <script> $(function() { $( "#accordion-2" ).accordion({ collapsible: true }); }); </script> <style> #accordion-2{font-size: 14px;} </style> </head> <body> <div id = "accordion-2"> <h3>Tab 1</h3> <div> <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> <h3>Tab 2</h3> <div> <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> <h3>Tab 3</h3> <div> <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> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Accordion 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> <script> $(function() { $( "#accordion-1" ).accordion(); }); </script> <style> #accordion-1{font-size: 14px;} </style> </head> <body> <div id = "accordion-1"> <h3>Tab 1</h3> <div> <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> <h3>Tab 2</h3> <div> <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> <h3>Tab 3</h3> <div> <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> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more