04/10/2018, 20:17

Tùy chỉnh nâng cao select box với plugin Selectem

Hôm nay mình sẽ giới thiệu cho các bạn một jQuery plugin rất hữu ích giúp các bạn có thể tùy chỉnh thanh tùy chọn select dropdown. Với plugin này, các bạn sẽ có thể áp dụng được nhiều vào các web app hoặc trên các website hay blog của các bạn. Xem Demo | Download Cách sử dụng Chèn 2 ...

Hôm nay mình sẽ giới thiệu cho các bạn một jQuery plugin rất hữu ích giúp các bạn có thể tùy chỉnh thanh tùy chọn select dropdown. Với plugin này, các bạn sẽ có thể áp dụng được nhiều vào các web app hoặc trên các website hay blog của các bạn.

Tùy chỉnh nâng cao select box với plugin Selectem

Xem Demo | Download

Cách sử dụng

Chèn 2 file selectem.min.jsselectem.min.css vào , các bạn có thể tải các file này tại mục donwload.

<link rel="stylesheet" href="path-to/assets/css/selectem.min.css">
<script src="path-to/assets/css/selectem.min.js"></script>

HTML markup

Để tạo hiệu ứng, chúng ta cũng cần có khung chuẩn html như sau :

<div class="container">
  
  <div class="col-sm-6 centered">
  <div class="selectem">
    <span class="selectem_label">Choose animal</span>
    <div class="selectem_dropdown">
      <input class="selectem-value" name="selectemVal" type="hidden">
      <input class="selectem-input" name="filter" type="text" autocomplete="off" data-filter placeholder="Filter: meow, dog, woof, quack...">
      <ul class="selectem-items">
        <li data-val="Bat">
          <div class="item-avatar">
            <img src="https://db.tt/IB2N14c3" alt="Bat" />
          </div>
          <div>
            <span class="item-label">Bat</span>
            <span class="pull-right">
              <span class="label label-default">bat</span>
              <span class="label label-default">screech</span>
            </span>
          </div>
        </li>
        <li data-val="Cat">
          <div class="item-avatar">
            <img src="https://db.tt/CTycxuUG" alt="Cat" />
          </div>
          <div>
            <span class="item-label">Kitty</span>
            <span class="pull-right">
              <span class="label label-default">cat</span>
              <span class="label label-default">kitty</span>
              <span class="label label-default">meow</span>
            </span>
          </div>
        </li>
        <li data-val="Dog">
          <div class="item-avatar">
            <img src="https://db.tt/rWSRSqXo" alt="White dog" />
          </div>
          <div>
            <span class="item-label">White dog</span>
            <span class="pull-right">
              <span class="label label-default">dog</span>
              <span class="label label-default">white</span>
              <span class="label label-default">woof</span>
            </span>
          </div>
        </li>
        <li data-val="Dog">
          <div class="item-avatar">
            <img src="https://db.tt/2389rFnM" alt="Cute dog" />
          </div>
          <div>
            <span class="item-label">Cute dog</span>
            <span class="pull-right">
              <span class="label label-default">dog</span>
              <span class="label label-default">cute</span>
              <span class="label label-default">woof</span>
            </span>
          </div>
        </li>
        <li data-val="Duck">
          <div class="item-avatar">
            <img src="https://db.tt/U6xqgPcl" alt="Ducky" />
          </div>
          <div>
            <span class="item-label">Ducky</span>
            <span class="pull-right">
              <span class="label label-default">duck</span>
              <span class="label label-default">ducky</span>
              <span class="label label-default">quack</span>
            </span>
          </div>
        </li>
        <li data-val="Forg">
          <div class="item-avatar">
            <img src="https://db.tt/APzg1U0X" alt="Forg" />
          </div>
          <div>
            <span class="item-label">Frog</span>
            <div class="pull-right">
              <span class="label label-default">frog</span>
              <span class="label label-default">croak</span>
              <span class="label label-default">ribbit</span>
            </div>
          </span>
        </li>
        <li data-val="Rat">
          <div class="item-avatar">
            <img src="https://db.tt/R5q3oW1z" alt="Rat" />
          </div>
          <div>
            <span class="item-label">Rat</span>
            <span class="pull-right">
              <span class="label label-default">rat</span>
              <span class="label label-default">squeak</span>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
    </div>
  </div>
</div>

Để có thể lấy được giá trị từ danh sách , các bạn dùng như sau :

var selectemVal = document.querySelector('input[name="selectemVal"]');
console.log (selectemVal); // returns the selected data-val attribute from the selectem-items list

Các bạn có thể tìm hiểu chi tiết hơn ở phần demo hoặc download toàn bộ mã nguồn về máy của mình.

Chúc các bạn thành công !

Tags: Dropdown Box jQuery Plugins Select Box

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster

Bài liên quan

Tùy chỉnh nâng cao select box với plugin Selectem

Hôm nay mình sẽ giới thiệu cho các bạn một jQuery plugin rất hữu ích giúp các bạn có thể tùy chỉnh thanh tùy chọn select dropdown. Với plugin này, các bạn sẽ có thể áp dụng được nhiều vào các web app hoặc trên các website hay blog của các bạn. Xem Demo | Download Cách sử dụng Chèn 2 ...

Tạ Quốc Bảo viết 20:17 ngày 04/10/2018

Tạo Select Box với bộ lọc tìm kiếm bằng jQuery

Hẳn là các bạn đã quá quen thuộc với những danh sách xổ xuống (select box) thường thấy ở trên các website cho phép chúng ta lựa chọn các giá trị khác nhau. Nếu các bạn mới tập làm quen với việc thiết kế web, thì hôm nay mình xin chỉ cho các bạn một chiêu mới trong việc liệt kê danh sách, đó là thêm ...

Vũ Văn Thanh viết 20:15 ngày 04/10/2018

Custom select box với JQuery Select2

Mình cũng không giới thiệu quá nhiều về JQuery Select2.js nữa vì nó cũng khá nổi tiếng rồi. Trong bài viết này mình muốn chia sẻ với các bạn một số highlight tip mà mình đã ngộ ra trong quá trình làm việc với JQ.Select2.js mà thôi. Có thể nói tính đến thời điểm hiện tại thì mình thấy JQuery ...

Bùi Văn Nam viết 16:47 ngày 01/10/2018

Công nghệ Blockchain giúp nâng cao hiệu năng của ngành tài chính, kế toán

Sự xuất hiện và phát triển của blockchain được dự đoán sẽ có những tác động trực tiếp đến ngành nghề kiểm toán, kế toán, làm giảm số lượng kiểm toán viên ở các doanh nghiệp, tổ chức khi áp dụng những tiến bộ của khoa học công nghệ. Nhìn nhận về vấn đề này, ông David Lyford-Smith – chuyên gia công ...

Trịnh Tiến Mạnh viết 17:06 ngày 12/08/2018

12 ứng dụng giúp nâng cao hiệu quả công việc đối với user sử dụng Window 10

Ngày nay, hệ điều hành Windows đang cung cấp cho người dùng rất nhiều ứng dụng đa dạng mà miễn phí. Tuy nhiên do có quá nhiều ứng dụng nên nó khiến cho người dùng như lạc vào ma trận không biết nên dùng ứng dụng nào thì có hiệu quả cao. Chính vì vậy, bài viết này sẽ giới thiệu cho mọi người cũng ...

Hoàng Hải Đăng viết 16:28 ngày 12/08/2018
0