w3.css

필터

약간의 JavaScript를 사용하면 W3.CSS의 모든 구성 요소를 필터링할 수 있다.

테이블 필터링

  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()">

  <table class="w3-table-all w3-margin-top" id="myTable">
    <tr>
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbkop</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Koniglich Essen</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td>North/South</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Paris specialites</td>
      <td>France</td>
    </tr>
  </table>

필터 목록

예제

<div class="w3-container">
  <h2>Filter List</h2>
  <p>Search for a name in the input field.</p>

  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()">
  <ul class="w3-ul w3-margin-top" id="myUL">
    <li>Adele</li>
    <li>Agnes</li>
    <li>Billy</li>
    <li>Bob</li>
    <li>Calvin</li>
    <li>Christina</li>
    <li>Cindy</li>
  </ul>
</div>

필터 드롭다운

호버 예제

<div class="w3-container">
  <h2>Filter Dropdown Hover</h2>
  <p>Mouse-over the dropdown and search for a specific link inside the input field.</p>
  <div class="w3-dropdown-hover">
    <button class="w3-button w3-black">Dropdown</button>
    <div class="w3-dropdown-content w3-bar-block w3-card w3-light-grey" id="myDIV">
      <input class="w3-input w3-padding" type="text" placeholder="Search.." id="myInput" onkeyup="myFunction()">
      <a class="w3-bar-item w3-button" href="#about">About</a>
      <a class="w3-bar-item w3-button" href="#base">Base</a>
      <a class="w3-bar-item w3-button" href="#blog">Blog</a>
      <a class="w3-bar-item w3-button" href="#contact">Contact</a>
      <a class="w3-bar-item w3-button" href="#custom">Custom</a>
      <a class="w3-bar-item w3-button" href="#support">Support</a>
      <a class="w3-bar-item w3-button" href="#tools">Tools</a>
    </div>
  </div>
</div>

클릭 예제

<div class="w3-container">
  <h2>Filter Dropdown Click</h2>
  <p>Click on the dropdown and search for a specific link inside the input field.</p>

  <div class="w3-dropdown-click">
    <button class="w3-button w3-black" onclick="dropFunction()">Dropdown</button>
    <div class="w3-dropdown-content w3-bar-block w3-card w3-light-grey" id="myDIV">
      <input class="w3-input w3-padding" type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
      <a class="w3-bar-item w3-button" href="#about">About</a>
      <a class="w3-bar-item w3-button" href="#base">Base</a>
      <a class="w3-bar-item w3-button" href="#blog">Blog</a>
      <a class="w3-bar-item w3-button" href="#contact">Contact</a>
      <a class="w3-bar-item w3-button" href="#custom">Custom</a>
      <a class="w3-bar-item w3-button" href="#support">Support</a>
      <a class="w3-bar-item w3-button" href="#tools">Tools</a>
    </div>
  </div>
</div>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기