JqueryUI - Chú giải công cụ

Tiện ích chú giải công cụ của jQueryUI thay thế chú giải công cụ gốc. Tiện ích này thêm các chủ đề mới và cho phép tùy chỉnh. Đầu tiên chúng ta hãy hiểu chú giải công cụ là gì? Chú giải công cụ có thể được đính kèm vào bất kỳ phần tử nào. Để hiển thị chú giải công cụ, chỉ cần thêm thuộc tính tiêu đề vào các phần tử đầu vào và giá trị thuộc tính tiêu đề sẽ được sử dụng làm chú giải công cụ. Khi bạn di chuột đến phần tử, thuộc tính title được hiển thị trong một hộp nhỏ bên cạnh phần tử.

jQueryUI cung cấp tooltip()để thêm chú giải công cụ vào bất kỳ phần tử nào mà bạn muốn hiển thị chú giải công cụ. Điều này cung cấp hoạt ảnh mờ dần theo mặc định để hiển thị và ẩn chú giải công cụ, so với chỉ chuyển đổi chế độ hiển thị.

Cú pháp

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

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

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

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

Phương thức chú giải công cụ (tùy chọn) khai báo rằng chú giải công cụ có thể được thêm vào một phần tử HTML. Các tùy chọn tham số là một đối tượng mà quy định cụ thể các hành vi và sự xuất hiện của các tooltip.

Cú pháp

$(selector, context).tooltip(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).tooltip({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 Nội dung

Tùy chọn này thể hiện nội dung của chú giải công cụ. Theo mặc định, giá trị của nó làfunction returning the title attribute.

Option - content

Tùy chọn này thể hiện nội dung của chú giải công cụ. Theo mặc định, giá trị của nó làfunction returning the title attribute. Điều này có thể thuộc loại -

  • Function- Lệnh gọi lại có thể trả về nội dung trực tiếp hoặc gọi đối số đầu tiên, truyền vào nội dung, ví dụ. cho nội dung ajax.

  • String - Một chuỗi HTML để sử dụng cho nội dung chú giải công cụ.

Syntax

$(".selector").tooltip(
   { content: "Some content!" }
);
2 tàn tật

Tùy chọn này khi được đặt thành true sẽ vô hiệu hóa chú giải công cụ. Theo mặc định, giá trị của nó làfalse.

Option - disabled

Tùy chọn này khi được đặt thành true sẽ vô hiệu hóa chú giải công cụ. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").tooltip(
   { disabled: true }
);
3 ẩn giấu

Tùy chọn này thể hiện hiệu ứng hoạt ảnh khi ẩn chú giải công cụ. Theo mặc định, giá trị của nó làtrue.

Option - hide

Tùy chọn này thể hiện hiệu ứng hoạt ảnh khi ẩn chú giải công cụ. Theo mặc định, giá trị của nó làtrue. Điều này có thể thuộc loại -

  • Boolean- Điều này có thể đúng hoặc sai . Khi được đặt thành true , chú giải công cụ sẽ mờ dần với thời lượng mặc định và tốc độ mặc định.

  • Number - Chú giải công cụ sẽ mờ dần theo thời lượng được chỉ định và tốc độ mặc định.

  • String- Chú giải công cụ sẽ được ẩn bằng cách sử dụng hiệu ứng được chỉ định như "slideUp", "gấp" .

  • Object- Các giá trị có thể là hiệu ứng, độ trễ, thời lượng và tốc độ giảm .

Syntax

$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);
4 mặt hàng

Tùy chọn này cho biết mục nào có thể hiển thị chú giải công cụ. Theo mặc định, giá trị của nó là[title].

Option - items

Tùy chọn này cho biết mục nào có thể hiển thị chú giải công cụ. Theo mặc định, giá trị của nó là[title].

Syntax

$(".selector").tooltip(
   { items: "img[alt]" }
);
5 Chức vụ

Tùy chọn này quyết định vị trí của chú giải công cụ trong phần tử mục tiêu được liên kết. Theo mặc định, giá trị của nó làfunction returning the title attribute. Các giá trị có thể có là: của tôi, tại, của, va chạm, sử dụng, bên trong.

Option - position

Tùy chọn này quyết định vị trí của chú giải công cụ trong phần tử mục tiêu được liên kết. Theo mặc định, giá trị của nó làfunction returning the title attribute. Các giá trị có thể có là: của tôi, tại, của, va chạm, sử dụng, bên trong.

Syntax

$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);
6 chỉ

Tùy chọn này đại diện cho cách tạo hoạt ảnh hiển thị chú giải công cụ. Theo mặc định, giá trị của nó làtrue.

Option - show

Tùy chọn này đại diện cho cách tạo hoạt ảnh hiển thị chú giải công cụ. Theo mặc định, giá trị của nó làtrue. Điều này có thể thuộc loại -

  • Boolean- Điều này có thể đúng hoặc sai . Khi được đặt thành true , chú giải công cụ sẽ mờ dần với thời lượng mặc định và tốc độ mặc định.

  • Number - Chú giải công cụ sẽ mờ dần theo thời lượng được chỉ định và tốc độ mặc định.

  • String- Chú giải công cụ sẽ được ẩn bằng cách sử dụng hiệu ứng được chỉ định như "slideUp", "gấp" .

  • Object- Các giá trị có thể là hiệu ứng, độ trễ, thời lượng và tốc độ giảm .

Syntax

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

Tùy chọn này là một lớp có thể được thêm vào tiện ích chú giải công cụ cho các chú giải công cụ như cảnh báo hoặc lỗi. Theo mặc định, giá trị của nó lànull.

Option - tooltipClass

Tùy chọn này là một lớp có thể được thêm vào tiện ích chú giải công cụ cho các chú giải công cụ như cảnh báo hoặc lỗi. Theo mặc định, giá trị của nó lànull.

Syntax

$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);
số 8 theo dõi

Tùy chọn này khi được đặt thành true , chú giải công cụ sẽ theo dõi / theo dõi chuột. Theo mặc định, giá trị của nó làfalse.

Option - track

Tùy chọn này khi được đặt thành true , chú giải công cụ sẽ theo dõi / theo dõi chuột. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").tooltip(
   { track: true }
);

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

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 chú giải công cụ không truyền tham số nào cho tooltip() phương pháp.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip 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>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML tooltipexample.htmvà mở nó trong trình duyệt tiêu 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, hãy di chuột qua các liên kết ở trên hoặc sử dụng phím tab để xoay vòng tiêu điểm trên từng phần tử.

Sử dụng nội dung, theo dõi và bị vô hiệu hóa

Ví dụ sau cho thấy việc sử dụng ba tùy chọn quan trọng (a) content (b) track và (c) disabled trong chức năng chú giải công cụ của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip 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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML tooltipexample.htmvà mở nó trong trình duyệt tiêu 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, nội dung của chú giải công cụ của hộp đầu tiên được đặt bằng tùy chọn nội dung . Bạn cũng có thể nhận thấy chú giải công cụ theo sau chuột. Chú giải công cụ cho hộp nhập thứ hai bị tắt.

Sử dụng chức vụ

Ví dụ sau cho thấy việc sử dụng tùy chọn position trong chức năng chú giải công cụ của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip 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>
      
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML tooltipexample.htmvà mở nó trong trình duyệt tiêu 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, vị trí chú giải công cụ được đặt trên đầu hộp nhập liệu.

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

Phương thức chú giải công cụ (action, params) có thể thực hiện một hành động trên các phần tử chú giải công cụ, chẳng hạn như tắt chú giải công cụ. Cácaction được chỉ định dưới dạng một chuỗi trong đối số đầu tiên và tùy chọn, một hoặc nhiều params có thể được cung cấp dựa trên hành động đã cho.

Về cơ bản, ở đây các hành động không là gì cả nhưng chúng là các phương thức jQuery mà chúng ta có thể sử dụng ở dạng chuỗi.

Cú pháp

$(selector, context).tooltip ("action", [params]);

Bảng sau liệt kê các hành động cho phương pháp này:

Sr.No. Mô tả hành động
1 đóng()

Hành động này đóng chú giải công cụ. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - close()

Hành động này đóng chú giải công cụ. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").tooltip("close");
2 hủy hoại()

Hành động này sẽ xóa hoàn toàn chức năng chú giải công cụ. Thao tác này sẽ đưa phần tử trở lại 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ẽ xóa hoàn toàn chức năng chú giải công cụ. Thao tác này sẽ đưa phần tử trở lại 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").tooltip("destroy");
3 vô hiệu hóa()

Hành động này sẽ hủy kích hoạt chú giải công cụ. 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 sẽ hủy kích hoạt chú giải công cụ. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").tooltip("disable");
4 cho phép ()

Hành động này sẽ kích hoạt chú giải công cụ. Phương pháp 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 chú giải công cụ. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").tooltip("enable");
5 mở()

Hành động này sẽ mở chú giải công cụ theo chương trình. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - open()

Hành động này sẽ mở chú giải công cụ theo chương trình. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").tooltip("open");
6 option (optionName)

Hành động này nhận giá trị được liên kết với optionName cho chú giải công cụ. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - option( optionName )

Hành động này nhận giá trị được liên kết với optionName cho chú giải công cụ. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
7 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 chú giải công cụ hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

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 chú giải công cụ 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").tooltip("option");
số 8 option (optionName, value)

Hành động này đặt giá trị của tùy chọn chú giải công cụ được liên kết với optionName được chỉ định .

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn chú giải công cụ được liên kết với optionName được chỉ định .

Syntax

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

Hành động này đặt một hoặc nhiều tùy chọn cho chú giải công cụ.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho chú giải công cụ.

Syntax

$( ".selector" ).tooltip( "option", { disabled: true } );
10 widget ()

Hành động này trả về một đối tượng jQuery có chứa phần tử gốc. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - widget()

Hành động này trả về một đối tượng jQuery có chứa phần tử gốc. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").tooltip("widget");

Ví dụ

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 các hành động tắt và bật .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip 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>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
               //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
   </body>
</html>

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

Trong ví dụ trên, nhấp vào nút myBtn và một chú giải công cụ bật lên.

Quản lý sự kiện trên các phần tử Chú giải công cụ

Ngoài phương thức chú giải công cụ (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 tạo (sự kiện, ui)

Được kích hoạt khi chú giải công cụ được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - create(event, ui)

Được kích hoạt khi chú giải công cụ được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$(".selector").tooltip(
   create: function(event, ui) {}
);
2 đóng (sự kiện, ui)

Được kích hoạt khi đóng chú giải công cụ. Thường gây nên trên focusout hoặc MouseLeave . Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - close(event, ui)

Được kích hoạt khi đóng chú giải công cụ. Thường gây nên trên focusout hoặc MouseLeave . Trong đó 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à -

  • tooltip - Một phần tử chú giải công cụ được tạo.

Syntax

$(".selector").tooltip(
   close: function(event, ui) {}
);
3 mở (sự kiện, ui)

Được kích hoạt khi chú giải công cụ được hiển thị hoặc hiển thị. Thông thường kích hoạt trên focusin hoặc di chuột . Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - open(event, ui)

Được kích hoạt khi chú giải công cụ được hiển thị hoặc hiển thị. Thông thường kích hoạt trên focusin hoặc di chuột . Trong đó 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à -

  • tooltip - Một phần tử chú giải công cụ được tạo.

Syntax

$(".selector").tooltip(
   open: function(event, ui) {}
);

Ví dụ

Ví dụ sau minh họa việc sử dụng phương thức sự kiện trong chức năng chú giải công cụ. Ví dụ này minh họa việc sử dụng các sự kiện mở và đóng .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip 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>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown", // show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to TutorialsPoint…',
               show: "fold", 
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

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

Trong ví dụ trên, chú giải công cụ cho Di chuột qua tôi! biến mất ngay lập tức trong khi chú giải công cụ cho Di chuột qua tôi cũng vậy! mất dần sau khoảng thời gian 1000ms.

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