Semantic UI

자바스크립트가 필요한 컴포넌트의 사용법

수업 

소스코드

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="semantic/semantic.css">
        <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          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>

 

댓글

댓글 본문
  1. Griotold
    드랍다운이 왜 동작을 안하나 끙끙 앓았는데 usage를 건드렸어야 했다는 것을 이 강의보고 알았네요. 정말 고맙습니다. egoing님
  2. 한강
    정말 편리한 기능이네요.
    오늘도 감사합니다~~^^!
    200622
  3. SanFrancisco
    부트스트랩에도 비슷한 기능이 있는지는 모르겠지만, 컴포넌트의 세부 동작 방식을 바꿀 수 있다는 점에서 Semantic UI가 굉장히 좋네요.
  4. 스페이스몽키
    자바스크립트 공부해보고 다시 해봐야 겠네용 감사합니다!
  5. 심화평
    17-06-20 감사합니다
  6. hayasi
    좋네요~~~
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기