수업
소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <!doctype html><html> <head> <link rel="stylesheet" type="text/css" href="semantic/semantic.css"> <script integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="semantic/semantic.js"></script> <style> body{padding:1rem;} </style> </head> <body> <h1>Dropdown</h1> <div class="ui dropdown"> <div class="text">File</div> <i class="dropdown icon"></i> <div class="menu"> <div class="item">New</div> <div class="item"> <span class="description">ctrl + o</span> Open... </div> <div class="item"> <span class="description">ctrl + s</span> Save as... </div> <div class="item"> <span class="description">ctrl + r</span> Rename </div> <div class="item">Make a copy</div> <div class="item"> <i class="folder icon"></i> Move to folder </div> <div class="item"> <i class="trash icon"></i> Move to trash </div> <div class="divider"></div> <div class="item">Download As...</div> <div class="item"> <i class="dropdown icon"></i> Publish To Web <div class="menu"> <div class="item">Google Docs</div> <div class="item">Google Drive</div> <div class="item">Dropbox</div> <div class="item">Adobe Creative Cloud</div> <div class="item">Private FTP</div> <div class="item">Another Service...</div> </div> </div> <div class="item">E-mail Collaborators</div> </div> </div> <h1>Accordion</h1> <div id="target" class="ui styled accordion"> <div class="title active"> <i class="dropdown icon"></i> What is a dog? </div> <div class="content active"> <p class="transition visible" style="display: block !important;">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p> </div> <div class="title"> <i class="dropdown icon"></i> What kinds of dogs are there? </div> <div class="content"> <p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p> </div> <div class="title"> <i class="dropdown icon"></i> How do you acquire a dog? </div> <div class="content"> <p class="transition hidden">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p> <p class="transition hidden">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p> </div> </div> <script> $('.ui.dropdown').dropdown({ direction:'auto', duration:100, onChange:function(value, text, $choice){ } }); $('#target').accordion({exclusive:false}); </script> </body></html> |
