Categories
未分类

JqueryUI-工具提示JqueryUI-添加类

JqueryUI-工具提示


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

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

句法

tooltip()方法可以两种形式使用-

$(选择器,上下文).tooltip(选项)方法

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

句法

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

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

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

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

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()方法。

<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>
   
   
   
      <!-- 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>
   

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

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

内容的使用,跟踪和禁用

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

<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>
   
   
   
      <!-- 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">
   

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

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

职位使用

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

<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>
   
   
   
      <!-- HTML --> 
      <label for="name">Enter Date of Birth:</label>
      <input id="tooltip-7" title="Please use MM.DD.YY format.">
   

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

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

$(选择器,上下文).tooltip(“操作”,[参数])方法

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

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

句法

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

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

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");

例子

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

<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>
   
   
   
      <!-- 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">
   

让我们将上面的代码保存在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) {}
);

例子

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

<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>
   
   
   
      <!-- HTML --> 
      <div id="target">
         <a href="#" class="tooltip-9">Hover over me!</a>
         <a href="#" class="tooltip-10">Hover over me too!</a>
      </div>
   

让我们将上面的代码保存在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
1

className

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

2

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()方法的用法。

通过单班

<meta charset="utf-8">
      <title>jQuery UI addClass Example</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>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type="text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   
   
   
      <div id="animTarget" class="elemClass">
         Hello!
      </div>
      <button class="button" id="add">Add Class</button>
      <button class="button" id="remove">Remove Class</button>
   

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

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

通过多个班级

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

<meta charset="utf-8">
      <title>jQuery UI addClass Example</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>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   
   
   
      <p id="welcome">Welcome to Tutorials Point!</p>
      <button class="button-1">Click me</button>
   

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

蜀ICP备20006366号
error: 内容受到保护 !!