JqueryUI - Tab

Tab là một tập hợp các nội dung được nhóm lại một cách hợp lý cho phép chúng ta lướt nhanh giữa chúng. Các tab cho phép chúng ta tiết kiệm không gian như đàn accordion. Để các tab hoạt động bình thường sau bộ đánh dấu cần sử dụng:

  • Các tab phải nằm trong danh sách có thứ tự (<ol>) hoặc không có thứ tự (<ul>).

  • Mỗi tiêu đề tab phải nằm trong mỗi <li> và được bao bọc bởi thẻ liên kết (<a>) với thuộc tính href .

  • Mỗi bảng tab có thể là bất kỳ phần tử hợp lệ nào nhưng nó phải có một id , tương ứng với mã băm trong ký tự liên kết của tab được liên kết.

jQueryUI cung cấp cho chúng ta phương thức tabs () thay đổi đáng kể sự xuất hiện của các phần tử HTML bên trong trang. Phương thức này duyệt qua mã HTML (nội bộ trong giao diện người dùng jQuery) và thêm các lớp CSS mới vào các phần tử liên quan (ở đây là các tab) để tạo cho chúng kiểu dáng phù hợp.

Cú pháp

Các tabs () phương pháp có thể được sử dụng ở hai dạng:

  • $ (bộ chọn, ngữ cảnh) .tabs (tùy chọn) Phương thức

  • $ (selector, context) .tabs ("action", params) Phương thức

$ (bộ chọn, ngữ cảnh) .tabs (tùy chọn) Phương thức

Phương thức tab (tùy chọn) khai báo rằng một phần tử HTML và nội dung của nó phải được quản lý dưới dạng tab. Các tùy chọn tham số là một đối tượng mà xác định sự xuất hiện và hành vi của các tab.

Cú pháp

$(selector, context).tabs (options);

Bạn có thể cung cấp một hoặc nhiều tùy chọn cùng một lúc bằng cách sử dụng đối tượng JavaScript. Nếu có nhiều tùy chọn được cung cấp thì bạn sẽ phân tách chúng bằng dấu phẩy như sau:

$(selector, context).tabs({option1: value1, option2: value2..... });

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Tùy chọn & Mô tả
1 hoạt động

Tùy chọn này chỉ định tab / bảng hoạt động hiện tại. Theo mặc định, giá trị của nó là0.

Option - active

Tùy chọn này chỉ định tab / bảng hoạt động hiện tại. Theo mặc định, giá trị của nó là0.

Điều này có thể thuộc loại -

  • Boolean- Khi đặt thành false , sẽ thu gọn tất cả các bảng. Điều này yêu cầu tùy chọn thu gọn phải đúng .

  • Integer -

    Chỉ mục dựa trên 0 của bảng đang hoạt động (mở). Giá trị âm sẽ chọn các bảng đi lùi từ bảng cuối cùng.

Syntax

$( ".selector" ).tabs (
   { active: 1 }
);
2 có thể thu gọn

Tùy chọn này được đặt thành true , nó cho phép bỏ chọn các tab. Khi được đặt thành false (mặc định), việc nhấp vào tab đã chọn sẽ không bỏ chọn (tab vẫn được chọn). Theo mặc định, giá trị của nó làfalse.

Option - collapsible

Tùy chọn này được đặt thành true , nó cho phép bỏ chọn các tab. Khi được đặt thành false (mặc định), việc nhấp vào tab đã chọn sẽ không bỏ chọn (tab vẫn được chọn). Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).tabs (
   { collapsible: true }
);
3 tàn tật

Tùy chọn này sử dụng một mảng để chỉ ra các tab chỉ mục bị vô hiệu hóa (và do đó không thể được chọn). Ví dụ: sử dụng [0, 1] để tắt hai tab đầu tiên. Theo mặc định, giá trị của nó làfalse.

Option - disabled

Tùy chọn này sử dụng một mảng để chỉ ra các tab chỉ mục bị vô hiệu hóa (và do đó không thể được chọn). Ví dụ: sử dụng [0, 1] để tắt hai tab đầu tiên. Theo mặc định, giá trị của nó làfalse.

Điều này có thể thuộc loại -

  • Boolean - Bật hoặc tắt tất cả các tab.

  • Array - Một mảng chứa các chỉ mục dựa trên 0 của các tab cần bị vô hiệu hóa, ví dụ: [0, 2] sẽ vô hiệu hóa tab đầu tiên và tab thứ ba.

Syntax

$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);
4 biến cố

Tùy chọn này là tên của sự kiện cho phép người dùng chọn một tab mới. Ví dụ: nếu tùy chọn này được đặt thành "di chuột qua", di chuột qua tab sẽ chọn nó. Theo mặc định, giá trị của nó là"click".

Option - event

Tùy chọn này là tên của sự kiện cho phép người dùng chọn một tab mới. Ví dụ: nếu tùy chọn này được đặt thành "di chuột qua", di chuột qua tab sẽ chọn nó. Theo mặc định, giá trị của nó là"click".

Syntax

$( ".selector" ).tabs (
   { event: "mouseover" }
);
5 chiều cao

Tùy chọn này kiểm soát chiều cao của tiện ích tab và mỗi bảng điều khiển. Theo mặc định, giá trị của nó là"content".

Option - heightStyle

Tùy chọn này kiểm soát chiều cao của tiện ích tab và mỗi bảng điều khiển. Theo mặc định, giá trị của nó là"content".

Giá trị có thể là -

  • auto - Tất cả các bảng sẽ được đặt bằng chiều cao của bảng cao nhất.

  • fill - Mở rộng đến chiều cao có sẵn dựa trên chiều cao mẹ của tab.

  • content - Mỗi bảng điều khiển sẽ chỉ cao bằng nội dung của nó.

Syntax

$( ".selector" ).tabs (
   { heightStyle: "fill" }
);
6 ẩn giấu

Tùy chọn này chỉ định cách tạo hiệu ứng ẩn của bảng điều khiển. Theo mặc định, giá trị của nó lànull.

Option - hide

Tùy chọn này chỉ định cách tạo hiệu ứng ẩn của bảng điều khiển. Theo mặc định, giá trị của nó lànull.

Điều này có thể thuộc loại -

  • Boolean- Khi được đặt thành false , sẽ không có hoạt ảnh nào được sử dụng và bảng điều khiển sẽ bị ẩn ngay lập tức.

  • Number - Bảng điều khiển sẽ mờ dần theo thời lượng đã chỉ định và độ giãn mặc định.

  • String- Bảng điều khiển sẽ bị ẩn khi sử dụng hiệu ứng được chỉ định. Giá trị có thể là slideUp hoặc fold

  • Object- Đối với loại này, tính hiệu quả , chậm trễ , thời gian và nới lỏng có thể được cung cấp.

Syntax

$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);
7 chỉ

Tùy chọn này chỉ định cách tạo hiệu ứng hiển thị bảng điều khiển. Theo mặc định, giá trị của nó lànull.

Option - show

Tùy chọn này chỉ định cách tạo hiệu ứng hiển thị bảng điều khiển. Theo mặc định, giá trị của nó lànull.

Điều này có thể thuộc loại -

  • Boolean- Khi được đặt thành false , không có hoạt ảnh nào được sử dụng và bảng điều khiển sẽ được hiển thị ngay lập tức.

  • Number - Bảng điều khiển sẽ mờ dần theo thời lượng đã chỉ định và độ giãn mặc định.

  • String- Bảng điều khiển sẽ được hiển thị bằng cách sử dụng hiệu ứng được chỉ định. Giá trị có thể là slideUp hoặc gấp .

  • Object- Đối với loại này, tính hiệu quả , chậm trễ , thời gian và nới lỏng có thể được cung cấp.

Syntax

$( ".selector" ).tabs (
   { show: { effect: "blind", duration: 800 } }
);

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động về chức năng của tab.

Chức năng mặc định

Ví dụ sau minh họa một ví dụ đơn giản về chức năng của tab, không chuyển tham số nào cho tabs() phương pháp.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
         " rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
		
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-1">
         <ul>
            <li><a href = "#tabs-2">Tab 1</a></li>
            <li><a href = "#tabs-3">Tab 2</a></li>
            <li><a href = "#tabs-4">Tab 3</a></li>
         </ul>
         <div id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit 
               amet, consectetur, adipisci velit... 
            </p>
         </div>
         <div id = "tabs-3">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML tabsexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, nhấp vào các tab để hoán đổi giữa các nội dung.

Sử dụng chiều cao Kiểu dáng, có thể thu gọn và ẩn

Ví dụ sau minh họa việc sử dụng ba tùy chọn (a) heightStyle (b) collapsiblevà (c) hide trong chức năng tab của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
		
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-5">
         <ul>
            <li><a href = "#tabs-6">Tab 1</a></li>
            <li><a href = "#tabs-7">Tab 2</a></li>
            <li><a href = "#tabs-8">Tab 3</a></li>
         </ul>
         <div id = "tabs-6">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-8">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML tabsexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Nhấp vào tab đã chọn để đóng / mở nội dung của nó. Bạn cũng có thể thấy hiệu ứng hoạt ảnh "slideUp" khi đóng tab.

Sử dụng sự kiện

Ví dụ sau minh họa việc sử dụng ba tùy chọn event trong chức năng tab của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel="stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
		
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-9">
         <ul>
            <li><a href = "#tabs-10">Tab 1</a></li>
            <li><a href = "#tabs-11">Tab 2</a></li>
            <li><a href = "#tabs-12">Tab 3</a></li>
         </ul> 
         <div id = "tabs-10">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit... </p>
         </div>
         <div id = "tabs-11">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-12">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML tabsexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, chuyển đổi các phần mở / đóng bằng cách di chuột qua các tab.

$ (selector, context) .tabs ("action", params) Phương thức

Phương thức tab ("action", params) cho phép thực hiện một hành động trên các tab (thông qua một chương trình JavaScript), chọn, vô hiệu hóa, thêm hoặc xóa một tab. Hành động được chỉ định dưới dạng một chuỗi trong đối số đầu tiên (ví dụ: "thêm" để thêm tab mới). Kiểm tra các hành động có thể được thông qua, trong bảng sau.

Cú pháp

$(selector, context).tabs ("action", params);;

Bảng sau liệt kê các hành động khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Mô tả hành động
1 hủy hoại

Hành động này sẽ phá hủy hoàn toàn chức năng tab của một phần tử. Các phần tử trở về trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - destroy

Hành động này sẽ phá hủy hoàn toàn chức năng tab của một phần tử. Các phần tử trở về trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).tabs("destroy");
2 vô hiệu hóa

Hành động này vô hiệu hóa tất cả các tab. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - disable

Hành động này vô hiệu hóa tất cả các tab. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).tabs("disable");
3 vô hiệu hóa (chỉ mục)

Hành động này vô hiệu hóa tab được chỉ định. Trong đó chỉ mục là tab bị vô hiệu hóa.

Action - disable( index )

Hành động này vô hiệu hóa tab được chỉ định. Trong đó chỉ mục là tab bị vô hiệu hóa. Để tắt nhiều tab cùng một lúc, hãy đặt tùy chọn đã tắt: $ ("#tabs") .tabs ("option", "vô hiệu", [1, 2, 3]).

Syntax

$( ".selector" ).tabs( "disable", 1 );
4 kích hoạt

Hành động này sẽ kích hoạt tất cả các tab. Chữ ký này không chấp nhận bất kỳ đối số nào.

Action - enable

Hành động này sẽ kích hoạt tất cả các tab. Chữ ký này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).tabs("enable");
5 kích hoạt (chỉ mục)

Hành động này kích hoạt một tab được chỉ định. Trong đó chỉ mục là tab được bật.

Action - enable( index )

Hành động này kích hoạt một tab được chỉ định. Trong đó chỉ mục là tab được bật. Để bật nhiều tab cùng một lúc, hãy đặt lại thuộc tính bị vô hiệu hóa như: $ ("#example") .tabs ("option", "đã tắt", []) ;.

Syntax

$( ".selector" ).tabs( "enable", 1 );
6 chỉ số tải )

Hành động này buộc tải lại tab đã lập chỉ mục, bỏ qua bộ nhớ cache. Trong đó chỉ mục là tab để tải.

Action - load( index )

Hành động này buộc tải lại tab đã lập chỉ mục, bỏ qua bộ nhớ cache. Trong đó chỉ mục là tab để tải.

Syntax

$( ".selector" ).tabs("load", 1);
7 option (optionName)

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định .

Action - option( optionName )

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định .

Syntax

var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
số 8 Lựa chọn

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn tab hiện tại.

Action - option

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn tab hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).tabs("option");
9 option (optionName, value)

Hành động này đặt giá trị của tùy chọn tab được liên kết với optionName được chỉ định . Đối số optionName là tên của tùy chọn được đặt và giá trị là giá trị được đặt cho tùy chọn.

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn tab được liên kết với optionName được chỉ định . Đối số optionName là tên của tùy chọn được đặt và giá trị là giá trị được đặt cho tùy chọn.

Syntax

$( ".selector" ).tabs( "option", "disabled", true );
10 option (tùy chọn)

Hành động này đặt một hoặc nhiều tùy chọn cho các tab.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho các tab.

Syntax

$( ".selector" ).tabs( "option", { disabled: true } );
11 Làm tươi

Hành động này tính toán lại chiều cao của bảng tab khi bất kỳ tab nào được thêm vào hoặc xóa trực tiếp trong DOM. Kết quả phụ thuộc vào nội dung và tùy chọn heightStyle .

Action - refresh

Hành động này tính toán lại chiều cao của bảng tab khi bất kỳ tab nào được thêm vào hoặc xóa trực tiếp trong DOM. Kết quả phụ thuộc vào nội dung và tùy chọn heightStyle .

Syntax

$( ".selector" ).tabs( "refresh" );
12 phụ tùng

Hành động này trả về phần tử đóng vai trò là tiện ích con tab, được chú thích bằng tên lớp ui-tab .

Action - widget

Hành động này trả về phần tử đóng vai trò là tiện ích con tab, được chú thích bằng tên lớp ui-tab .

Syntax

var widget = $( ".selector" ).tabs( "widget" );

Sử dụng hành động Tắt ()

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng phương thức disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
		
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-13">
         <ul>
            <li><a href = "#tabs-14">Tab 1</a></li>
            <li><a href = "#tabs-15">Tab 2</a></li>
            <li><a href = "#tabs-16">Tab 3</a></li>
         </ul>
         <div id = "tabs-14">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-15">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-16">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML tabsexample.htm và mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Tại đây bạn có thể thấy tất cả các tab đã bị vô hiệu hóa.

Sử dụng Hành động Tắt (chỉ mục)

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng phương thức vô hiệu hóa (chỉ mục) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-17" ).tabs();
            $( "#tabs-17" ).tabs("disable",2);
         });
      </script>
		
      <style>
         #tabs-17{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-17">
         <ul>
            <li><a href = "#tabs-18">Tab 1</a></li>
            <li><a href = "#tabs-19">Tab 2</a></li>
            <li><a href = "#tabs-20">Tab 3</a></li>
         </ul>
         <div id = "tabs-18">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-19">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-20">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML tabsexample.htm và mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau:

Trong ví dụ trên, bạn nhận thấy rằng Tab 3 bị tắt.

Quản lý sự kiện trên các phần tử tab

Ngoài phương thức tab (tùy chọn) mà chúng ta đã thấy trong các phần trước, JqueryUI cung cấp các phương thức sự kiện được kích hoạt cho một sự kiện cụ thể. Các phương thức sự kiện này được liệt kê bên dưới -

Sr.No. Phương pháp & Mô tả Sự kiện
1 kích hoạt (sự kiện, ui)

Sự kiện này được kích hoạt sau khi tab đã được kích hoạt (sau khi hoàn thành hoạt ảnh).

Event - activate(event, ui)

Sự kiện này được kích hoạt sau khi tab đã được kích hoạt (sau khi hoàn thành hoạt ảnh). Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • newTab - Tab vừa được kích hoạt.

  • oldTab - Tab vừa bị vô hiệu hóa.

  • newPanel - Bảng điều khiển vừa được kích hoạt.

  • oldPanel - Bảng điều khiển vừa bị hủy kích hoạt.

Syntax

$( ".selector" ).slider({
   activate: function( event, ui ) {}
});
2 beforeActivate (sự kiện, ui)

Sự kiện này được kích hoạt trước khi một tab được kích hoạt.

Event - beforeActivate(event, ui)

Sự kiện này được kích hoạt trước khi một tab được kích hoạt. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • newTab - Tab sắp được kích hoạt.

  • oldTab - Tab sắp ngừng hoạt động.

  • newPanel - Bảng điều khiển sắp được kích hoạt.

  • oldPanel - Bảng điều khiển sắp ngừng hoạt động.

Syntax

$( ".selector" ).slider({
   beforeActivate: function( event, ui ) {}
});
3 beforeLoad (sự kiện, ui)

Sự kiện này được kích hoạt khi một tab từ xa sắp được tải, sau sự kiện beforeActivate . Sự kiện này được kích hoạt ngay trước khi yêu cầu Ajax được thực hiện.

Event - beforeLoad(event, ui)

Sự kiện này được kích hoạt khi một tab từ xa sắp được tải, sau sự kiện beforeActivate . Sự kiện này được kích hoạt ngay trước khi yêu cầu Ajax được thực hiện. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • tab - Tab đang được tải.

  • panel - Bảng sẽ được điền bởi phản hồi Ajax.

  • jqXHR- Đối tượng jqXHR đang yêu cầu nội dung.

  • ajaxSettings- Các cài đặt sẽ được jQuery.ajax sử dụng để yêu cầu nội dung.

Syntax

$( ".selector" ).slider({
   beforeLoad: function( event, ui ) {}
});
4 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi các tab được tạo.

Event - create(event, ui)

Sự kiện này được kích hoạt khi các tab được tạo. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • tab - Các tab đang hoạt động.

  • panel - Bảng hoạt động.

Syntax

$( ".selector" ).slider({
   create: function( event, ui ) {}
});
5 tải (sự kiện, ui)

Sự kiện này được kích hoạt sau khi một tab từ xa đã được tải.

Event - load(event, ui)

Sự kiện này được kích hoạt sau khi một tab từ xa đã được tải. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • tab - Tab vừa được tải.

  • panel - Bảng điều khiển vừa được điền bởi phản hồi Ajax.

Syntax

$( ".selector" ).slider({
   load: function( event, ui ) {}
});

Thí dụ

Ví dụ sau minh họa việc sử dụng phương thức sự kiện trong các tiện ích con tab. Ví dụ này minh họa việc sử dụng các sự kiện kích hoạt và tạo .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-21" ).tabs({
               activate: function( event, ui ) {
                  var result = $( "#result-2" ).empty();
                  result.append( "activated" );
               },
               create: function( event, ui ) {
                  var result = $( "#result-1" ).empty();
                  result.append( "created" );
               }
            });
         });
      </script>
		
      <style>
         #tabs-21{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-21">
         <ul>
            <li><a href = "#tabs-22">Tab 1</a></li>
            <li><a href = "#tabs-23">Tab 2</a></li>
            <li><a href = "#tabs-24">Tab 3</a></li>
         </ul>
         <div id = "tabs-22">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-23">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>   
         </div>
         <div id = "tabs-24">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
               enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div><br>
      
      <span class = "resultarea" id = result-1></span><br>
      <span class = "resultarea" id = result-2></span>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML tabsexample.htm và mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau:

Nhấp vào các tab để xem thông báo được in bên dưới về các sự kiện cụ thể.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved