/ index.html
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 9 <!-- Bootstrap CSS --> 10 <link rel="stylesheet" href="ext/bootstrap.css"> 11 <!--link id="theme" rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css"><!----> 12 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> 13 <title>Theme-crosser</title> 14 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 15 <script src="themecrosser.js"></script> 16 <!--jQuery extention(s) would go here--> 17 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script> 18 <!--jQuery-ui extention(s) would go here--> 19 <script>//logic of page here 20 $(function () { 21 //accordion 22 $( "#accordion" ).accordion(); 23 24 //autocomplete 25 $( "#autocomplete" ).autocomplete({ 26 source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] 27 }); 28 29 //button 30 $( "#button" ).button(); 31 32 33 //checkbox radio 34 $( ".checkboxradio" ).checkboxradio(); 35 36 37 //buttonset 38 $( "#controlgroup" ).buttonset(); 39 40 //datepicker 41 //$( "#datepicker" ).datepicker(); 42 43 //dialog 44 $( "#dialog" ).dialog({ 45 autoOpen: false, 46 buttons: [ 47 { 48 text: "OK", 49 click: function() { 50 $( this ).dialog( "close" ); 51 } 52 } 53 ] 54 }); 55 $( "#dialog-opener" ).button().click(function() { 56 $( "#dialog" ).dialog( "open" ); 57 }); 58 59 //menu 60 $( "#menu" ).menu(); 61 }); 62 </script> 63 </head> 64 <body> 65 <h1><i>Theme Crosser</i></h1> 66 <h2 id="accordion-link"><a href="#accordion">Accordion</a></h2> 67 <div id="accordion"> 68 <h3>Section 1</h3> 69 <div> 70 <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. 71 Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, 72 condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. 73 Nam mi. Proin viverra leo ut odio.</p> 74 </div> 75 <h3>Section 2</h3> 76 <div> 77 <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. 78 Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, 79 faucibus interdum tellus libero ac justo.</p> 80 </div> 81 <h3>Section 3</h3> 82 <div> 83 <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. 84 Quisque lobortis.Phasellus pellentesque purus in massa.</p> 85 <ul> 86 <li>List item one</li> 87 <li>List item two</li> 88 <li>List item three</li> 89 </ul> 90 </div> 91 </div> 92 <br/> 93 <h2 id="autocomplete-link"><a href="#autocomplete">Autocomplete</a></h2> 94 <label for="autocomplete">Select a programming language: </label> 95 <input id="autocomplete"> 96 <h2 id="button-link"><a href="#button">Button</a></h2> 97 <button type="button" id="button">Button label</button> 98 <h2 id="checkboxradio-link"><a href="#radio-1">Checkboxradio</a></h2> 99 <label for="radio-1">New York</label> 100 <input type="radio" name="radio-1" id="radio-1" class="checkboxradio"> 101 <label for="radio-2">Paris</label> 102 <input type="radio" name="radio-1" id="radio-2" class="checkboxradio"> 103 <label for="radio-3">London</label> 104 <input type="radio" name="radio-1" id="radio-3" class="checkboxradio"> 105 <h2 id="controlgroup-link"><a href="#controlgroup">Controlgroup</a></h2> 106 <div id="controlgroup"> 107 <input type="radio" id="sizzle" name="project"> 108 <label for="sizzle">Sizzle</label> 109 <input type="radio" id="qunit" name="project" checked="checked"> 110 <label for="qunit">QUnit</label> 111 <input type="radio" id="color" name="project"> 112 <label for="color">Color</label> 113 </div> 114 <h2 id="datepicker-link"><a href="#datepicker">Datepicker</a></h2> 115 <div id="datepicker"></div> 116 <h2 id="dialog-link"><a href="#dialog">Dialog</a></h2> 117 <button id="dialog-opener">open the dialog</button> 118 <div id="dialog" title="Dialog Title">I'm a dialog</div> 119 <h2 id="menu-link"><a href="#menu">Menu</a></h2> 120 <ul id="menu"> 121 <li> 122 <div>Item 1</div> 123 </li> 124 <li> 125 <div>Item 2</div> 126 </li> 127 <li> 128 <div>Item 3</div> 129 <ul> 130 <li> 131 <div>Item 3-1</div> 132 </li> 133 <li> 134 <div>Item 3-2</div> 135 <ul> 136 <li> 137 <div>Item 3-2-1</div> 138 </li> 139 <li> 140 <div>Item 3-2-2</div> 141 </li> 142 <li> 143 <div>Item 3-2-3</div> 144 </li> 145 </ul> 146 </li> 147 <li> 148 <div>Item 3-3</div> 149 </li> 150 </ul> 151 </li> 152 <li> 153 <div>Item 4</div> 154 </li> 155 <li> 156 <div>Item 5</div> 157 </li> 158 </ul> 159 </body> 160 </html>