📌 相关文章

📜 JqueryUI-工具提示JqueryUI-添加类

📅 最后修改于: 2020-10-23 07:24:35 🧑 作者: Mango

jQueryUI的工具提示小部件取代了本机工具提示。此小部件添加了新主题并允许自定义。首先让我们了解什么是工具提示？工具提示可以附加到任何元素。要显示工具提示，只需将标题属性添加到输入元素，标题属性值将用作工具提示。当您将鼠标悬停在元素上时，title属性显示在元素旁边的小框中。

jQueryUI提供了tooltip（）方法，用于将工具提示添加到要在其上显示工具提示的任何元素。与仅切换可见性相比，默认情况下，这将提供淡入淡出的动画来显示和隐藏工具提示。

句法

tooltip（）方法可以两种形式使用-

$（选择器，上下文）.tooltip（选项）方法

工具提示（选项）方法声明可以将工具提示添加到HTML元素。 options参数是一个对象，它指定工具提示的行为和外观。

句法

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

您可以使用Javascript对象一次提供一个或多个选项。如果要提供的选项不止一个，那么您将使用逗号将它们分开，如下所示：

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

下表列出了可以与该方法一起使用的不同选项–


$(".selector").tooltip(
   { content: "Some content!" }
);
$(".selector").tooltip(
   { disabled: true }
);
$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);
$(".selector").tooltip(
   { items: "img[alt]" }
);
$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);
$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);
$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);
$(".selector").tooltip(
   { track: true }
);

Sr.No.	Option & Description
1	content This option represents content of a tooltip. By default its value is function returning the title attribute. Option – content This option represents content of a tooltip. By default its value is function returning the title attribute. This can be of type − Function − The callback can either return the content directly, or call the first argument, passing in the content, eg. for ajax content. String − A string of HTML to use for the tooltip content. Syntax $(".selector").tooltip( { content: "Some content!" } );
2	disabled This option when set to true disables the tooltip. By default its value is false. Option – disabled This option when set to true disables the tooltip. By default its value is false. Syntax $(".selector").tooltip( { disabled: true } );
3	hide This option represents the animation effect when hiding the tooltip. By default its value is true. Option – hide This option represents the animation effect when hiding the tooltip. By default its value is true. This can be of type − Boolean − This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing. Number − The tooltip will fade out with the specified duration and the default easing. String − The tooltip will be hidden using the specified effect such as “slideUp”, “fold”. Object − Possible values are effect, delay, duration, and easing. Syntax $(".selector").tooltip( { hide: { effect: "explode", duration: 1000 } } );
4	items This option indicates which items can show tooltips. By default its value is [title]. Option – items This option indicates which items can show tooltips. By default its value is [title]. Syntax $(".selector").tooltip( { items: "img[alt]" } );
5	position This option decides the position of the tooltip w.r.t the associated target element. By default its value is function returning the title attribute. Possible values are: my, at, of, collision, using, within. Option – position This option decides the position of the tooltip w.r.t the associated target element. By default its value is function returning the title attribute. Possible values are: my, at, of, collision, using, within. Syntax $(".selector").tooltip( { { my: "left top+15", at: "left bottom", collision: "flipfit" } } );
6	show This option represents how to animate the showing of tooltip. By default its value is true. Option – show This option represents how to animate the showing of tooltip. By default its value is true. This can be of type − Boolean − This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing. Number − The tooltip will fade out with the specified duration and the default easing. String − The tooltip will be hidden using the specified effect such as “slideUp”, “fold”. Object − Possible values are effect, delay, duration, and easing. Syntax $(".selector").tooltip( { show: { effect: "blind", duration: 800 } } );
7	tooltipClass This option is a class which can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null. Option – tooltipClass This option is a class which can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null. Syntax $(".selector").tooltip( { tooltipClass: "custom-tooltip-styling" } } );
8	track This option when set to true, the tooltip follows/tracks the mouse. By default its value is false. Option – track This option when set to true, the tooltip follows/tracks the mouse. By default its value is false. Syntax $(".selector").tooltip( { track: true } );

以下部分将向您展示一些工具提示功能的工作示例。

默认功能

下面的示例演示了一个简单的工具提示功能示例，该工具提示功能未将任何参数传递给tooltip（）方法。


      jQuery UI Tooltip functionality
      
      
      
   
      
      
   
   
   
       
      Name:
      
      
         I also have a tooltip

让我们将上面的代码保存在HTML文件tooltipexample.htm中，并在支持javascript的标准浏览器中将其打开，您还必须看到以下输出。现在，您可以处理结果了-

在上面的示例中，将鼠标悬停在上方的链接上，或使用Tab键将焦点移到每个元素上。

内容的使用，跟踪和禁用

以下示例显示了JqueryUI的工具提示函数中三个重要选项（a）内容（b）跟踪和（c）禁用的用法。


      jQuery UI Tooltip functionality
      
      
      

      
      
   
   
   
       
      Message:
      



      Tooltip disabled for me:

让我们将上面的代码保存在HTML文件tooltipexample.htm中，并在支持javascript的标准浏览器中将其打开，您还必须看到以下输出。现在，您可以处理结果了-

在上面的示例中，使用内容选项设置了第一个框的工具提示的内容。您还可以注意到工具提示跟随鼠标。第二个输入框的工具提示已禁用。

职位使用

以下示例显示了JqueryUI的工具提示函数中选项位置的用法。


      jQuery UI Tooltip functionality
      
      
      
      
      
      
      
      
      
   
   
   
       
      Enter Date of Birth:

让我们将上面的代码保存在HTML文件tooltipexample.htm中，并在支持javascript的标准浏览器中将其打开，您还必须看到以下输出。现在，您可以处理结果了-

在上面的示例中，工具提示位置设置在输入框的顶部。

$（选择器，上下文）.tooltip（“操作”，[参数]）方法

工具提示（操作，参数）方法可以对工具提示元素执行操作，例如禁用工具提示。该动作在第一个参数中指定为字符串，并且可以根据给定的动作提供一个或多个参数。

基本上，这里的动作什么都不是，但是它们是我们可以以字符串形式使用的jQuery方法。

句法

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

下表列出了此方法的操作-


$(".selector").tooltip("close");
$(".selector").tooltip("destroy");
$(".selector").tooltip("disable");
$(".selector").tooltip("enable");
$(".selector").tooltip("open");
var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
$(".selector").tooltip("option");
$( ".selector" ).tooltip( "option", "disabled", true );
$( ".selector" ).tooltip( "option", { disabled: true } );
$(".selector").tooltip("widget");

Sr.No.	Action & Description
1	close() This action closes the tooltip. This method does not accept any arguments. Action – close() This action closes the tooltip. This method does not accept any arguments. Syntax $(".selector").tooltip("close");
2	destroy() This action removes the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments. Action – destroy() This action removes the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments. Syntax $(".selector").tooltip("destroy");
3	disable() This action deactivates the tooltip. This method does not accept any arguments. Action – disable() This action deactivates the tooltip. This method does not accept any arguments. Syntax $(".selector").tooltip("disable");
4	enable() This action activates the tooltip. This method does not accept any arguments. Action – enable() This action activates the tooltip. This method does not accept any arguments. Syntax $(".selector").tooltip("enable");
5	open() This action programmatically opens the tooltip. This method does not accept any arguments. Action – open() This action programmatically opens the tooltip. This method does not accept any arguments. Syntax $(".selector").tooltip("open");
6	option( optionName ) This action gets the value associated with optionName for the tooltip. This method does not accept any arguments. Action – option( optionName ) This action gets the value associated with optionName for the tooltip. This method does not accept any arguments. Syntax var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
7	option() This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments. Action – option() This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments. Syntax $(".selector").tooltip("option");
8	option( optionName, value ) This action sets the value of the tooltip option associated with the specified optionName. Action – option( optionName, value ) This action sets the value of the tooltip option associated with the specified optionName. Syntax $( ".selector" ).tooltip( "option", "disabled", true );
9	option( options ) This action sets one or more options for tooltip. Action – option( options ) This action sets one or more options for tooltip. Syntax $( ".selector" ).tooltip( "option", { disabled: true } );
10	widget() This action returns a jQuery object containing the original element. This method does not accept any arguments. Action – widget() This action returns a jQuery object containing the original element. This method does not accept any arguments. Syntax $(".selector").tooltip("widget");

例子

现在，让我们来看一个使用上表中操作的示例。以下示例演示了使用动作disable和enable的用法。


      jQuery UI Tooltip functionality

让我们将上面的代码保存在HTML文件tooltipexample.htm中，并在支持javascript的标准浏览器中将其打开，您还必须看到以下输出-

在上面的示例中，单击myBtn按钮，将弹出一个工具提示。

工具提示元素上的事件管理

除了我们在上一节中看到的工具提示（选项）方法外，JqueryUI还提供了针对特定事件触发的事件方法。这些事件方法在下面列出-

Sr.No.	Event Method & Description
1	create(event, ui) Triggered when the tooltip is created. Where event is of type Event, and ui is of type Object. Event – create(event, ui) Triggered when the tooltip is created. Where event is of type Event, and ui is of type Object. Syntax $(".selector").tooltip( create: function(event, ui) {} );
2	close(event, ui) Triggered when the tooltip is closed. Usually triggers on focusout or mouseleave. Where event is of type Event, and ui is of type Object. Event – close(event, ui) Triggered when the tooltip is closed. Usually triggers on focusout or mouseleave. Where event is of type Event, and ui is of type Object. Possible values of ui are − tooltip − A generated tooltip element. Syntax $(".selector").tooltip( close: function(event, ui) {} );
3	open(event, ui) Triggered when the tooltip is displayed or shown. Usually triggered on focusin or mouseover. Where event is of type Event, and ui is of type Object. Event – open(event, ui) Triggered when the tooltip is displayed or shown. Usually triggered on focusin or mouseover. Where event is of type Event, and ui is of type Object.Possible values of ui are − tooltip − A generated tooltip element. Syntax $(".selector").tooltip( open: function(event, ui) {} );

例子

下面的示例演示了工具提示功能期间事件方法的用法。此示例演示了打开和关闭事件的用法。


      jQuery UI Tooltip functionality
      
      
      
      
      
      
   
   
   
       
      
         Hover over me!
         Hover over me too!

让我们将上面的代码保存在HTML文件tooltipexample.htm中，并在支持javascript的标准浏览器中将其打开，您还必须看到以下输出-

在以上示例中，“将鼠标悬停在我身上”的工具提示！立即消失，而将鼠标悬停在我身上的提示也！持续1000ms之后淡出。

JqueryUI-添加类

本章将讨论addClass（）方法，该方法是用于管理jQueryUI视觉效果的方法之一。 addClass（）方法允许对CSS属性进行更改。

addClass（）方法在对所有样式更改进行动画处理时，将指定的类添加到匹配的元素。

句法

在jQueryUI的1.0版中添加

addClass（）方法的基本语法如下：

.addClass( className [, duration ] [, easing ] [, complete ] )

Sr.No.	Parameter & Description
1	className This is a String containing one or more CSS classes (separated by spaces).
2	duration This is of type Number or String, and indicates the number of milliseconds of the effect. A value of 0 takes the element directly in the new style, without progress. Its default value is 400.
3	easing This is of type String and indicates the way to progress in the effect. Its default value is swing. Possible values are here.
4	complete This is a callback method called for each element when the effect is complete for this element.

在jQueryUI 1.9版本中添加

在1.9版中，此方法现在支持子选项，该选项还将为后代元素设置动画。

.addClass( className [, options ] )

Sr.No.

Parameter & Description

className

This is a String containing one or more CSS classes (separated by spaces).

options

This represents all animation settings. All properties are optional. Possible values are −

duration − This is of type Number or String, and indicates the number of milliseconds of the effect. A value of 0 takes the element directly in the new style, without progress. Its default value is 400.
easing − This is of type String and indicates the way to progress in the effect. Its default value is swing. Possible values are here.
complete − This is a callback method called for each element when the effect is complete for this element.
children − This is of type Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements. Its default value is false.
queue − This is of type Boolean or String and represents whether to place the animation in the effects queue. Its default value is true.

例子

下面的示例演示addClass（）方法的用法。

通过单班


      jQuery UI addClass Example
      
      
      
      
      
      
      
   
   
   
      
         Hello!

让我们将以上代码保存在HTML文件addclassexample.htm中，并在支持javascript的标准浏览器中将其打开，您还必须看到以下输出。现在，您可以处理结果了-

单击添加类和删除类按钮以查看框中的类效果。

通过多个班级

本示例说明如何将多个类传递给addClass方法。


      jQuery UI addClass Example
      
      
      
      
      
      
      
      
   
   
   
      Welcome to Tutorials Point!

让我们将以上代码保存在HTML文件addclassexample.htm中，并在支持javascript的标准浏览器中将其打开，您还必须看到以下输出。现在，您可以处理结果了-