Hoàng Web

Thiết kế web giá rẻ

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế website giá rẻ
    • Thiết kế website bán hàng
    • Thiết kế website WordPress
    • Viết Plugin WordPress
    • Sửa lỗi nâng cấp website
    • Quảng cáo Google Ads
    • Phần mềm chặn click ảo
  • Bảng giá
  • Quy trình dịch vụ
  • Giới thiệu
  • Liên Lạc
Trang chủ » Programming » jQuery » Tạo tabs nội dung với jquery – easytabs

Tạo tabs nội dung với jquery – easytabs

Thứ Ba, 09/09/2014 by Hoàng Quách Leave a Comment

  • Facebook
  • Twitter
  • Google+

Phân nội dung vào tabs sử dụng jquery, rất dễ dàng với jquery easytabs. Vậy tại sao chúng ta không dùng jQuery UI tabs? trên thực tế jQuery UI là một thư viện rộng sử dụng các thành phần tính năng thừa nếu bạn chỉ muốn tạo tabs cho website của mình. Và jQuery UI có ít giao diện cho bạn lựa chọn. Hầu hết tabs ui giống như sau:
easytabs jqueryui

Easytabs giúp bạn tùy chỉnh dễ dàng với nhiều giao diện tùy biến thông qua CSS rất tiện lợi. Các Hình ảnh demo của easytabs.
demo 1
easytabs-leadnuke-tabs
demo 2
easytabs-jspkg-tabs
demo 3
easytabs-alfajango-tabs
demo 4
easytabs-os-alfajango-tabs

Những lý do sau bạn nên dùng jquery plugin easytabs này:

  • Lightweight: kích thước .js tối giảm bản minified có 8kb và load nhanh so với jQueryUI core + tabs widget=20kb.
  • Hiệu ứng chuyển giữa các tabs mượt.
  • Cho phép tùy chỉnh giao diện tabs với CSS
  • Thận thiện với cố máy tìm kiếm SEO
  • Hỗ trợ load nội dung bằng Ajax.
  • Có thể tạo nhiều tabs trên cùng một trang.
  • Đây là open source viết bằng jquery

Cài đặt easytabs

Giống với jquery ui tabs, easytabs gồm thẻ markup HTML chứa dữ liệu tabs và phần thiết lập hoạt động tabs bằng hàm javascript của easytabs.
Thêm class active vào tab hiển thị nội dung mặc định trước. Và Các element tag trong tab này cũng nên có tên class="active". Ví dụ:

<ul>
  <li class="active">
    <a href="#tab-1" class="active">Tab 1</a>
  </li><li>
  </li><li>
    <a href="#tab-2">Tab 2</a>
  </li>
</ul>

Nếu không chỉ định tab mặc định thì easytabs lấy tab đầu tiên. Chèn đoạn html cấu tạo tabs sau vào trang web.

<div id="tab-container" class="tab-container">
  <ul class='etabs'>
    <li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
    <li class='tab'><a href="#tabs1-js">Required JS</a></li>
    <li class='tab'><a href="#tabs1-css">Example CSS</a></li>
  </ul>
  <div id="tabs1-html">
    <h2>HTML Markup for these tabs</h2>
    <!-- content -->
  </div>
  <div id="tabs1-js">
    <h2>JS for these tabs</h2>
    <!-- content -->
  </div>
  <div id="tabs1-css">
    <h2>CSS Styles for these tabs</h2>
    <!-- content -->
  </div>
</div>

Liên kết vào nội dung tabs sử dụng liên kết anchor link, tương ứng khớp với thuộc tính id của tag bao nội dung các tabs.
Chú ý: không thay id bằng class. Bắt buộc sử dụng ID selector “#”

Hạn chế click ảo

Công Cụ Chặn Click Ảo Mới - Miễn Phí - Tốc Độ Chặn Nhanh Hơn - Chính Xác Hơn. Miễn Phí VIP 3 Tháng - Được Tin Tưởng Dùng Bởi Hơn 5.000 Khách Hàng. Tự Bạn Quản Lý. Đăng Ký Tự Động. Công Nghệ Mới. Hoạt Động 24/7.

Chèn đoạn CSS trang trí giao diện cho tabs.

.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }

CSS trên sẽ tạo tabs có Giao diện cơ bản thế này.
easytabs-os-alfajango-tabs

Bước quan trọng nhất, bạn thêm các thư viện easytabs vào thẻ head.

<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script>
<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>

Cuối cùng, gọi hàm khởi tạo easytabs.

$(function(){
	$('#tab-container').easytabs();
});

Còn nhiều tính năng, xem chi tiết tại trang chủ: http://os.alfajango.com/easytabs

Tạo tabs nội dung với jquery – easytabs
Đánh giá bài này

Bài viết liên quan:

  1. Sử dụng flexslider gallery trong woothemes
  2. Smooth Page Scroll to Top với jQuery Smooth scroll cho wordpress
  3. Tạo jQuery Slider lặp vô hạn infinite scrolling
  4. Chèn trình soạn thảo bài viết WYSIWYG MCE trong wordpress.
  5. Tạo câu hỏi trắc nghiệm có móc nối liên quan (câu hỏi có quan hệ)
  6. 5 điều lưu ý khi sử dụng jquery trong wordpress
  7. Tạo responsive menu sliding navigation menu với jquery.mmenu từ a-z
  8. Hướng dẫn tạo Responsive Menu cho WordPress Mobile
  9. Syntax highlighting làm đẹp code trong bài viết
  10. Top 10 website dành cho dân lập trình

Chuyên mục: jQuery Tìm kiếm: jQuery, tabs

Đăng ký để không bỏ sót bài viết hay

Bạn phải đăng nhập email để xác nhận việc đăng ký. Vui lòng kiểm tra mục Spam nếu không tìm thấy !

chúng tôi tôn trọng sự riêng tư của bạn và bảo vệ nó một cách nghiêm túc

Lưu ý:
> Không sử dụng từ khóa trong mục "Tên".
> Hãy sử dụng tên thật và địa chỉ email chính xác.
> Vui lòng bình luận bằng tiếng Việt có dấu.
Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Tôi giúp gì cho bạn?

Theo dõi chúng tôi

Bạn phải đăng nhập email để xác nhận việc đăng ký. Vui lòng kiểm tra mục Spam nếu không tìm thấy !

chúng tôi tôn trọng sự riêng tư của bạn và bảo vệ nó một cách nghiêm túc

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2019 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.