目录

JqueryUI - 快速指南

JqueryUI - Overview

JqueryUI是一个基于jQuery JavaScript库构建的强大的Javascript库。 UI代表用户界面,它是jQuery的一组插件,为jQuery核心库添加了新的功能。

JqueryUI中的插件集包括界面交互,效果,动画,小部件和构建在jQuery JavaScript库之上的主题。

它于2007年9月发布,由John Resig在jquery.com上发布的博客文章中宣布。 最新版本1.10.4需要jQuery 1.6或更高版本。 jQuery UI是一个免费的开源软件,根据MIT许可证授权。

特点 (Features)

JqueryUI分为四组,交互,小部件,效果,实用程序。 这些将在随后的章节中详细讨论。 图书馆的结构如下图所示 -

Jquery UI Cartegory
  • Interactions - 这些是交互式插件,如拖放,调整大小等,使用户能够与DOM元素进行交互。

  • Widgets - 使用jQuery插件的小部件,您可以创建像accordian,datepicker等用户界面元素。

  • Effects - 这些都是基于内部jQuery效果。 它们包含一整套自定义动画和DOM元素的过渡。

  • Utilities - 这些是JqueryUI库内部使用的一组模块化工具。

JqueryUI的好处

以下是Jquery UI的一些好处 -

  • Cohesive and Consistent APIs.
  • 全面的浏览器支持
  • 开源和免费使用。
  • 好的文档。
  • Powerful Theming Mechanism.
  • Stable and Maintenance Friendly.

JqueryUI - Environment Setup

本章将讨论有关JqueryUI库的下载和设置。 我们还将简要研究目录结构及其内容。 JqueryUI库可以在您的网页中以两种方式使用 -

从官方网站下载UI库

当您打开http://jqueryui.com/链接时,您会看到有三个选项可以下载JqueryUI库 -

JqueryUI下载页面
  • Custom Download - 单击此按钮可下载自定义版本的库。

  • Stable - 单击此按钮可获得稳定和最新版本的JqueryUI库。

  • Legacy - 单击此按钮可获取JqueryUI库的上一个主要版本。

使用下载构建器自定义下载

使用下载构建器,您可以创建自定义构建,以仅包含所需库的那些部分。 您可以下载此新的JqueryUI自定义版本,具体取决于所选主题。 您将看到以下屏幕(同一页面被分成两个图像) -

JqueryUI自定义下载页面

当您只需要JqueryUI库的特定插件或功能时,这非常有用。 此版本的目录结构如下图所示 -

JqueryUI自定义目录结构页面

未压缩的文件位于development-bundle目录中。 未压缩的文件最好在开发或调试期间使用; 压缩文件可以节省带宽并提高生产性能。

稳定的下载

单击Stable按钮,该按钮直接指向包含最新版本JqueryUI库的源,示例和文档的ZIP文件。 将ZIP文件内容解压缩到jqueryui目录。

此版本包含所有文件,包括所有依赖项,大量演示集,甚至库的单元测试套件。 此版本有助于入门。

遗留下载

单击Legacy按钮,该按钮直接指向JqueryUI库以前主要版本的ZIP文件。 此版本还包含所有文件,包括所有依赖项,大量演示集,甚至库的单元测试套件。 此版本有助于您入门。

从CDN下载UI库

CDN或内容分发网络是用于向用户提供文件的服务器网络。 如果您在网页中使用CDN链接,则会将托管文件的责任从您自己的服务器转移到一系列外部服务器。 这也提供了一个优势,如果您的网页的访问者已经从同一CDN下载了JqueryUI的副本,则不必重新下载。

jQuery FoundationGoogleMicrosoft都提供托管jQuery核心以及jQuery UI的CDN。

因为CDN不要求您托管自己的jQuery和jQuery UI版本,所以它非常适合演示和实验。

我们在本教程中使用了库的CDN版本。

例子 (Example)

现在让我们使用JqueryUI编写一个简单的示例。 让我们创建一个HTML文件,将以下内容复制到标记 -

<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添加jQuery UI主题(在我们的例子中是ui-lightness )。 这个CSS将使我们的UI时尚。

  • 第二行,添加了jQuery库,因为jQuery UI是建立在jQuery库之上的。

  • 第三行,添加了jQuery UI库。 这样可以在页面中启用jQuery UI。

现在让我们为标签添加一些内容 -

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

在添加此 -

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

完整的HTML代码如下。 将其另存为myfirstexample.html

<!DOCTYPE html>
<html>
   <head>
      <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 type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>
   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

在浏览器中打开上面的页面。 它将产生以下屏幕。

JqueryUI Fist示例演示

JqueryUI - Draggable

jQueryUI提供了draggable()方法,可以使任何DOM元素可拖动。 一旦元素可拖动,您可以通过用鼠标单击它并将其拖动到视口内的任何位置来移动该元素。

语法 (Syntax)

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

$(selector,context).draggable(options)方法

draggable (options)方法声明可以在HTML页面中移动HTML元素。 options参数是一个对象,它指定所涉及元素的行为。

语法 (Syntax)

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

您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

下表列出了可与此方法一起使用的不同options -

Sr.No. 选项和说明
1 addClasses

如果此选项设置为false ,则会阻止将ui-draggable类添加到所选DOM元素的列表中。 默认情况下,其值为true

Option - addClasses

如果此选项设置为false ,则会阻止将ui-draggable类添加到所选DOM元素的列表中。 默认情况下,其值为true

Syntax

$(".selector").draggable(
   { addClasses: false }
);
2 appendTo

指定拖动时应在其中追加可拖动助手的元素。 默认情况下,其值为“parent”。

Option - appendTo

指定拖动时应在其中追加可拖动助手的元素。 默认情况下,其值为“parent”。

Syntax

$(".selector").draggable(
   { appendTo: "body"}
);
3 axis

此选项限制拖动到水平(x)或垂直(y)轴。 可能的值:“x”,“y”。

Option - axis

此选项限制拖动到水平(x)或垂直(y)轴。 可能的值:“x”,“y”。

Syntax

$(".selector").draggable(
   { axis: "x" }
);
4 cancel

您可以使用此选项来阻止从指定元素开始拖动。 默认情况下,其值为“input,textarea,button,select,option”。

Option - cancel

您可以使用此选项来阻止从指定元素开始拖动。 默认情况下,其值为“input,textarea,button,select,option”

Syntax

$(".selector").draggable(
   { cancel: ".title" }
);
5 connectToSortable

您可以使用此选项指定其元素可互换的列表。 在放置结束时,元素是列表的一部分。 默认情况下,其值为“false”。

Option - connectToSortable

您可以使用此选项指定其元素可互换的列表。 在放置结束时,元素是列表的一部分。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { connectToSortable: "#my-sortable" }
);
6 containment

约束拖动到指定元素或区域的范围内。 默认情况下,其值为“false”。

Option - containment

约束拖动到指定元素或区域的范围内。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { containment: "parent" }
);
7 cursor

元素移动时指定游标CSS属性。 它代表鼠标指针的形状。 默认情况下,其值为“auto”。

Option - cursor

元素移动时指定游标CSS属性。 它代表鼠标指针的形状。 默认情况下,其值为“auto”。 其他可能的价值是 -

  • "crosshair" (across)
  • “默认”(箭头)
  • "pointer" (hand)
  • "move" (two arrows cross)
  • “电子调整大小”(向右扩展)
  • “ne-resize”(向右扩展)
  • “nw-resize”(向左扩展)
  • "n-resize" (expand up)
  • “se-resize”(向下扩展)
  • “sw-resize”(向左扩展)
  • “s-resize”(向下扩展)
  • “自动”(默认)
  • "w-resize" (expand left)
  • “text”(指向写文本的指针)
  • "wait" (hourglass)
  • "help" (help pointer)

Syntax

$(".selector").draggable(
   { cursor: "crosshair" }
);
8 cursorAt

设置拖动助手相对于鼠标光标的偏移量。 坐标可以使用一个或两个键的组合作为哈希值给出:{top,left,right,bottom}。 默认情况下,其值为“false”。

Option - cursorAt

设置拖动助手相对于鼠标光标的偏移量。 坐标可以使用一个或两个键的组合作为哈希值给出:{top,left,right,bottom}。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   $( ".selector" ).draggable({ cursorAt: { left: 5 } });
);
9 delay

延迟,以毫秒为单位,在此之后考虑鼠标的第一次移动。 在此之后可能开始移位。 默认情况下,其值为“0”。

Option - delay

延迟,以毫秒为单位,在此之后考虑鼠标的第一次移动。 在此之后可能开始移位。 默认情况下,其值为“0”。

Syntax

$(".selector").draggable(
   { delay: 300 }
);
10 disabled

设置为true时,禁用移动项目的功能。 在启用此功能之前,无法移动项目(使用draggable(“enable”)指令)。 默认情况下,其值为“false”。

Option - disabled

设置为true时,禁用移动项目的功能。 在启用此功能之前,无法移动项目(使用draggable(“enable”)指令)。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { disabled: true }
);
11 distance

在考虑位移之前必须移动鼠标的像素数。 默认情况下,其值为“1”。

Option - distance

在考虑位移之前必须移动鼠标的像素数。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { distance: 10 }
);
12 grid

将拖动帮助器捕捉到网格,每个x和y像素。 数组必须是[x,y]形式。 默认情况下,其值为“false”。

Option - grid

将拖动帮助器捕捉到网格,每个x和y像素。 数组必须是[x,y]形式。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { grid: [ 50, 20 ] }
);
13 handle

如果指定,则限制从开始拖动,除非在指定元素上发生了mousedown。 默认情况下,其值为“false”。

Option - handle

如果指定,则限制从开始拖动,除非在指定元素上发生了mousedown。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { handle: "h2" }
);
14 helper

允许使用辅助元素拖动显示。 默认情况下,其值为“原始”。

Option - helper

允许使用辅助元素拖动显示。 默认情况下,其值为“原始”。

Syntax

$(".selector").draggable(
   { helper: "clone" }
);
15 iframeFix

阻止iframe在拖动过程中捕获mousemove事件。 默认情况下,其值为“false”。

Option - iframeFix

阻止iframe在拖动过程中捕获mousemove事件。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { iframeFix: true }
);
16 opacity

移动时元素的不透明度移动。 默认情况下,其值为“false”。

Option - opacity

移动时元素的不透明度移动。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   {  opacity: 0.35 }
);
17 refreshPositions

如果设置为true ,则在每个mousemove上计算所有可放置位置。 默认情况下,其值为“false”。

Option - refreshPositions

如果设置为true ,则在每个mousemove上计算所有可放置位置。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { refreshPositions: true }
);
18 revert

指示元素是否在移动结束时移回其原始位置。 默认情况下,其值为“false”。

Option - revert

指示元素是否在移动结束时移回其原始位置。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { revert: true }
);
19 revertDuration

位移的持续时间(以毫秒为单位),之后元素返回其原始位置(请参阅options.revert)。 默认情况下,其值为“500”。

Option - revertDuration

位移的持续时间(以毫秒为单位),之后元素返回其原始位置(请参阅options.revert)。 默认情况下,其值为“500”。

Syntax

$(".selector").draggable(
   { revertDuration: 200 }
);
20 scope

除了droppable的accept选项外,还用于对可拖动和可放置项集进行分组。 默认情况下,其值为“default”。

Option - scope

除了droppable的accept选项外,还用于对可拖动和可放置项集进行分组。 默认情况下,其值为“default”。

Syntax

$(".selector").draggable(
   { scope: "tasks" }
);
21 scroll

设置为true (默认值)时,如果项目移动到窗口的可视区域之外,则显示将滚动。 默认情况下,其值为“true”。

Option - scroll

设置为true (默认值)时,如果项目移动到窗口的可视区域之外,则显示将滚动。 默认情况下,其值为“true”。

Syntax

$(".selector").draggable(
   { scroll: false }
);
22 scrollSensitivity

指示鼠标必须离开窗口的像素数,以便滚动显示。 默认情况下,其值为“20”。

Option - scrollSensitivity

指示鼠标必须离开窗口的像素数,以便滚动显示。 默认情况下,其值为“20”。

Syntax

$(".selector").draggable(
   { scrollSensitivity: 100 }
);
23 scrollSpeed

滚动开始后显示显示的滚动速度。 默认情况下,其值为“20”。

Option - scrollSpeed

滚动开始后显示显示的滚动速度。 默认情况下,其值为“20”。

Syntax

$(".selector").draggable(
   { scrollSpeed: 100 }
);
24 snap

调整在其他元素(已飞行)上移动的项目的显示。 默认情况下,其值为“false”。

Option - snap

调整在其他元素(已飞行)上移动的项目的显示。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { snap: true }
);
25 snapMode

指定如何在移动的元素和options.snap指示的元素之间进行调整。 默认情况下,其值为“both”。

Option - snapMode

>指定如何在移动的元素和options.snap指示的元素之间进行调整。 默认情况下,其值为“both”。

Syntax

$(".selector").draggable(
   { snapMode: "inner" }
);
26 snapTolerance

建立调整所需的位置差异中的最大像素数。 默认情况下,其值为“20”。

Option - snapTolerance

建立调整所需的位置差异中的最大像素数。 默认情况下,其值为“20”。

Syntax

$(".selector").draggable(
   { snapTolerance: 30 }
);
27 stack

控制与选择器匹配的元素集的z-index,始终将当前拖动的项目置于前面。 在窗口管理器等方面非常有用。 默认情况下,其值为“false”。

Option - stack

控制与选择器匹配的元素集的z-index,始终将当前拖动的项目置于前面。 在窗口管理器等方面非常有用。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { stack: ".products"  }
);
28 zIndex

被拖动时帮助器的Z-index。 默认情况下,其值为“false”。

Option - zIndex

被拖动时帮助器的Z-index。 默认情况下,其值为“false”。

Syntax

$(".selector").draggable(
   { zIndex: 100 }
);

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

默认的功能 (Default functionality)

下面的示例演示了一个简单的可拖动功能示例,该参数不向draggable()方法传递任何参数。

<!DOCTYPE html>
<html>
   <head>
      <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>
         #draggable { width: 150px; height: 150px; padding: 0.5em; background:#eee;}
      </style>
      <script>
         $(function() {
            $( "#draggable" ).draggable();
         });
      </script>
   </head>
   <body>
      <div id = "draggable" class = "ui-widget-content">
         <p>Drag me !!!</p>
      </div>
   </body>
</html>

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

新页面打开

使用禁用,距离和延迟

以下示例显示了三个重要选项的使用(a) disabled (b) delay(c) distance JqueryUI的拖动功能中的距离。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   <body>
      <div id = "div1" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me!</span><br /><br />
      </div>
      <div id = "div2" style = "border:solid 1px;background-color:grey;">
         <span>
            Dragging will start only after you drag me for 50px
         </span>
         <br /><br />
      </div>
      <div id = "div3" style = "border:solid 1px;background-color:gainsboro;">
         <span>
            You have to wait for 500ms for dragging to start!
         </span>
         <br /><br />
      </div>
      <script>
         $("#div1 span").draggable (
            { disabled: true }
         );
         $("#div2 span").draggable (
            { distance: 50 }
         );
         $("#div3 span").draggable (
            { delay: 500 }
         );
      </script>
   </body>
</html>

让我们将上述代码保存在HTML文件dragexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

约束运动

以下示例显示如何使用JqueryUI的拖动功能中的containment选项限制屏幕上元素的移动。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   <body>
      <div id = "div4" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can drag me only within this div.</span><br /><br />
      </div>
      <div id = "div5" style = "border:solid 1px;background-color:grey;">
         <span>You can drag me only along x axis.</span><br /><br />
      </div>
      <script>
         $("#div4 span").draggable ({
            containment : "#div4"
         });
         $("#div5 span").draggable ({
            axis : "x"
         });
      </script>
   </body>
</html>

让我们将上述代码保存在HTML文件dragexample.htm ,并在支持javascript的标准浏览器中打开它。 它应该产生以下输出。 现在,你可以玩输出 -

新页面打开

这里,阻止元素进入ID为div4的

之外。
您还可以使用值为“x”或“y”的选项axis对垂直或水平运动施加约束,这也会得到证明。

通过复制移动内容

以下示例演示如何移动作为所选元素的克隆的项目。 这是使用带有值clone的选项helper完成的。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   <body>
      <div id = "div6" style = "border:solid 1px;background:#eee; height:50px;">
         <span>You can duplicate me....</span>
      </div>
      <script>
         $("#div6 span").draggable ({
            helper : "clone"
         });
      </script>
   </body>
</html>

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

新页面打开

正如您在第一个元素被拖动时所看到的那样,只有克隆元素移动,而原始项目保持不变。 如果释放鼠标,则克隆元素将消失,原始项目仍处于其原始位置。

获取当前期权价值

以下示例演示了如何在脚本执行期间随时获取任何选项的值。 这里我们将读取执行时设置的cursorcursorAt选项的值。 类似地,您可以获得任何其他可用选项的价值。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   <body>
      <div id = "divX" style = "border:solid 1px;background:#eee; height:50px;">
         <span>Click anywhere on me to see cursor type...</span>
      </div>
      <script>
         /* First make the item draggable */
         $("#divX span").draggable();
         $("#divX span").bind('click', function( event ) {
            var cursor = $( "#divX span" ).draggable( "option", "cursor" );
            var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" );
            alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt);
         });
      </script>
   </body>
</html>

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

新页面打开

$(selector,context).draggable(“action”,[params])方法

draggable (action, params)方法可以对可移动元件执行动作,例如以防止移位。 该action在第一个参数中指定为字符串,并且可选地,可以基于给定的操作提供一个或多个params

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

语法 (Syntax)

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

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

Sr.No. 行动和描述
1 destroy()

完全删除拖动功能。 元素不再可移动。 这将使元素返回到pre-init状态。

Action - destroy()

完全删除拖动功能。 元素不再可移动。 这将使元素返回到pre-init状态。

Syntax

$(".selector").draggable("destroy");
2 disable()

禁用拖动功能。 在下次调用draggable(“enable”)方法之前,不能移动元素。

Action - disable()

禁用拖动功能。 在下次调用draggable(“enable”)方法之前,不能移动元素。

Syntax

$(".selector").draggable("disable");
3 enable()

重新激活拖动管理。 元素可以再次移动。

Action - enable()

重新激活拖动管理。 元素可以再次移动。

Syntax

$(".selector").draggable("enable");
4 option(optionName)

获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称,其类型为String

Action - option(optionName)

获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称,其类型为String

Syntax

var isDisabled = $( ".selector" ).draggable( "option", "disabled" );
5 option()

获取一个对象,该对象包含表示当前可拖动选项哈希的键/值对。

Action - option()

获取一个对象,该对象包含表示当前可拖动选项哈希的键/值对。

Syntax

var options = $( ".selector" ).draggable( "option" );
6 option(optionName, value)

设置与指定的optionName关联的draggable选项的value 。 其中optionName是要设置的选项的名称, value是要为该选项设置的值。

Action - option(optionName, value)

设置与指定的optionName关联的draggable选项的value 。 其中optionName是要设置的选项的名称, value是要为该选项设置的值。

Syntax

$( ".selector" ).draggable( "option", "disabled", true );
7 option(options)

为可拖动设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Action - option(options)

为可拖动设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Syntax

$(".selector").draggable("option", { disabled: true } );
8 widget()

返回包含draggable元素的jQuery对象。

Action - widget()

返回包含draggable元素的jQuery对象。

Syntax

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

例子 (Example)

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

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   <body>
      <div id = "div7" style = "border:solid 1px;background-color:gainsboro;">
         <span>You can't move me. Dragging is disabled.</span><br><br>
      </div>
      <div id = "div8" style = "border:solid 1px;background-color:grey;">
         <span>You can move me. Dragging is enabled.</span><br><br>
      </div>
      <script>
         $("#div7 span").draggable ();
         $("#div7 span").draggable ('disable');
         $("#div8 span").draggable ();
         $("#div8 span").draggable ('enable');
      </script>
   </body>
</html>

让我们将上述代码保存在HTML文件dragexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出 -

新页面打开

如您所见,第一个元素被禁用,第二个元素的拖动被启用,您可以尝试拖动。

Moved元素的事件管理

除了我们在前面部分中看到的draggable(options)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No. 事件方法和描述
1 create(event, ui)

创建可拖动时触发。 其中eventEvent类型, uiObject类型。

Event - create(event, ui)

创建可拖动时触发。 其中eventEvent类型, uiObject类型。

Syntax

$(".selector").draggable(
   create: function(event, ui) {}
);
2 drag(event, ui)

在拖动过程中移动鼠标时触发。 where event的类型为Event ,而ui的类型为Object如helper,position,offset。

Event - drag(event, ui)

在拖动过程中移动鼠标时触发。 where event的类型为Event ,而ui的类型为Object如helper,position,offset。

Syntax

$(".selector").draggable(
   drag: function(event, ui) {}
);
3 start(event, ui)

拖动开始时触发。 where event的类型为Event ,而ui的类型为Object如helper,position,offset。

Event - start(event, ui)

拖动开始时触发。 where event的类型为Event ,而ui的类型为Object如helper,position,offset。

Syntax

$(".selector").draggable(
   start: function( event, ui ) {}
);
4 stop(event, ui)

拖动停止时触发。 where event的类型为Event ,而ui的类型为Object如helper,position,offset。

Event - stop(event, ui)

拖动停止时触发。 where event的类型为Event ,而ui的类型为Object如helper,position,offset。

Syntax

$(".selector").draggable(
   stop: function( event, ui ) {}
);

例子 (Example)

以下示例演示了在拖动功能期间使用事件方法。 此示例演示了使用drag事件。

<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>
   <body>
      <div id = "div9" style = "border:solid 1px;background-color:gainsboro;">
         <span>Drag me to check the event method firing</span><br /><br />
      </div>
      <script>
         $("#div9 span").draggable ({
            cursor: "move",
            axis : "x",
            drag: function( event, ui ) {
               alert("hi..");
            }
         });
      </script>
   </body>
</html>

让我们将上面的代码保存在HTML文件dragexample.htm并在支持javascript的标准浏览器中打开它,你应该输出以下内容 -

新页面打开

现在尝试拖动书面内容,您将看到一个拖动事件的start被触发,这导致显示一个对话框,光标将更改为移动图标,文本将仅在X轴上移动。

JqueryUI - Droppable

jQueryUI提供了droppable()方法,使任何DOM元素都可以在指定目标(可拖动元素的目标)上进行删除。

语法 (Syntax)

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

$(selector,context)。droppable(options)方法

droppable (options)方法声明可以将HTML元素用作可以删除其他元素的元素。 options参数是一个对象,它指定所涉及元素的行为。

语法 (Syntax)

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

您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

下表列出了可与此方法一起使用的不同options -

Sr.No. 选项和说明
1 accept
当您需要控制要删除哪些可拖动元素时,将使用此选项。 默认情况下,其值为*

Option - accept

当您需要控制要删除哪些可拖动元素时,将使用此选项。 默认情况下,其值为*表示droppable接受每个项目。

这可以是 -

  • Selector - 此类型指示接受哪些可拖动元素。

  • Function - 将为页面上的每个可拖动元素调用回调函数。 如果droppable接受了draggable元素,则此函数应返回true

Syntax

$( ".selector" ).droppable(
   { accept: ".special" }
);
2 activeClass

此选项是一个String,表示在拖动一个接受的元素( options.accept指示的元素之一)时要添加到droppable元素的一个或多个CSS类。 默认情况下,其值为false

Option - activeClass

此选项是一个String,表示在拖动一个接受的元素( options.accept指示的元素之一)时要添加到droppable元素的一个或多个CSS类。 默认情况下,其值为false

Syntax

$( ".selector" ).droppable(
   { activeClass: "ui-state-highlight" }
);
3 addClasses

设置为false时,此选项将阻止将ui-droppable类添加到droppable元素。 默认情况下,其值为true

Option - addClasses

设置为false时,此选项将阻止将ui-droppable类添加到droppable元素。 默认情况下,其值为true 。 在数百个元素上调用.droppable() init时,可能需要将其作为性能优化。

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4 disabled

设置为true时,此选项将禁用droppable。 默认情况下,其值为false

Option - disabled

设置为true时,此选项将禁用droppable,即禁用项目在指定元素上的移动以及删除这些元素。 默认情况下,其值为false

Syntax

$( ".selector" ).droppable(
   { disabled: true }
);
5 greedy

当您需要控制哪些可拖动元素可以放置在嵌套的droppable上时,可以使用此选项。 默认情况下,其值为false 。 如果此选项设置为true ,则任何父级droppable都不会接收该元素。

Option - greedy

当您需要控制哪些可拖动元素可以放置在嵌套的droppable上时,可以使用此选项。 默认情况下,其值为false 。 如果此选项设置为true ,则任何父级droppable都不会接收该元素。

Syntax

$( ".selector" ).droppable(
   { greedy: true }
);
6 hoverClass

此选项是String表示当接受的元素( options.accept指示的元素)移入其中时,要添加到droppable元素的一个或多个CSS类。 默认情况下,其值为false

Option - hoverClass

此选项是String表示当接受的元素( options.accept指示的元素)移入其中时,要添加到droppable元素的一个或多个CSS类。 默认情况下,其值为false

Syntax

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
7 scope

此选项用于将可拖动元素的可放置操作仅限制为具有相同options.scope (在draggable(options)中定义)的项目。 默认情况下,其值为"default"

Option - scope

此选项用于将可拖动元素的可放置操作仅限制为具有相同options.scope (在draggable(options)中定义)的项目。 默认情况下,其值为"default"

Syntax

$( ".selector" ).droppable(
   { scope: "tasks" }
);
8 tolerance

此选项是一个String ,用于指定用于测试拖动器是否悬停在droppable上的模式。 默认情况下,其值为"intersect"

Option - tolerance

此选项是一个String ,指定可拖动元素应如何覆盖正在接受的拖放的droppable元素。 默认情况下,其值为"intersect" 。 可能的值是 -

  • fit - Draggable完全覆盖了droppable元素。

  • intersect - Draggable在两个方向上至少50%重叠可放置元素。

  • pointer - 鼠标指针与可放置元素重叠。

  • touch - 可拖动重叠可放置的任何触摸量。

Syntax

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

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

默认功能

以下示例演示了一个可放置功能的简单示例,它不向droppable()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default 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>
      <style>
         #draggable-1 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   <body>
      <div id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

让我们将上述代码保存在HTML文件dropexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

使用addClass,禁用和容差

以下示例演示了三个选项的使用(a) addClass (b) disabled(c) tolerance JqueryUI的drop函数中的(c) tolerance

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default 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>
      <style>
         #draggable-2 { 
            width: 100px; height: 50px; padding: 0.5em; 
            margin: 0px 5px 10px 0; 	    
         }
         #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
      </style>
      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
            $( "#droppable-3" ).droppable({
               disabled : "true",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
            $( "#droppable-4" ).droppable({
               tolerance: 'touch',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped with a touch!" );
               }
            });
            $( "#droppable-5" ).droppable({
               tolerance: 'fit',
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped only when fully fit on the me!" );
               }
            });
         });
      </script>
   </head>
   <body>
      <div id = "draggable-2" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-2" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
      <div id = "droppable-3" class = "ui-widget-header">
         <p>I'm disabled, you can't drop here!</p>
      </div>
      <div id = "droppable-4" class = "ui-widget-header">
         <p>Tolerance Touch!</p>
      </div>
      <div id = "droppable-5" class = "ui-widget-header">
         <p>Tolerance Fit!</p>
      </div>
   </body>
</html>

让我们将上述代码保存在HTML文件dropexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

现在将元素放在“Tolerance Touch!”上 框(只需触摸此框的边缘)并查看目标元素的更改。 现在将元素放在“Tolerance Fit!”上 目标,可拖动元素必须与目标元素完全重叠,即“Tolerance Fit!” 目标。

选择要删除的元素

以下示例演示了在JqueryUI的拖动函数中使用选项acceptscope选项。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default 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>
      <style>
         .wrap {
            display: table-row-group;
         }
         #japanpeople,#indiapeople, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         #japan,#india,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
      </style>
      <script>
         $(function() {
            $( "#japanpeople" ).draggable();
            $( "#indiapeople" ).draggable();
            $( "#japan" ).droppable({
               accept: "#japanpeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
            $( "#india" ).droppable({
               accept: "#indiapeople",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
            $( "#javatutorial" ).draggable({scope : "java"});
            $( "#springtutorial" ).draggable({scope : "spring"});
            $( "#java" ).droppable({
               scope: "java",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
            $( "#spring" ).droppable({
               scope: "spring",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            }); 
         });
      </script>
   </head>
   <body>
      <div class = "wrap" >
         <div id = "japanpeople" class = "ui-widget-content">
            <p>People to be dropped to Japan</p>
         </div>
         <div id = "indiapeople" class = "ui-widget-content">
            <p>People to be dropped to India</p>
         </div>
         <div id = "japan" class = "ui-widget-header">
            <p>Japan</p>
         </div>
         <div id = "india" class = "ui-widget-header">
            <p>India</p>
         </div>
      </div>
      <hr/>
      <div class = "wrap" >
         <div id = "javatutorial" class = "ui-widget-content">
            <p>People who want to learn Java</p>
         </div>
         <div id = "springtutorial" class = "ui-widget-content">
            <p>People who want to learn Spring</p>
         </div>
         <div id = "java" class = "ui-widget-header">
            <p>Java</p>
         </div>
         <div id = "spring" class = "ui-widget-header">
            <p>Spring</p>
         </div>
      </div>
   </body>
</html>

让我们将上述代码保存在HTML文件dropexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在你可以玩输出 -

新页面打开

在这里你可以看到你可以在“日本”目标和元素“来自印度的人”的目标印度上放弃元素“来自日本的人”。 类似“想要学习Java的人”的范围设置为“Java”,“想要学习Spring的人”设置为“Spring目标”。

管理外观

以下示例演示了如何使用JqueryUI类的选项activeClasshoverClass ,这有助于我们管理外观。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default 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>
      <style type = "text/css">
         #draggable-3 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
         }  
         .hover {
            border-color : red;
            background : green;
         }
      </style>
      <script>
         $(function() {
            $( "#draggable-3" ).draggable();
            $( "#droppable-6" ).droppable({
               activeClass: "active",
               hoverClass:  "hover",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               }
            });
         });
      </script>
   </head>
   <body>
      <div id = "draggable-3" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-6" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

让我们将上面的代码保存在HTML文件dropexample.htm ,并在支持javascript的标准浏览器中打开它,你应该看到以下输出 -

新页面打开

您可以注意到,在“拖动我到目标”元素的拖动或悬停(在目标上)时,更改目标元素“Drop here”的颜色。

$ (selector, context).droppable(“action”,params)方法

droppable ("action", params)方法可以对可放置元素执行操作,例如防止可放置功能。 该操作在第一个参数中指定为字符串(例如,“禁用”以防止丢弃)。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No. 行动和描述
1 destroy

此操作会完全破坏元素的可放置功能。 元素返回到pre-init状态。

Action - destroy

此操作会完全破坏元素的可放置功能。 元素返回到pre-init状态。

Syntax

$( ".selector" ).droppable("destroy");
2 disable

此操作将禁用可放置操作。 元素不再是可放置的元素。 此方法不接受任何参数。

Action - disable

此操作将禁用可放置操作。 元素不再是可放置的元素。 此方法不接受任何参数。

Syntax

$( ".selector" ).droppable("disable");
3 enable

此操作会重新激活可放置操作。 元素可以再次接收可放置元素。 此方法不接受任何参数。

Action - enable

此操作会重新激活可放置操作。 元素可以再次接收可放置元素。 此方法不接受任何参数。

Syntax

$( ".selector" ).droppable("enable");
4 option

此操作获取一个对象,该对象包含表示当前可放置选项哈希的键/值对。 此方法不接受任何参数。

Action - option

此操作获取一个对象,该对象包含表示当前可放置选项哈希的键/值对。 此方法不接受任何参数。

Syntax

var options = $( ".selector" ).droppable( "option" );
5 option( optionName )

此操作使用指定的optionName获取当前关联的droppable元素的值。 这将String值作为参数。

Action - option( optionName )

此操作使用指定的optionName获取当前关联的droppable元素的值。 这将String值作为参数。

Syntax

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
6 option( optionName, value )

此操作设置与指定的optionName关联的droppable选项的值。

Action - option( optionName, value )

此操作设置与指定的optionName关联的droppable选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

Syntax

$( ".selector" ).droppable( "option", "disabled", true );
7 option( options )

此操作为droppable设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

Action - option( options )

此操作为droppable设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

Syntax

$( ".selector" ).droppable( "option", { disabled: true } );
8 widget

此操作返回包含droppable元素的jQuery对象。 此方法不接受任何参数。

此操作返回包含droppable元素的jQuery对象。 此方法不接受任何参数。

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了destroy()方法的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default 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>
      <style>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   <body>
      <div class = "draggable-4"><p>drag 1</p></div>
      <div class = "draggable-4"><p>drag 2</p></div>
      <div class = "draggable-4"><p>drag 3</p></div>
      <div style = "clear: both;padding:10px"></div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
      <div class = "droppable-7">drop here</div>
   </body>
</html>

让我们将上面的代码保存在HTML文件dropexample.htm ,并在支持javascript的标准浏览器中打开它,你应该看到以下输出 -

新页面打开

如果在名为“drop here”的任何元素上删除“drag1”,您将注意到此元素被删除,此操作会完全破坏元素的可放置功能。 你不能再次在这个元素上删除“drag2”和“drag3”。

可放置元素的事件管理

除了我们在前面几节中看到的droppable(options)方法之外,JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -

Sr.No. 事件方法和描述
1 activate(event, ui)

当接受的可拖动元素开始拖动时,将触发此事件。 如果您想在可以放置的情况下使droppable“亮起”,这将非常有用。

Event - activate(event, ui)

当接受的可拖动元素开始拖动时,将触发此事件。 如果您想在可以放置的情况下使droppable“亮起”,这将非常有用。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • draggable - 表示可拖动元素的jQuery对象。

  • helper - 表示正在拖动的帮助程序的jQuery对象。

  • position - 作为{top,left}对象的可拖动助手的当前CSS位置。

  • offset - 可拖动助手的当前偏移位置为{top,left}对象。

Syntax

$( ".selector" ).droppable({
   activate: function( event, ui ) {}
});
2 create(event, ui)

创建可放置元素时会触发此事件。 其中eventEvent类型, uiObject类型。

Event - create(event, ui)

创建可放置元素时会触发此事件。 其中eventEvent类型, uiObject类型。

Syntax

$( ".selector" ).droppable({
   create: function( event, ui ) {}
});
3 deactivate(event, ui)

当已接受的可拖动停止拖动时,将触发此事件。 其中eventEvent类型, uiObject类型。

Event - deactivate(event, ui)

当已接受的可拖动停止拖动时,将触发此事件。 其中eventEvent类型, uiObject类型,可能的类型是 -

  • draggable - 表示可拖动元素的jQuery对象。

  • helper - 表示正在拖动的帮助程序的jQuery对象。

  • position - 作为{top,left}对象的可拖动助手的当前CSS位置。

  • offset - 可拖动助手的当前偏移位置为{top,left}对象。

Syntax

$(".selector").droppable(
   deactivate: function(event, ui) {}
);
4 drop(event, ui)

在droppable上放置元素时会触发此操作。 这基于tolerance选项。 其中eventEvent类型, uiObject类型。

Event - drop(event, ui)

在droppable上放置元素时会触发此操作。 这基于tolerance选项。 其中eventEvent类型, uiObject类型,可能的类型是 -

  • draggable - 表示可拖动元素的jQuery对象。

  • helper - 表示正在拖动的帮助程序的jQuery对象。

  • position - 作为{top,left}对象的可拖动助手的当前CSS位置。

  • offset - 可拖动助手的当前偏移位置为{top,left}对象。

Syntax

$(".selector").droppable(
   drop: function(event, ui) {}
);
5 out(event, ui)

将可接受的可拖动元素拖出droppable时会触发此事件。 这基于tolerance选项。 其中eventEvent类型, uiObject类型。

Event - out(event, ui)

将可接受的可拖动元素拖出droppable时会触发Thi事件。 这基于tolerance选项。 其中eventEvent类型, uiObject类型。

Syntax

$(".selector").droppable(
   out: function(event, ui) {}
);
6 over(event, ui)

将可接受的可拖动元素拖过droppable时会触发此事件。 这基于tolerance选项。 其中eventEvent类型, uiObject类型。

Event - over(event, ui)

将可接受的可拖动元素拖过droppable时会触发此事件。 这基于tolerance选项。 where event的类型为Event ,而ui的类型为Object可能的类型是 -

  • draggable - 表示可拖动元素的jQuery对象。

  • helper - 表示正在拖动的帮助程序的jQuery对象。

  • position - 作为{top,left}对象的可拖动助手的当前CSS位置。

  • offset - 可拖动助手的当前偏移位置为{top,left}对象。

Syntax

$(".selector").droppable(
   over: function(event, ui) {}
);

例子 (Example)

以下示例演示了删除功能期间的事件方法用法。 此示例演示了事件dropoverout

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default 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>
      <style>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px;
         }
      </style>
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },   
               over: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving in!" );
               },
               out: function (event, ui) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   <body>
      <div id = "draggable-5" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </div>
      <div id = "droppable-8" class = "ui-widget-header">
         <p>Drop here</p>
      </div>
   </body>
</html>

让我们将上面的代码保存在HTML文件dropexample.htm ,并在支持javascript的标准浏览器中打开它,你应该看到以下输出 -

新页面打开

在这里,您将注意到在拖动元素时droppable元素中的消息如何变化。

JqueryUI - Resizable

jQueryUI提供resizable()方法来调整任何DOM元素的大小。 这种方法简化了元素的大小调整,否则需要花费大量时间和HTML编码。 resizable()方法在项目的右下角显示一个图标以调整大小。

语法 (Syntax)

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

$(selector,context).resizable(options)方法

resizable (options)方法声明可以调整HTML元素的大小。 options参数是一个对象,它指定调整大小时涉及的元素的行为。

语法 (Syntax)

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

您可以在使用Javascript对象时提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

下表列出了可与此方法一起使用的不同options -

Sr.No. 选项和说明
1 alsoResize

此选项的类型为SelectorjQuery或任何DOM Element 。 它表示在调整原始对象大小时也调整大小的元素。 默认情况下,其值为false

Option - alsoResize

此选项可以是SelectorjQuery或任何DOM Element 。 它表示在调整原始对象大小时也调整大小的元素。 默认情况下,其值为false

这可以是 -

  • Selector - 此类型指示要从DOM文档中选择用于调整大小的DOM元素。

  • jQuery - 将为页面上的每个可调整大小的元素调用回调函数。 如果调整元素大小,则此函数应返回true

  • Element - 文档对象模型(DOM)中的元素。

Syntax

$( ".selector" ).resizable({ alsoResize: "#identifier" });
2 animate

设置为true时,此选项用于在释放鼠标按钮时调整大小时启用视觉效果。 默认值为false (无效)。

Option - animate

设置为true时,此选项用于在释放鼠标按钮时调整大小时启用视觉效果。 默认值为false (无效)。

Syntax

$( ".selector" ).resizable({ animate: true });
3 animateDuration

此选项用于设置调整大小效果的持续时间(以毫秒为单位)。 仅当animate选项为true时才使用此选项。 默认情况下,其值为"slow"

Option - animateDuration

此选项用于设置调整大小效果的持续时间(以毫秒为单位)。 仅当animate选项为true时才使用此选项。 默认情况下,其值为"slow"

这可以是 -

  • Number - 指定持续时间(以毫秒为单位)

  • String - 这会分配命名的持续时间,例如“slow”或“fast”。

Syntax

$( ".selector" ).resizable({ animateDuration: "fast" });
4 animateEasing

此选项用于指定使用animate选项时要应用的easing 。 默认情况下,其值为"swing"

Option - animateEasing

此选项用于指定使用animate选项时要应用的easing 。 默认情况下,其值为"swing"

缓动函数指定动画在动画中的不同点处进行的速度。

Syntax

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
5 aspectRatio

此选项用于指示是否保持项目的宽高比(高度和宽度)。 默认情况下,其值为false

Option - aspectRatio

此选项用于指示是否保持项目的宽高比(高度和宽度)。 默认情况下,其值为false

这可以是 -

  • Boolean - 此值如果设置为true ,则元素将保持其原始高宽比。

  • Number - 指定在调整大小期间保持特定宽高比的元素。

Syntax

$( ".selector" ).resizable({ aspectRatio: true });
6 autoHide

此选项用于隐藏放大图标或手柄,除非鼠标位于项目上方。 默认情况下,其值为false

Option - autoHide

此选项用于隐藏放大图标或手柄,除非鼠标位于项目上方。 默认情况下,其值为false

Syntax

$( ".selector" ).resizable({ autoHide: true });
7 cancel

此选项用于防止对指定元素进行大小调整。 默认情况下,其值为input,textarea,button,select,option

Option - cancel

此选项用于防止对指定元素进行大小调整。 默认情况下,其值为input,textarea,button,select,option

Syntax

$( ".selector" ).resizable({ cancel: ".cancel" });
8 containment

此选项用于限制指定元素或区域内元素的大小调整。 默认情况下,其值为false

Option - containment

此选项用于限制指定元素或区域内元素的大小调整。 默认情况下,其值为false

这可以是 -

  • Selector - 此类型表示可调整大小的元素仅包含在选择器找到的列表中的第一个项目中。

  • Element - 此类型表示任何DOM元素。 可调整大小的元素将包含在此元素的边界框中。

  • String - 此类型的可能值为 - parentdocument

Syntax

$( ".selector" ).resizable({ containment: "parent" });
9 delay

此选项用于设置容差或延迟(以毫秒为单位)。 此后将开始调整大小或移位。 默认情况下,其值为0

Option - delay

此选项用于设置容差或延迟(以毫秒为单位)。 此后将开始调整大小或移位。 默认情况下,其值为0

Syntax

$( ".selector" ).resizable({ delay: 150 });
10 disabled

设置为true时,此选项禁用调整大小机制。 鼠标不再调整元素大小,直到启用机制,使用可调整大小(“启用”)。 默认情况下,其值为false

Option - disabled

设置为true时,此选项禁用调整大小机制。 鼠标不再调整元素大小,直到启用机制,使用可调整大小(“启用”)。 默认情况下,其值为false

Syntax

$( ".selector" ).resizable({ disabled: true });
11 distance

使用此选项,仅在鼠标移动距离(像素)时才开始调整大小。 默认情况下,其值为1 pixel 。 这有助于防止在单击元素时意外调整大小。

Option - distance

使用此选项,仅在鼠标移动距离(像素)时才开始调整大小。 默认情况下,其值为1 pixel 。 这有助于防止在单击元素时意外调整大小。

Syntax

$( ".selector" ).resizable({ distance: 30 });
12 ghost

此选项设置为true ,会显示一个半透明的辅助元素,用于调整大小。 释放鼠标时将删除此重影项目。 默认情况下,其值为false

Option - ghost

此选项设置为true ,会显示一个半透明的辅助元素,用于调整大小。 释放鼠标时将删除此重影项目。 默认情况下,其值为false

Syntax

$( ".selector" ).resizable({ ghost: true });
13 grid

此选项的类型为Array [x,y],表示元素在移动鼠标时水平和垂直扩展的像素数。 默认情况下,其值为false

Option - grid

此选项的类型为Array [x,y],表示元素在移动鼠标时水平和垂直扩展的像素数。 默认情况下,其值为false

Syntax

$( ".selector" ).resizable({ grid: [ 20, 10 ] });
14 handles

此选项是一个字符串,指示可以调整元素的哪些边或角度。 默认情况下,其值为e, s, se

Option - handles

此选项是一个字符串,指示可以调整元素的哪些边或角度。 可能的值为:四个边的n, e, s,w ,以及四个边的ne, se, nw,sw 。 字母n, e, s,w代表四个基点(北,南,东和西)。

默认情况下,其值为e, s, se

Syntax

$( ".selector" ).resizable({ handles: "n, e, s, w" });
15 helper

此选项用于添加CSS类以设置要调整大小的元素的样式。 调整元素大小时,会创建一个新的

元素,该元素是缩放的(ui-resizable-helper类)。
调整大小完成后,将调整原始元素的大小并使
元素消失。
默认情况下,其值为false

Option - helper

此选项用于添加CSS类以设置要调整大小的元素的样式。 调整元素大小时,会创建一个新的

元素,该元素是缩放的(ui-resizable-helper类)。
调整大小完成后,将调整原始元素的大小并使
元素消失。
默认情况下,其值为false

Syntax

$( ".selector" ).resizable({ helper: "resizable-helper" });
16 maxHeight

此选项用于设置可调整大小应调整大小的最大高度。 默认情况下,其值为null

Option - maxHeight

此选项用于设置可调整大小应调整大小的最大高度。 默认情况下,其值为null

Syntax

$( ".selector" ).resizable({ maxHeight: 300 });
17 maxWidth

此选项用于设置应允许resizable调整大小的最大宽度。 默认情况下,其值为null

Option - maxWidth

此选项用于设置应允许resizable调整大小的最大宽度。 默认情况下,其值为null

Syntax

$( ".selector" ).resizable({ maxWidth: 300 });
18 minHeight

此选项用于设置应允许resizable调整大小的最小高度。 默认情况下,其值为10

Option - minHeight

此选项用于设置应允许resizable调整大小的最小高度。 默认情况下,其值为10

Syntax

$( ".selector" ).resizable({ minHeight: 150 });
19 minWidth

此选项用于设置可调整大小应允许调整大小的最小宽度。 默认情况下,其值为10

Option - minWidth

此选项用于设置可调整大小应允许调整大小的最小宽度。 默认情况下,其值为10

这可以是 -

Syntax

$( ".selector" ).resizable({ minWidth: 150 });

以下部分将向您展示调整大小功能的一些工作示例。

默认功能

以下示例演示了可调整大小功能的简单示例,不向resizable()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id = "resizable" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

让我们将上述代码保存在HTML文件resizeexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

拖动方形边框以调整大小。

使用动画和幽灵

以下示例演示了JqueryUI的resize函数中两个选项animateghost的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-2,#resizable-3 { 
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id = "resizable-2" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id = "resizable-3" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm ghost!!</h3>
      </div> 
   </body>
</html>

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

新页面打开

拖动方形边框以调整大小并查看动画和幻影选项的效果。

使用containment,minHeight和minWidth

以下示例演示了JqueryUI的resize函数中三个选项containmentminHeightminWidth的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #container-1 { width: 300px; height: 300px; }
         #resizable-4 {background-position: top left; 
            width: 150px; height: 150px; } 
         #resizable-4, #container { padding: 0.5em; }  
      </style>
      <script>
         $(function() {
            $( "#resizable-4" ).resizable({
               containment: "#container",
               minHeight: 70,
               minWidth: 100
            });
         });
      </script>
   </head>
   <body>
      <div id = "container" class = "ui-widget-content">
         <div id = "resizable-4" class = "ui-state-active">
            <h3 class = "ui-widget-header">
               Resize contained to this container
            </h3>
         </div>
      </div> 
   </body>
</html>

让我们将上述代码保存在HTML文件resizeexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

拖动方形边框以调整大小,您无法在主容器之外调整大小。

使用延迟,距离和自动隐藏

以下示例演示了JqueryUI的resize函数中三个选项delaydistanceautoHide的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>
      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });
            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>
   <body>
      <div id = "resizable-5" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id = "resizable-6" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id = "resizable-7" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

让我们将上述代码保存在HTML文件resizeexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

拖动方形边框以调整大小,您可以注意到 -

  • 第一个方框在延迟1000ms后调整大小,

  • 鼠标移动40px后,第二个方框开始调整大小。

  • 将鼠标悬停在第三个方框上,会出现放大图标。

使用alsoResize

以下示例演示了在alsoResize的resize函数中使用选项alsoResize。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id = "resizable-8" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize!!</h3>
      </div><br>
      <div id = "resizable-9" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

让我们将上述代码保存在HTML文件resizeexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

拖动方形边框以调整大小,您可以注意到第二个方框也会使用第一个方框调整大小。

使用AspectRatio,Grid

以下示例演示了aspectRatio的resize函数中选项aspectRatiogrid的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>
      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10/3
            });
            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });
         });
      </script>
   </head>
   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>

让我们将上述代码保存在HTML文件resizeexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

拖动方形边框以调整大小,第一个方框调整大小,宽高比为10/3,第二个方框调整大小为[50,20]。

$ (selector, context).resizable(“action”,params)方法

resizable ("action", params)方法可以对可调整大小的元素执行操作,例如允许或阻止调整大小功能。 该操作在第一个参数中指定为字符串(例如,“禁用”以防止调整大小)。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No. 行动和描述
1 destroy

此操作会完全破坏元素的可调整大小的功能。 这将使元素返回到pre-init状态。

Action - destroy

此操作完全破坏了元素的可调整大小的功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

 $( ".selector" ).resizable("destroy");
2 disable

此操作会禁用元素的大小调整功能。 此方法不接受任何参数。

Action - disable

此操作会禁用元素的大小调整功能。 此方法不接受任何参数。

Syntax

 $( ".selector" ).resizable("disable");
3 enable

此操作启用元素的大小调整功能。 此方法不接受任何参数。

Action - enable

此操作启用元素的大小调整功能。 此方法不接受任何参数。

Syntax

$( ".selector" ).resizable("enable");
4 option( optionName )

此操作检索指定的optionName的值。 此选项对应于与resizable(选项)一起使用的选项之一。

Action - option( optionName )

此操作检索指定的optionName的值。 此选项对应于与resizable(选项)一起使用的选项之一。

Syntax

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
5 option()

获取一个对象,该对象包含表示当前可调整大小的选项哈希的键/值对。 这不接受任何参数。

Action - option()

获取一个对象,该对象包含表示当前可调整大小的选项哈希的键/值对。 这不接受任何参数。

Syntax

 
var options = $( ".selector" ).resizable( "option" );
6 option( optionName, value )

此操作使用指定的optionName设置resizable选项的值。 此选项对应于与resizable(选项)一起使用的选项之一。

Action - option( optionName, value )

此操作使用指定的optionName设置resizable选项的值。 此选项对应于与resizable(选项)一起使用的选项之一。

Syntax

 
$( ".selector" ).resizable( "option", "disabled", true );
7 option( options )

此操作为可调整大小设置一个或多个选项。

Action - option( options )

此操作为可调整大小设置一个或多个选项。

Syntax

 
$( ".selector" ).resizable( "option", { disabled: true } );
8 widget()

此操作返回包含可调整大小元素的jQuery对象。 此方法不接受任何参数。

Action - widget()

此操作返回包含可调整大小元素的jQuery对象。 此方法不接受任何参数。

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了destroy()disable()方法的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');	
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id = "resizable-12" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id = "resizable-13" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

让我们将上面的代码保存在HTML文件resizeexample.htm ,并在支持javascript的标准浏览器中打开它,你应该看到以下输出 -

新页面打开

您无法调整第一个方框的大小,因为它已禁用,第二个方框也被销毁。

可调整大小元素的事件管理

除了我们在前面部分中看到的resizable(options)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No. 事件方法和描述
1 create(event, ui)

创建可调整大小的元素时会触发此事件。

Event - create(event, ui)

创建可调整大小的元素时会触发此事件。 其中eventEvent类型, uiObject类型。

Syntax

$( ".selector" ).resizable({
create: function( event, ui ) {}
});
2 resize(event, ui)

拖动可调整大小元素的处理程序时会触发此事件。

Event - resize(event, ui)

拖动可调整大小元素的处理程序时会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • element - 表示可调整大小元素的jQuery对象。

  • helper - 表示正在调整大小的帮助程序的jQuery对象。

  • originalElement - 表示包装前的原始元素的jQuery对象。

  • originalPosition - 在调整大小调整大小之前表示为{left,top}的位置。

  • originalSize - 调整大小调整大小之前表示为{width,height}的大小。

  • position - 当前位置表示为{left,top}。

  • size - 当前大小表示为{width,height}。

Syntax

$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
3 start(event, ui)

在调整大小操作开始时触发此事件。

Event - start(event, ui)

在调整大小操作开始时触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • element - 表示可调整大小元素的jQuery对象。

  • helper - 表示正在调整大小的帮助程序的jQuery对象。

  • originalElement - 表示包装前的原始元素的jQuery对象。

  • originalPosition - 在调整大小调整大小之前表示为{left,top}的位置。

  • originalSize - 调整大小调整大小之前表示为{width,height}的大小。

  • position - 当前位置表示为{left,top}。

  • size - 当前大小表示为{width,height}。

Syntax

$( ".selector" ).resizable({
 start: function( event, ui ) {}
});
4 stop(event, ui)

在调整大小操作结束时触发此事件。

Event - stop(event, ui)

在调整大小操作结束时触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • element - 表示可调整大小元素的jQuery对象。

  • helper - 表示正在调整大小的帮助程序的jQuery对象。

  • originalElement - 表示包装前的原始元素的jQuery对象。

  • originalPosition - 在调整大小调整大小之前表示为{left,top}的位置。

  • originalSize - 调整大小调整大小之前表示为{width,height}的大小。

  • position - 当前位置表示为{left,top}。

  • size - 当前大小表示为{width,height}。

Syntax

$( ".selector" ).resizable({
stop: function( event, ui ) {}
});

例子 (Example)

以下示例演示调整大小功能期间的事件方法用法。 此示例演示了使用事件createresize

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable 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>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-14{ width: 150px; height: 150px; 
         padding: 0.5em;text-align: center; margin: 0; }
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-14" ).resizable({
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },
               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

让我们将上面的代码保存在HTML文件resizeexample.htm ,并在支持javascript的标准浏览器中打开它,应该看到以下输出 -

新页面打开

拖动方框,您将看到输出显示在resize事件上。

JqueryUI - Selectable

jQueryUI提供了selectable()方法来单独或在组中选择DOM元素。 使用此方法,可以通过使用鼠标在元素上拖动框(有时称为套索)来选择元素。 此外,可以通过在按住Ctrl/Meta键的同时单击或拖动来选择元素,从而允许多个(非连续)选择。

语法 (Syntax)

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

$ (selector, context).selectable(options)方法

selectable (options)方法声明HTML元素包含可selectable (options)options参数是一个对象,它指定选择时涉及的元素的行为。

语法 (Syntax)

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

您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

下表列出了可与此方法一起使用的不同options -

Sr.No. 选项和说明
1 appendTo

此选项告诉应该将选择助手(套索)附加到哪个元素。 默认情况下,其值为body

Option - appendTo

此选项告诉应该将选择助手(套索)附加到哪个元素。 默认情况下,其值为body

Syntax

$( ".selector" ).selectable({ appendTo: "#identifier" });
2 autoRefresh

此选项如果设置为true ,则在选择操作开始时计算每个可选项的位置和大小。 默认情况下,其值为true

Option - autoRefresh

此选项如果设置为true ,则在选择操作开始时计算每个可选项的位置和大小。 默认情况下,其值为true 。 如果您有许多项目,则可能需要将其设置为false并手动调用refresh()方法。

Syntax

$( ".selector" ).selectable({ autoRefresh: false });
3 cancel

此选项禁止选择是否开始选择元素。 默认情况下,其值为input,textarea,button,select,option

Option - cancel

此选项禁止选择是否开始选择元素。 默认情况下,其值为input,textarea,button,select,option

Syntax

$( ".selector" ).selectable({ cancel: "a,.cancel" });
4 delay

此选项用于设置以毫秒为单位的时间,并定义何时开始选择。 这可用于防止不必要的选择。 默认情况下,其值为0

Option - delay

此选项用于设置以毫秒为单位的时间,并定义何时开始选择。 这可用于防止不必要的选择。 默认情况下,其值为0

Syntax

$( ".selector" ).selectable({ delay: 150 });
5 disabled

此选项设置为true时,禁用选择机制。 在使用可选择(“enable”)指令恢复机制之前,用户无法选择元素。 默认情况下,其值为false

Option - disabled

此选项设置为true时,禁用选择机制。 在使用可选择(“enable”)指令恢复机制之前,用户无法选择元素。 默认情况下,其值为false

Syntax

$( ".selector" ).selectable({ disabled: true });
6 distance

此选项是鼠标必须移动以考虑正在进行的选择的距离(以像素为单位)。 例如,这有助于防止简单点击被解释为组选择。 默认情况下,其值为0

Option - distance

此选项是鼠标必须移动以考虑正在进行的选择的距离(以像素为单位)。 例如,这有助于防止简单点击被解释为组选择。 默认情况下,其值为0

Syntax

$( ".selector" ).selectable({ distance: 30 });
7 filter

此选项是一个选择器,指示哪些元素可以作为选择的一部分。 默认情况下,其值为*

Option - filter

此选项是一个选择器,指示哪些元素可以作为选择的一部分。 默认情况下,其值为*

Syntax

$( ".selector" ).selectable({ filter: "li" });
8 tolerance

此选项指定用于测试选择助手(套索)是否应选择项目的模式。 默认情况下,其值为touch

Option - tolerance

此选项指定用于测试选择助手(套索)是否应选择项目的模式。 默认情况下,其值为touch

这可以是 -

  • fit - 此类型表示拖动选择必须完全包含要选择的元素。

  • touch - 此类型表示拖动矩形只需要与可选项的任何部分相交。

Syntax

$( ".selector" ).selectable({ tolerance: "fit" });

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

默认功能

以下示例演示了可选功能的简单示例,不向selectable()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-1</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>
         #selectable-1 .ui-selecting { background: #707070 ; }
         #selectable-1 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-1 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-1" ).selectable();
         });
      </script>
   </head>
   <body>
      <ol id = "selectable-1">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol> 
   </body>
</html>

让我们将上述代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

尝试单击产品,使用CTRLS键选择多个产品。

使用延迟和距离

以下示例演示了JqueryUI的可选功能中两个选项delaydistance的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</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>
         #selectable-2 .ui-selecting,#selectable-3 .ui-selecting { 
            background: #707070 ; }
         #selectable-2 .ui-selected,#selectable-3 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-2,#selectable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-2" ).selectable({
               delay : 1000
            });
            $( "#selectable-3" ).selectable({
               distance : 100
            });
         });
      </script>
   </head>
   <body>
      <h3>Starts after delay of 1000ms</h3>
      <ol id = "selectable-2">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Starts after mouse moves distance of 100px</h3>
      <ol id = "selectable-3">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

让我们将上述代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

尝试单击产品,使用CTRL键选择多个产品。 您会注意到产品1,产品2和产品3的选择在延迟1000ms后开始。 产品4,产品5,产品6和产品7的选择不能单独进行。 只有在鼠标移动100px的距离后才会开始选择。

使用过滤器

以下示例演示了JqueryUI的可选功能中两个选项delaydistance的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-4</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>
         #selectable-4 .ui-selecting { background: #707070 ; }
         #selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-4 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-4" ).selectable({
               filter : "li:first-child"
            });
         });
      </script>
   </head>
   <body>
      <ol id = "selectable-4">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

让我们将上述代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

尝试点击产品。 您会注意到只能选择第一个产品。

$ (selector, context).selectable(“action”,params)方法

selectable ("action", params)方法可以对可选元素执行动作,例如防止可选功能。 该操作在第一个参数中指定为字符串(例如,“禁用”以停止选择)。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No. 行动和描述
1 destroy

此操作完全删除元素的可选功能。 元素返回到pre-init状态。

Action - destroy

此操作完全删除元素的可选功能。 元素返回到pre-init状态。

Syntax

$( ".selector" ).selectable("destroy");
2 disable

此操作将停用元素的可选功能。 此方法不接受任何参数。

Action - disable

此操作完全删除元素的可选功能。 元素返回到pre-init状态。

Syntax

$( ".selector" ).selectable("disable");
3 enable

此操作启用元素的可选功能。 此方法不接受任何参数。

Action - enable

此操作启用元素的可选功能。 此方法不接受任何参数。

Syntax

$( ".selector" ).selectable("enable");
4 option( optionName )

此操作获取当前与指定的optionName关联的值。

Action - option( optionName )

此操作获取当前与指定的optionName关联的值。

Syntax

var isDisabled = $( ".selector" ).selectable( "option", "disabled" );
5 option()

此操作获取一个对象,其中包含表示当前可选选项哈希的键/值对。

Action - option()

此操作获取一个对象,其中包含表示当前可选选项哈希的键/值对。

Syntax

var options = $( ".selector" ).selectable( "option" );
6 option( optionName, value )

此操作设置与指定的optionName关联的可选选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

Action - option( optionName, value )

此操作设置与指定的optionName关联的可选选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

Syntax

$( ".selector" ).selectable( "option", "disabled", true );
7 option( options )

此操作为可选项设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

Action - option( options )

此操作为可选项设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

Syntax

$( ".selector" ).selectable( "option", { disabled: true } );
8 refresh

此操作会导致刷新可选元素的大小和位置。 主要用于禁用autoRefresh选项(设置为false )。 此方法不接受任何参数。

Action - refresh

此操作会导致刷新可选元素的大小和位置。 主要在禁用autoRefresh选项时使用。 此方法不接受任何参数。

Syntax

$( ".selector" ).selectable("refresh");
9 widget

此操作返回包含可选元素的jQuery对象。 此方法不接受任何参数。

Action - widget

此操作返回包含可选元素的jQuery对象。 此方法不接受任何参数。

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了disable()option( optionName, value )方法的option( optionName, value )

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Selectable</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>
         #selectable-5 .ui-selecting,#selectable-6 .ui-selecting { 
            background: #707070 ; }
         #selectable-5 .ui-selected,#selectable-6 .ui-selected { 
            background: #EEEEEE; color: #000000; }
         #selectable-5,#selectable-6 { 
            list-style-type: none; margin: 0; padding: 0; width: 20%; }
         #selectable-5 li,#selectable-6 li { 
            margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-5" ).selectable();
            $( "#selectable-5" ).selectable('disable');
            $( "#selectable-6" ).selectable();
            $( "#selectable-6" ).selectable( "option", "distance", 1 );	
         });
      </script>
   </head>
   <body>
      <h3>Disabled using disable() method</h3>
      <ol id = "selectable-5">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
      </ol>
      <h3>Select using method option( optionName, value )</h3>
      <ol id = "selectable-6">
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
   </body>
</html>

让我们将上面的代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它,你应该看到以下输出 -

新页面打开

尝试单击产品,使用CTRL键选择多个产品。 您会注意到禁用了产品1,产品2和产品3。 产品4,产品5,产品6和产品7的选择发生在鼠标移动距离为1px之后。

可选元素的事件管理

除了我们在前面部分中看到的selectable(options)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No. 事件方法和描述
1 create(event, ui)

创建可选元素时会触发此事件。 其中eventEvent类型, uiObject类型。

Event - create(event, ui)

创建可选元素时会触发此事件。 其中eventEvent类型, uiObject类型。

Syntax

$( ".selector" ).selectable({
   create: function( event, ui ) {}
});
2 selected(event, ui)

为每个被选中的元素触发此事件。 其中eventEvent类型, uiObject类型。

Event - selected(event, ui)

为每个被选中的元素触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • selected - 指定已选择的可选项目。

Syntax

$( ".selector" ).selectable({
   selected: function( event, ui ) {}
});
3 selecting(event, ui)

将为即将被选中的每个可选元素触发此事件。 其中eventEvent类型, uiObject类型。

Event - selecting(event, ui)

将为即将被选中的每个可选元素触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • selecting - 指定对即将被选中的元素的引用。

Syntax

$( ".selector" ).selectable({
   selecting: function( event, ui ) {}
});
4 start(event, ui)

此事件在选择操作开始时触发。 其中eventEvent类型, uiObject类型。

Event - start(event, ui)

此事件在选择操作开始时触发。 其中eventEvent类型, uiObject类型。

Syntax

$( ".selector" ).selectable({
   start: function( event, ui ) {}
});
5 stop(event, ui)

此事件在选择操作结束时触发。 其中eventEvent类型, uiObject类型。

Event - stop(event, ui)

此事件在选择操作结束时触发。 其中eventEvent类型, uiObject类型。

Syntax

$( ".selector" ).selectable({
   stop: function( event, ui ) {}
});
6 unselected(event, ui)

对于未选中的每个元素,在选择操作结束时触发此事件。 其中eventEvent类型, uiObject类型。

Event - unselected(event, ui)

对于未选中的每个元素,在选择操作结束时触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • unselected - 包含对已取消选择的元素的引用的元素。

Syntax

$( ".selector" ).selectable({
   unselected: function( event, ui ) {}
});
7 unselecting(event, ui)

在选择操作期间,将针对即将取消选择的每个所选元素触发此事件。 其中eventEvent类型, uiObject类型。

Event - unselecting(event, ui)

在选择操作期间,将针对即将取消选择的每个所选元素触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • unselecting - 一个元素,包含对即将unselecting的元素的引用。

Syntax

$( ".selector" ).selectable({
   unselecting: function( event, ui ) {}
});

例子 (Example)

以下示例演示了可选功能期间的事件方法用法。 此示例演示了selected事件的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI selectable-7</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>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #EEEEEE; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " #" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>
   <body>
      <h3>Events</h3>
      <ol id = "selectable-7">
         <li class = "ui-widget-content">Product 1</li>
         <li class = "ui-widget-content">Product 2</li>
         <li class = "ui-widget-content">Product 3</li>
         <li class = "ui-widget-content">Product 4</li>
         <li class = "ui-widget-content">Product 5</li>
         <li class = "ui-widget-content">Product 6</li>
         <li class = "ui-widget-content">Product 7</li>
      </ol>
      <span class = "resultarea">Selected Product</span>>
      <span id = result class = "resultarea"></span>
   </body>
</html>

让我们将上面的代码保存在HTML文件selectableexample.htm ,并在支持javascript的标准浏览器中打开它,你应该看到以下输出 -

新页面打开

尝试单击产品,使用CTRL键选择多个产品。 您会注意到所选的产品编号打印在底部。

JqueryUI - Sortable

jQueryUI提供了sortable()方法,可以使用鼠标对列表或网格中的元素进行重新排序。 此方法基于作为第一个参数传递的操作字符串执行可排序性操作。

语法 (Syntax)

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

$(selector,context).sortable(options)方法

sortable (options)方法声明HTML元素包含可互换元素。 options参数是一个对象,它指定重新排序期间涉及的元素的行为。

语法 (Syntax)

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

下表列出了可与此方法一起使用的不同options -

Sr.No. 选项和说明
1 appendTo

此选项指定在移动/拖动期间插入使用options.helper创建的新元素的元素。 默认情况下,其值为parent

Option - appendTo

此选项指定在移动/拖动期间插入使用options.helper创建的新元素的元素。 默认情况下,其值为parent

这可以是 -

  • Selector - 这表示一个选择器,指定将助手附加到哪个元素。

  • jQuery - 这表示一个jQuery对象,其中包含要将助手附加到的元素。

  • Element - 文档对象模型(DOM)中用于附加帮助程序的元素。

  • String - 字符串“parent”将使帮助程序成为可排序项的兄弟。

Syntax

$(".selector").sortable(
   { appendTo: document.body }
);
2 axis

此选项表示移动轴(“x”是水平的,“y”是垂直的)。 默认情况下,其值为false

Option - axis

此选项表示移动轴(“x”是水平的,“y”是垂直的)。 默认情况下,其值为false

Syntax

$(".selector").sortable(
   { axis: "x" }
);
3 cancel

此选项用于通过单击任何选择器元素来防止对元素进行排序。 默认情况下,其值为"input,textarea,button,select,option"

Option - cancel

此选项用于通过单击任何选择器元素来防止对元素进行排序。 默认情况下,其值为"input,textarea,button,select,option"

Syntax

$(".selector").sortable(
   { cancel: "a,button" }
);
4 connectWith

此选项是一个选择器,用于标识可以接受此可排序项的另一个可排序元素。 这允许将来自一个列表的项目移动到其他列表,这是频繁且有用的用户交互。 如果省略,则不连接其他元素。 这是一种单向关系。 默认情况下,其值为false

Option - connectWith

此选项是一个选择器,用于标识可以接受此可排序项的另一个可排序元素。 这允许将来自一个列表的项目移动到其他列表,这是频繁且有用的用户交互。 如果省略,则不连接其他元素。 这是一种单向关系。 默认情况下,其值为false

Syntax

$(".selector").sortable(
   { connectWith: "#identifier" }
);
5 containment

此选项表示发生位移的元素。 元素将由选择器(仅考虑列表中的第一项),DOM元素或字符串“parent”(父元素)或“window”(HTML页面)表示。

Option - containment

此选项表示发生位移的元素。

这可以是 -

  • Selector - 这表示选择器。 元素将由选择器表示(仅考虑列表中的第一项)

  • Element - 用作容器的DOM元素。

  • String - 标识要用作容器的元素的字符串。 可能的值是parent (父元素), documentwindow (HTML页面)。

Syntax

$(".selector").sortable(
   { containment: "parent" }
);
6 cursor

元素移动时指定游标CSS属性。 它代表鼠标指针的形状。 默认情况下,其值为“auto”。

Option - cursor

元素移动时指定游标CSS属性。 它代表鼠标指针的形状。 默认情况下,其值为“auto”。 可能的值是 -

  • "crosshair" (across)
  • “默认”(箭头)
  • "pointer" (hand)
  • "move" (two arrows cross)
  • “电子调整大小”(向右扩展)
  • “ne-resize”(向右扩展)
  • “nw-resize”(向左扩展)
  • "n-resize" (expand up)
  • “se-resize”(向下扩展)
  • “sw-resize”(向左扩展)
  • “s-resize”(向下扩展)
  • “自动”(默认)
  • "w-resize" (expand left)
  • “text”(指向写文本的指针)
  • "wait" (hourglass)
  • "help" (help pointer)

Syntax

$(".selector").sortable(
   { cursor: "move" }
);
7 cursorAt

设置拖动助手相对于鼠标光标的偏移量。 坐标可以使用一个或两个键的组合作为哈希值给出:{top,left,right,bottom}。 默认情况下,其值为“false”。

Option - cursorAt

设置拖动助手相对于鼠标光标的偏移量。 坐标可以使用一个或两个键的组合作为哈希值给出:{top,left,right,bottom}。 默认情况下,其值为“false”。

Syntax

$(".selector").sortable(
   { cursorAt: { left: 5 } }
);
8 delay

延迟,以毫秒为单位,在此之后考虑鼠标的第一次移动。 在此之后可能开始移位。 默认情况下,其值为“0”。

Option - delay

延迟,以毫秒为单位,在此之后考虑鼠标的第一次移动。 在此之后可能开始移位。 默认情况下,其值为“0”。

Syntax

$(".selector").sortable(
   { delay: 150 }
);
9 disabled

此选项如果设置为true ,则禁用可排序功能。 默认情况下,其值为false

Option - disabled

此选项如果设置为true ,则禁用可排序功能。 默认情况下,其值为false

Syntax

$(".selector").sortable(
   { disabled: true }
);
10 distance

排序开始前鼠标必须移动的像素数。 如果指定,则在鼠标拖动到距离之后才会开始排序。 默认情况下,其值为“1”。

Option - distance

排序开始前鼠标必须移动的像素数。 如果指定,则在鼠标拖动到距离之后才会开始排序。 默认情况下,其值为“1”。

Syntax

$(".selector").sortable(
   { distance: 5 }
);
11 dropOnEmpty

如果此选项设置为false ,则无法在空连接可排序上删除此可排序项中的项。 默认情况下,其值为true

Option - dropOnEmpty

如果此选项设置为false ,则无法在空连接可排序上删除此可排序项中的项。 默认情况下,其值为true

Syntax

$(".selector").sortable(
   { dropOnEmpty: false }
);
12 forceHelperSize

如果此选项设置为true强制帮助程序具有大小。 默认情况下,其值为false

Option - forceHelperSize

如果此选项设置为true强制帮助程序具有大小。 默认情况下,其值为false

Syntax

$(".selector").sortable(
   { forceHelperSize: true }
);
13 forcePlaceholderSize

设置为true ,此选项会在移动项目时考虑占位符的大小。 此选项仅在初始化options.placeholder有用。 默认情况下,其值为false

Option - forcePlaceholderSize

设置为true ,此选项会在移动项目时考虑占位符的大小。 此选项仅在初始化options.placeholder有用。 默认情况下,其值为false

Syntax

$(".selector").sortable(
   { forcePlaceholderSize: true }
);
14 grid

此选项是一个Array [x,y],表示排序元素在移动鼠标时水平和垂直移动的像素数。 默认情况下,其值为false

Option - grid

此选项是一个Array [x,y],表示排序元素在移动鼠标时水平和垂直移动的像素数。 默认情况下,其值为false

Syntax

$(".selector").sortable(
   { grid: [ 20, 10 ] }
);
15 handle

如果指定,则限制排序从启动,除非mousedown发生在指定的元素上。 默认情况下,其值为false

Option - handle

如果指定,则限制排序从启动,除非mousedown发生在指定的元素上。 默认情况下,其值为false

Syntax

$(".selector").sortable(
   { handle: ".handle" }
);
16 helper

允许使用辅助元素拖动显示。 默认情况下,其值为original值。

Option - helper

允许使用辅助元素拖动显示。 默认情况下,其值为original值。 可能的值是 -

  • String - 如果设置为“clone”,则将克隆该元素并拖动克隆。

  • Function - 将在拖动时返回要使用的DOMElement的函数。

Syntax

$(".selector").sortable(
   { helper: "clone" }
);
17 items

此选项指定要对DOM元素中的哪些项进行排序。 默认情况下,其值为》 *

Option - items

此选项指定要对DOM元素中的哪些项进行排序。 默认情况下,其值为》 *

Syntax

$(".selector").sortable(
   { items: "> li" }
);
18 opacity

此选项用于在排序时定义帮助程序的不透明度。 默认情况下,其值为false

Option - opacity

此选项用于在排序时定义帮助程序的不透明度。 默认情况下,其值为false

Syntax

$(".selector").sortable(
   { opacity: 0.5 }
);
19 placeholder

此选项用于应用于其他空白区域的类名。默认情况下,其值为false

Option - placeholder

Syntax

$(".selector").sortable(
   { addClasses: false }
);
20 revert

此选项决定可排序项目是否应使用平滑动画恢复到新位置。 默认情况下,其值为false

Option - revert

此选项决定可排序项目是否应使用平滑动画恢复到新位置。 默认情况下,其值为false

Syntax

$(".selector").sortable(
   { revert: true }
);
21 scroll

此选项用于启用滚动。 如果设置为true ,页面在到达边缘时会滚动。 默认情况下,其值为true

Option - scroll

此选项用于启用滚动。 如果设置为true ,页面在到达边缘时会滚动。 默认情况下,其值为true

Syntax

$(".selector").sortable(
   { scroll: false }
);
22 scrollSensitivity

此选项指示鼠标必须离开可见区域以引起滚动的像素数。 默认情况下,其值为20 。 此选项仅用于options.scroll设置为true。

Option - scrollSensitivity

此选项指示鼠标必须离开可见区域以引起滚动的像素数。 默认情况下,其值为20 。 此选项仅用于options.scroll设置为true。

Syntax

$(".selector").sortable(
   { scrollSensitivity: 10 }
);
23 scrollSpeed

此选项表示滚动开始后显示器的滚动速度。 默认情况下,其值为20

Option - scrollSpeed

此选项表示滚动开始后显示器的滚动速度。 默认情况下,其值为20

Syntax

$(".selector").sortable(
   { scrollSpeed: 40 }
);
24 tolerance

此选项是一个String ,指定用于测试正在移动的项目是否悬停在另一个项目上的模式。 默认情况下,其值为"intersect"

Option - tolerance

此选项是一个String ,指定用于测试正在移动的项目是否悬停在另一个项目上的模式。 默认情况下,它的值是"intersect"值是 -

  • intersect - 项目与其他项目重叠至少50%。

  • pointer - 鼠标指针与其他项重叠。

Syntax

$(".selector").sortable(
   { tolerance: "pointer" }
);
25 zIndex

此选项表示元素/帮助程序在排序时的z-index。 默认情况下,其值为1000

Option - zIndex

此选项表示元素/帮助程序在排序时的Z-index。 默认情况下,其值为1000

Syntax

$(".selector").sortable(
   { zIndex: 9999 }
);

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

默认的功能 (Default functionality)

以下示例演示了可排序功能的简单示例,不向sortable()方法传递任何参数。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - 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>
         #sortable-1 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#sortable-1" ).sortable();
         });
      </script>
   </head>
   <body>
      <ul id = "sortable-1">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

让我们将上面的代码保存在HTML文件sortexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

重新安排上面的产品,用鼠标拖动物品。

使用选项延迟和距离

以下示例演示了JqueryUI的sort函数中三个选项(a) delay(b) distance的使用。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - 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>
         #sortable-2, #sortable-3 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#sortable-2" ).sortable({
               delay:500
            });
            $( "#sortable-3" ).sortable({
               distance:30
            });
         });
      </script>
   </head>
   <body>
      <h3>Delay by 500ms</h3>
      <ul id = "sortable-2">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
      <h3>Distance Delay by 30px</h3>
      <ul id = "sortable-3">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
      </ul>
   </body>
</html>

让我们将上面的代码保存在HTML文件sortexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

重新安排上面的产品,用鼠标拖动物品。 为了防止延迟(时间)或距离意外排序,我们设置了在使用delay选项开始排序之前需要拖动元素的毫秒数。 我们还设置了一个距离,以像素为单位,在使用distance选项排序之前需要拖动元素。

使用占位符

以下示例演示了JqueryUI的sort函数中三个选项placeholder的用法。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - 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>
         #sortable-4 { list-style-type: none; margin: 0; 
            padding: 0; width: 25%; }
         #sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid red;
            font-weight: bold;
            font-size: 45px;
            background-color: #333333;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#sortable-4" ).sortable({
               placeholder: "highlight"
            });
         });
      </script>
   </head>
   <body>
      <ul id = "sortable-4">
         <li class = "default">Product 1</li>
         <li class = "default">Product 2</li>
         <li class = "default">Product 3</li>
         <li class = "default">Product 4</li>
         <li class = "default">Product 5</li>
         <li class = "default">Product 6</li>
         <li class = "default">Product 7</li>
      </ul>
   </body>
</html>

让我们将上面的代码保存在HTML文件sortexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

尝试拖动项目以重新排列它们,当您拖动项目时,占位符(我们使用highlight类来设置此空间的样式)将显示在可用位置。

使用Options Connectwith和Droponempty

以下示例演示了(b) dropOnEmpty的sort函数中三个选项(a) connectWith(b) dropOnEmpty的用法。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - 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>
         #sortable-5, #sortable-6,#sortable-7 { 
            list-style-type: none; margin: 0; padding: 0;
            width: 20%;float:left }
         #sortable-5 li, #sortable-6 li,#sortable-7 li { 
            margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $( "#sortable-5, #sortable-6" ).sortable({
               connectWith: "#sortable-5, #sortable-6"
            });
            $( "#sortable-7").sortable({
               connectWith: "#sortable-5",
               dropOnEmpty: false
            });
         });
      </script>
   </head>
   <body>
      <ul id = "sortable-5"><h3>List 1</h3>
         <li class = "default">A</li>
         <li class = "default">B</li>
         <li class = "default">C</li>
         <li class = "default">D</li>
      </ul>
      <ul id = "sortable-6"><h3>List 2</h3>
         <li class = "default">a</li>
         <li class = "default">b</li>
         <li class = "default">c</li>
         <li class = "default">d</li>
      </ul>
      <ul id = "sortable-7"><h3>List 3</h3>
         <li class = "default">e</li>
         <li class = "default">f</li>
         <li class = "default">g</li>
         <li class = "default">h</li>
      </ul>
   </body>
</html>

让我们将上面的代码保存在HTML文件sortexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

通过将选择器传递给connectWith选项,将项目从一个List1排序到另一个(List2),反之亦然。 这是通过将所有相关列表与CSS类分组,然后将该类传递给可排序函数(即connectWith:'#sortable-5,#sortable-6')来完成的。

尝试将列表3下的项目拖动到列表2或列表1.由于我们已将dropOnEmpty选项设置为false ,因此无法删除这些项目。

$ (selector, context).sortable(“action”,[params])方法

sortable (action, params)方法可以对可排序元素执行操作,例如防止置换。 该action在第一个参数中指定为字符串,并且可选地,可以基于给定的操作提供一个或多个params

基本上,这里的操作只不过是jQuery方法,我们可以以字符串的形式使用它们。

语法 (Syntax)

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

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

Sr.No. 行动和描述
1 cancel()

此操作取消当前的排序操作。 这在排序接收和排序停止事件的处理程序中最有用。 此方法不接受任何参数。

Action - cancel()

取消当前的排序操作。 这在排序接收和排序停止事件的处理程序中最有用。 此方法不接受任何参数。

Syntax

$(".selector").sortable("cancel");
2 destroy()

此操作完全删除了可排序功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy()

此操作完全删除了可排序功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

$(".selector").sortable("destroy");
3 disable()

此操作会禁用包装集中任何可排序元素的可排序性。 不会删除元素的可排序性,可以通过调用此方法的enable变量来恢复。 此方法不接受任何参数。

Action - disable()

此操作会禁用包装集中任何可排序元素的可排序性。 不会删除元素的可排序性,可以通过调用此方法的enable变量来恢复。 此方法不接受任何参数。

Syntax

$(".selector").sortable("disable");
4 enable()

重新启用已排除其可排序性的已包装集中的任何可排序元素的可排序性。 请注意,此方法不会向任何不可排序的元素添加可排序性。 此方法不接受任何参数。

Action - enable()

重新启用已排除其可排序性的已包装集中的任何可排序元素的可排序性。 请注意,此方法不会向任何不可排序的元素添加可排序性。 此方法不接受任何参数。

Syntax

$(".selector").sortable("enable");
5 option( optionName )

此操作获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称。

Action - option( optionName )

此操作获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称。

Syntax

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
6 option()

获取一个对象,该对象包含表示当前可排序选项哈希的键/值对。此方法不接受任何参数。

Action - option()

获取一个对象,该对象包含表示当前可排序选项哈希的键/值对。此方法不接受任何参数。

Syntax

$(".selector").sortable("option");
7 option( optionName, value )

此操作设置与指定的optionName关联的可排序选项的值。 其中optionName是要设置的选项的名称, value是要为该选项设置的值。

Action - option( optionName, value )

此操作设置与指定的optionName关联的可排序选项的值。 其中optionName是要设置的选项的名称, value是要为该选项设置的值。

Syntax

$(".selector").sortable("option", "disabled", true);
8 option( options )

为可排序设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Action - option( options )

为可排序设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Syntax

$( ".selector" ).sortable( "option", { disabled: true } );
9 refresh()

如有必要,此操作将刷新项目列表。 此方法不接受任何参数。 调用此方法将导致添加到sortable的新项目被识别。

Action - refresh()

如有必要,此操作将刷新项目列表。 此方法不接受任何参数。 调用此方法将导致添加到sortable的新项目被识别。

Syntax

$(".selector").sortable("refresh");
10 toArray( options )

此方法按排序顺序返回可排序元素的id值数组。 此方法将Options作为参数,以自定义序列化或排序顺序。

Action - toArray( options )

此方法按排序顺序返回可排序元素的id值数组。 此方法将Options作为参数,以自定义序列化或排序顺序。

Syntax

var sortedIDs = $( ".selector" ).sortable( "toArray" );
11 serialize( options )

此方法返回由sortable形成的序列化查询字符串(通过Ajax提交)。

Action - serialize( options )

此方法返回由sortable形成的序列化查询字符串(通过Ajax提交)。 默认情况下,它通过查看“setname_number”格式的每个项目的ID来工作,并且它会发出类似“setname [] = number&setname [] = number”的哈希值。

Syntax

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
12 refreshPositions()

此方法主要用于内部刷新可排序的缓存信息。 此方法不接受任何参数。

Action - refreshPositions()

此方法主要用于内部刷新可排序的缓存信息。 此方法不接受任何参数。

Syntax

$(".selector").sortable("refreshPositions");
13 widget()

此方法返回包含可排序元素的jQuery对象。 此方法不接受任何参数。

Action - widget()

此方法返回包含可排序元素的jQuery对象。 此方法不接受任何参数。

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了toArray( options )方法的用法。

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - 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>
         #sortable-8{ list-style-type: none; margin: 0; 
            padding: 0; width: 25%; float:left;}
         #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
            padding-left: 1.5em; font-size: 17px; height: 16px; }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
      </style>
      <script>
         $(function() {
            $('#sortable-8').sortable({
               update: function(event, ui) {
                  var productOrder = $(this).sortable('toArray').toString();
                  $("#sortable-9").text (productOrder);
               }
            });
         });
      </script>
   </head>
   <body>
      <ul id = "sortable-8">
         <li id = "1" class = "default">Product 1</li>
         <li id = "2" class = "default">Product 2</li>
         <li id = "3" class = "default">Product 3</li>
         <li id = "4" class = "default">Product 4</li>
      </ul>
      <br>
      <h3><span id = "sortable-9"></span></h3>
   </body>
</html>

让我们将上面的代码保存在HTML文件sortexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

尝试对项目进行排序,项目的顺序显示在底部。 这里我们调用$(this).sortable('toArray').toString() ,它将给出所有项ID的字符串列表,它可能看起来像1,2,3,4

可排序元素的事件管理

除了我们在前面部分中看到的sortable(options)方法之外,JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -

Sr.No. 事件方法和描述
1 activate(event, ui)

当在连接的可排序上启动排序操作时,将在可排序上触发此事件。

Event - activate(event, ui)

当在连接的可排序上启动排序操作时,将在可排序上触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   activate: function( event, ui ) {}
});
2 beforeStop(event, ui)

排序操作即将结束时触发此事件,其中助手和占位符元素引用仍然有效。

Event - beforeStop(event, ui)

排序操作即将结束时触发此事件,其中助手和占位符元素引用仍然有效。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   beforeStop: function( event, ui ) {}
});
3 change(event, ui)

当已排序元素更改DOM中的位置时,将触发此事件。

Event - change(event, ui)

当已排序元素更改DOM中的位置时,将触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   change: function( event, ui ) {}
});
4 create(event, ui)

创建sortable时会触发此事件。

Event - create(event, ui)

创建sortable时会触发此事件。 其中eventEvent类型, uiObject类型。 The ui object is empty but included for consistency with other events.

Syntax

$( ".selector" ).sortable({
   create: function( event, ui ) {}
});
5 deactivate(event, ui)

当连接的排序停止,传播到连接的可排序时,将触发此事件。

Event - deactivate(event, ui)

当连接的排序停止,传播到连接的可排序时,将触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   deactivate: function( event, ui ) {}
});
6 out(event, ui)

当排序项远离连接列表时,将触发此事件。

Event - out(event, ui)

当排序项远离连接列表时,将触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   out: function( event, ui ) {}
});
7 over(event, ui)

当排序项移动到连接列表时,将触发此事件。

Event - over(event, ui)

当排序项移动到连接列表时,将触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   over: function( event, ui ) {}
});
8 receive(event, ui)

当连接列表从另一个列表收到排序项时,将触发此事件。

Event - receive(event, ui)

当连接列表从另一个列表收到排序项时,将触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   receive: function( event, ui ) {}
});
9 remove(event, ui)

从连接列表中删除排序项并将其拖入另一个列表时,将触发此事件。

Event - remove(event, ui)

从连接列表中删除排序项并将其拖入另一个列表时,将触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   remove: function( event, ui ) {}
});
10 sort(event, ui)

在排序操作期间,针对mousemove事件重复触发此事件。

Event - sort(event, ui)

在排序操作期间,针对mousemove事件重复触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   sort: function( event, ui ) {}
});
11 start(event, ui)

排序操作开始时会触发此事件。

Event - start(event, ui)

排序操作开始时会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   start: function( event, ui ) {}
});
12 stop(event, ui)

排序操作结束时会触发此事件。

Event - stop(event, ui)

排序操作结束时会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   stop: function( event, ui ) {}
});
13 update(event, ui)

当排序操作停止并且项目的位置已更改时,将触发此事件。

Event - update(event, ui)

当排序操作停止并且项目的位置已更改时,将触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • helper - 表示正在排序的帮助程序的jQuery对象。

  • item - 表示当前拖动元素的jQuery对象。

  • offset - 帮助器的当前绝对位置,表示为{top,left} ..

  • position - 帮助程序的当前CSS位置{top,left}对象。

  • originalPosition - 元素的原始位置,表示为{top,left}。

  • sender - 如果从一个可排序项移动到另一个可排序项,则该项可以排序。

  • placeholder - 表示用作占位符的元素的jQuery对象。

Syntax

$( ".selector" ).sortable({
   update: function( event, ui ) {}
});

例子 (Example)

以下示例演示了删除功能期间的事件方法用法。 此示例演示了事件receivestartstop

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Sortable - 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>
         #sortable-10, #sortable-11 { list-style-type: none; 
            margin: 0; padding: 0; width: 80%; }
         #sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px; 
            padding: 0.4em; padding-left: 1.5em; 
            font-size: 17px; height: 16px; }
         .highlight {
            border: 1px solid #000000;
            font-weight: bold;
            font-size: 45px;
            background-color: #cedc98;
         }
         .default {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .wrap {
            display: table-row-group;
         }
         .wrap1 {
            float:left;
            width: 100px;
         }
      </style>
      <script>
         $(function() {
            $( "#sortable-10" ).sortable({
               start: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>start</b><br>");
               },
               receive : function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + ", receive");
               },
               stop: function (event, ui) {
                  $("span#result").html ($("span#result").html () 
                     + "<b>stop</b><br>");
               }
            });
            $( "#sortable-11" ).sortable({
               connectWith : "#sortable-10, #sortable-11"
            });
         });
      </script>
   </head>
   <body>
      <div class = "wrap">
         <div class = "wrap1"> 
            <h3>List 1</h3>
            <ul id = "sortable-10">
               <li class = "default">A</li>
               <li class = "default">B</li>
               <li class = "default">C</li>
               <li class = "default">D</li>
            </ul>
         </div>
         <div class = "wrap1">
            <h3>List 2</h3> 
            <ul id = "sortable-11">
               <li class = "default">a</li>
               <li class = "default">b</li>
               <li class = "default">c</li>
               <li class = "default">d</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

让我们将上面的代码保存在HTML文件sortexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

尝试对列表1中的项目进行排序,您将看到在事件的start和结束时显示的消息。 现在将项目从列表2中删除到列表1,再次在receive事件上显示一条消息。

JqueryUI - Accordion

jQueryUI中的Accordion Widget是一个基于jQuery的可扩展和可折叠内容持有者,它被分成几个部分,可能看起来像标签。 jQueryUI提供了accordion()方法来实现这一点。

语法 (Syntax)

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

$(selector,context).accordion(options)方法

accordion (options)方法声明应将HTML元素及其内容作为手风琴菜单进行处理和管理。 options参数是一个对象,它指定所涉及菜单的外观和行为。

语法 (Syntax)

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

您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

下表列出了可与此方法一起使用的不同options -

Sr.No. 选项和说明
1 active

指示首次访问页面时打开的菜单的索引。 默认情况下,其值为0 ,即第一个菜单。

Option - active

指示首次访问页面时打开的菜单的索引。 默认情况下,其值为0 ,即第一个菜单。

这可以是 -

  • Boolean - 如果设置为false将折叠所有面板。 这要求可折叠选项为true

  • Integer - 活动(打开)面板的从零开始的索引。 负值选择从最后一个面板向后移动的面板。

Syntax

$( ".selector" ).accordion(
   { active: 2 }
);
2 animate

此选项用于设置如何为更改面板设置动画。 默认情况下,其值为{}

Option - animate

此选项用于设置如何为更改面板设置动画。 默认情况下,其值为{}

这可以是 -

  • Boolean - 值false将禁用动画。

  • Number - 这是一个以毫秒为单位的持续时间

  • String - 默认持续时间使用的缓动名称。

  • Object - 具有缓动和持续时间属性的动画设置。

Syntax

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
3 collapsible

此选项设置为true ,允许用户通过单击关闭菜单。 默认情况下,打开面板标题上的单击无效。 默认情况下,其值为false

Option - collapsible

此选项设置为true ,允许用户通过单击关闭菜单。 默认情况下,打开面板标题上的单击无效。 默认情况下,其值为false

Syntax

$( ".selector" ).accordion(
   { collapsible: true }
);
4 disabled

设置为true时,此选项将禁用手风琴。 默认情况下,其值为false

Option - disabled

设置为true时,此选项将禁用手风琴。 默认情况下,其值为false

Syntax

$( ".selector" ).accordion(
   { disabled: true }
);
5 event

此选项指定用于选择手风琴标题的事件。 默认情况下,其值为click

Option - event

此选项指定用于选择手风琴标题的事件。 默认情况下,其值为click

Syntax

$( ".selector" ).accordion(
   { event: "mouseover" }
);
6 header

此选项指定一个选择器或元素,以覆盖用于标识标题元素的默认模式。 默认情况下,其值为》 li 》 :first-child,》 :not(li):even

Option - header

此选项指定一个选择器或元素,以覆盖用于标识标题元素的默认模式。 默认情况下,其值为》 li 》 :first-child,》 :not(li):even

Syntax

$( ".selector" ).accordion(
   { header: "h3" }
);
7 heightStyle

此选项用于控制手风琴和面板的高度。 默认情况下,其值为auto

Option - heightStyle

此选项用于控制手风琴和面板的高度。 默认情况下,其值为auto

可能的值是 -

  • auto - 所有面板将设置为最高面板的高度。

  • fill - 根据手风琴的父高度扩展到可用高度。

  • content - 每个面板仅与其内容一样高。

Syntax

$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
8 icons

此选项是一个对象,用于定义要在打开和关闭面板的标题文本左侧使用的图标。 用于关闭面板的图标被指定为名为header的属性,而用于打开面板的图标被指定为名为headerSelected的属性。 默认情况下,其值为{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }

Option - icons

此选项是一个对象,用于定义要在打开和关闭面板的标题文本左侧使用的图标。 用于关闭面板的图标被指定为名为header的属性,而用于打开面板的图标被指定为名为headerSelected的属性。 默认情况下,其值为{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }

Syntax

$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

以下部分将向您展示一些手风琴小部件功能的工作示例。

默认功能

以下示例演示了一个简单的手风琴小部件功能示例,不向accordion()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      <script>
         $(function() {
            $( "#accordion-1" ).accordion();
         });
      </script>
      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>
   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <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>
         <h3>Tab 2</h3>
         <div>
            <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>
         <h3>Tab 3</h3>
         <div>
            <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>

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

新页面打开

单击标题(选项卡1,选项卡2,选项卡3)以展开/折叠分为逻辑部分的内容,非常类似于选项卡。

使用可折叠

以下示例演示了在JqueryUI的accordion小部件中collapsible的三个选项的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      <script>
         $(function() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>
   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <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>
         <h3>Tab 2</h3>
         <div>
            <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>
         <h3>Tab 3</h3>
         <div>
            <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>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

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

新页面打开

在这里,我们将折叠设置为true 。 单击手风琴标题,这样可以折叠活动部分。

使用heightStyle

以下示例演示了heightStyle的accordion小部件中三个选项heightStyle的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      <script>
         $(function() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>
   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               </p>
            </div>
         </div>
      </div><br><br>
      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

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

新页面打开

这里我们有两个手风琴,第一个将heightStyle选项设置为content ,这允许手风琴面板保持其原始高度。 第二个手风琴将heightStyle选项设置为fill ,脚本会自动将手风琴的尺寸设置为其父容器的高度。

$ (selector, context).accordion(“action”,params)方法

accordion ("action", params)方法可以对手风琴元素执行动作,例如选择/取消选择手风琴菜单。 该操作在第一个参数中指定为字符串(例如,“禁用”禁用所有菜单)。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No. 行动和描述
1 destroy

此动作完全破坏元素的手风琴功能。 元素返回到pre-init状态。

Action - destroy

此动作完全破坏元素的手风琴功能。 元素返回到pre-init状态。

Syntax

$(".selector").accordion("destroy");
2 disable

此操作将禁用所有菜单。 不会考虑任何点击。 此方法不接受任何参数。

Action - disable

此操作将禁用所有菜单。 不会考虑任何点击。 此方法不接受任何参数。

Syntax

$(".selector").accordion("disable");
3 enable

此操作会重新激活所有菜单。 再次考虑点击次数。 此方法不接受任何参数。

Action - enable

此操作会重新激活所有菜单。 再次考虑点击次数。 此方法不接受任何参数。

Syntax

$(".selector").accordion("enable");
4 option( optionName )

此操作使用指定的optionName获取当前关联的accordion元素的值。 这将String值作为参数。

Action - option( optionName )

此操作使用指定的optionName获取当前关联的accordion元素的值。 这将String值作为参数。

Syntax

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
5 option

此操作获取一个对象,该对象包含表示当前折叠选项哈希的键/值对。

Action - option

此操作获取一个对象,该对象包含表示当前折叠选项哈希的键/值对。

Syntax

var options = $( ".selector" ).accordion( "option" );
6 option( optionName, value )

此操作设置与指定的optionName关联的accordion选项的值。

Action - option( optionName, value )

此操作设置与指定的optionName关联的accordion选项的值。

Syntax

$( ".selector" ).accordion( "option", "disabled", true );
7 option( options )

此操作为手风琴设置一个或多个选项。

Action - option( options )

此操作为手风琴设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

Syntax

$( ".selector" ).accordion( "option", { disabled: true } );
8 refresh

此操作处理在DOM中直接添加或删除的任何标题和面板。 然后重新计算手风琴面板的高度。 结果取决于内容和heightStyle选项。 此方法不接受任何参数。

Action - refresh

此操作处理在DOM中直接添加或删除的任何标题和面板。 然后重新计算手风琴面板的高度。 结果取决于内容和heightStyle选项。 此方法不接受任何参数。

Syntax

$(".selector").accordion("refresh");
9 widget

此操作返回accordion小部件元素; 用ui-accordion类名注释的那个。

Action - widget

此操作返回accordion小部件元素; 用ui-accordion类名注释的那个。

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了使用option( optionName, value )方法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <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>
            <h3>Tab 2</h3>
            <div>
               <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>
            <h3>Tab 3</h3>
            <div>
               <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>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"  
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked 
               value = "enable">Enable accordion
         </div>
     </body>
</html>

让我们将上面的代码保存在一个HTML文件accordionexample.htm ,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出 -

新页面打开

在这里,我们演示了手风琴的启用和禁用。 选择相应的单选按钮以检查每个操作。

手风琴元素的活动管理

除了我们在前面部分中看到的accordion(options)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

Sr.No. 事件方法和描述
1 activate(event, ui)

激活菜单时会触发此事件。 此事件仅在面板激活时触发,在创建折叠小部件时不会为初始面板触发。

Event - activate(event, ui)

激活菜单时会触发此事件。 此事件仅在面板激活时触发,在创建折叠小部件时不会为初始面板触发。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • newHeader - 表示刚刚激活的标头的jQuery对象。

  • oldHeader - 表示刚刚停用的标头的jQuery对象。

  • newPanel - 表示刚刚激活的面板的jQuery对象。

  • oldPanel - 表示刚刚停用的面板的jQuery对象。

Syntax

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});
2 beforeActivate(event, ui)

在激活面板之前触发此事件。 可以取消此事件以防止面板激活。

Event - beforeActivate(event, ui)

在激活面板之前触发此事件。 可以取消此事件以防止面板激活。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • newHeader - 表示即将被激活的标头的jQuery对象。

  • oldHeader - 表示即将停用的标头的jQuery对象。

  • newPanel - 表示即将激活的面板的jQuery对象。

  • oldPanel - 表示即将停用的面板的jQuery对象。

Syntax

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});
3 create(event, ui)

创建手风琴时会触发此事件。

Event - create(event, ui)

创建手风琴时会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

  • header - 表示活动标头的jQuery对象。

  • panel - 表示活动面板的jQuery对象。

Syntax

$( ".selector" ).accordion({
   create: function( event, ui ) {}
});

例子 (Example)

以下示例演示了accordion小部件中的事件方法用法。 此示例演示了事件createbeforeActiveactive

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      <script>
         $(function() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>
      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>
   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <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>
         <h3>Tab 2</h3>
         <div>
            <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>
         <h3>Tab 3</h3>
         <div>
            <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>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

让我们将上面的代码保存在一个HTML文件accordionexample.htm ,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出 -

新页面打开

在这里,我们根据事件在底部显示文本。

JqueryUI - Autocomplete

自动完成是现代网站中经常使用的一种机制,用于向用户提供他/她在文本框中键入的单词开头的建议列表。 然后,用户可以从列表中选择一个项目,该项目将显示在输入字段中。 此功能可防止用户输入整个单词或一组单词。

JQueryUI提供了一个自动完成窗口小部件 - 一个与 jQueryUI提供了autocomplete()方法,用于在输入字段下创建一个建议列表,并向相关元素添加新的CSS类,以便为它们提供合适的样式。

可以接收输入的任何字段都可以转换为自动完成,即<input>元素, <textarea>元素和具有contenteditable属性的元素。

语法 (Syntax)

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

$(selector,context).autocomplete(options)方法

autocomplete (options)方法声明必须将HTML“input”元素作为输入字段进行管理,该字段将显示在建议列表上方。 options参数是一个对象,它指定用户在输入字段中键入时建议列表的行为。

语法 (Syntax)

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

您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

下表列出了可与此方法一起使用的不同options -

Sr.No. 选项和说明
1 appendTo

此选项用于向菜单追加元素。 默认情况下,其值为null

Option - appendTo

此选项用于向菜单追加元素。 默认情况下,其值为null 。 当值为null时,将检查输入字段的父级是否为ui-front类。 如果找到具有ui-front类的元素,则菜单将附加到该元素。

Syntax

$( ".selector" ).autocomplete({ appendTo: "#identifier" });
2 autoFocus

此选项设置为true ,菜单的第一项将在显示菜单时自动聚焦。 默认情况下,其值为false

Option - autoFocus

此选项设置为true ,菜单的第一项将在显示菜单时自动聚焦。 默认情况下,其值为false

Syntax

$( ".selector" ).autocomplete({ autoFocus: true });
3 delay

此选项是一个Integer,表示在尝试获取匹配值(由source选项指定)之前等待的毫秒数。 通过在启动搜索之前为用户提供输入更多字符的时间,这可以帮助减少在获取非本地数据时的颠簸。 默认情况下,其值为300

Option - delay

此选项是一个Integer,表示在尝试获取匹配值(由source选项指定)之前等待的毫秒数。 通过在启动搜索之前为用户提供输入更多字符的时间,这可以帮助减少在获取非本地数据时的颠簸。 默认情况下,其值为300

Syntax

$( ".selector" ).autocomplete({ delay: 500 });
4 disabled

如果指定此选项且为true ,则最初禁用自动完成窗口小部件。 默认情况下,其值为false

Option - disabled

如果指定此选项且为true ,则最初禁用自动完成窗口小部件。 默认情况下,其值为false

Syntax

$( ".selector" ).autocomplete({ disabled: true });
5 minLength

在尝试获取匹配值之前必须输入的字符数(由source选项指定)。 当少数字符不足以将设置降低到合理水平时,这可以防止显示过大的值集。 默认情况下,其值为1

Option - minLength

在尝试获取匹配值之前必须输入的字符数(由source选项指定)。 当少数字符不足以将设置降低到合理水平时,这可以防止显示过大的值集。 默认情况下,其值为1

Syntax

$( ".selector" ).autocomplete({ minLength: 0 });
6 position

此选项标识建议菜单相对于关联输入元素的位置。 选项默认为input元素,但您可以指定另一个要定位的元素。 默认情况下,其值为{ my: "left top", at: "left bottom", collision: "none" }

Option - position

此选项标识建议菜单相对于关联输入元素的位置。 选项默认为input元素,但您可以指定另一个要定位的元素。 默认情况下,其值为{ my: "left top", at: "left bottom", collision: "none" }

Syntax

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
7 source

此选项指定获取与输入数据匹配的数据的方式。 必须提供值,否则将不会创建自动完成窗口小部件。 默认情况下,其值为none; must be specified none; must be specified

Option - source

此选项指定获取与输入数据匹配的数据的方式。 必须提供值,否则将不会创建自动完成窗口小部件。 该值可以是:

  • 表示将返回匹配数据的服务器资源的URL的String

  • 从中匹配值的本地数据an array ,或

  • a function ,用作提供匹配值的一般回调。

Syntax

$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

以下部分将向您展示自动完成窗口小部件功能的一些工作示例。

默认功能

以下示例演示了自动完成窗口小部件功能的简单示例,不将任何参数传递给autocomplete()方法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete 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() {
            var availableTutorials  =  [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

让我们将上述代码保存在HTML文件autocompleteexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

新页面打开

使用autoFocus

以下示例演示了在autoFocus的自动完成小部件中使用选项autoFocus。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete 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() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

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

新页面打开

使用minLength和延迟

以下示例演示了JqueryUI的自动完成小部件中两个选项minLengthdelay的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete 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() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

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

新页面打开

使用标签

以下示例演示了JqueryUI的自动完成小部件中选项label的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete 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() {
            $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

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

新页面打开

使用外部来源

以下示例演示了在JqueryUI的自动完成小部件中使用外部文件作为source选项。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete 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() {
            $( "#autocomplete-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   <body>
      <input id = "autocomplete-5">
   </body>
</html>
新页面打开

search.php文件位于与上述文件相同的位置(autocompleteexample.html)。 search.php的内容如下 -

<?
$term = $_GET[ "term" ];
$companies = array(
   array( "label" => "JAVA", "value" => "1" ),
   array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ),
   array( "label" => "JAVASCRIPT", "value" => "3" ),
   array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ),
   array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ),
   array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ),
   array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ),
   array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ),
   array( "label" => "CLOUD COMPUTING", "value" => "9" ),
   array( "label" => "DATA MINING", "value" => "10" ),
   array( "label" => "DATA WAREHOUSE", "value" => "11" ),
   array( "label" => "E-COMMERCE", "value" => "12" ),
   array( "label" => "DBMS", "value" => "13" ),
   array( "label" => "HTTP", "value" => "14" )
);
$result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
	if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}
echo json_encode( $result );
?>

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

$ (selector, context).autocomplete(“action”,params)方法

autocomplete ("action", params)方法可以对建议列表执行操作,例如显示或隐藏。 该操作在第一个参数中指定为String(例如,“close”以隐藏列表)。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No. 行动和描述
1 close

此操作会隐藏“自动完成”菜单中的建议列表。 此方法不接受任何参数。

Action - close

此操作会隐藏“自动完成”菜单中的建议列表。 此方法不接受任何参数。

Syntax

$( ".selector" ).autocomplete("close");
2 destroy

此操作将删除自动完成功能。 建议列表将被删除。 此方法不接受任何参数。

Action - destroy

此操作将删除自动完成功能。 建议列表将被删除。 此方法不接受任何参数。

Syntax

$( ".selector" ).autocomplete("destroy");
3 disable

此操作会禁用自动完成机制。 建议列表不再出现。 此方法不接受任何参数。

Action - disable

此操作会禁用自动完成机制。 建议列表不再出现。 此方法不接受任何参数。

Syntax

$( ".selector" ).autocomplete("disable");
4 enable

此操作会重新激活自动完成机制。 将再次显示建议列表。 此方法不接受任何参数。

Action - enable

此操作会重新激活自动完成机制。 将再次显示建议列表。 此方法不接受任何参数。

Syntax

$( ".selector" ).autocomplete("enable");
5 option( optionName )

此操作检索指定的param optionName的值。 此选项对应于与自动完成(选项)一起使用的选项之一。

Action - option( optionName )

此操作检索指定的param optionName的值。 此选项对应于与自动完成(选项)一起使用的选项之一。

Syntax

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
6 option

此操作获取一个对象,其中包含表示当前自动完成选项哈希的键/值对。

Action - option

此操作获取一个对象,其中包含表示当前自动完成选项哈希的键/值对。

Syntax

var options = $( ".selector" ).autocomplete( "option" );
7 option( optionName, value )

此操作设置与指定的optionName关联的自动完成选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

Action - option( optionName, value )

此操作设置与指定的optionName关联的自动完成选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

Syntax

$( ".selector" ).autocomplete( "option", "disabled", true );
8 option( options )

此操作为自动完成设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

Action - option( options )

此操作为自动完成设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

Syntax

$( ".selector" ).autocomplete( "option", { disabled: true } );
9 search( [value ] )

此操作将搜索字符串值与数据源(在options.source指定)之间的对应关系。 必须以值的形式达到最小字符数(在options.minLength指示),否则不执行搜索。

10 widget

检索与建议列表对应的

    DOM元素。
这是jQuery类的一个对象,它允许在不使用jQuery选择器的情况下轻松访问列表。

Action - widget

检索与建议列表对应的

    DOM元素。
这是jQuery类的一个对象,它允许在不使用jQuery选择器的情况下轻松访问列表。

Syntax

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

例子 (Example)

现在让我们看一个使用上表中的操作的示例。 以下示例演示了使用option( optionName, value )方法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete 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() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-6" ).autocomplete({
               source: availableTutorials
            });
            $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

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

新页面打开

扩展点

自动完成小部件可以使用小部件工厂进行扩展。 扩展窗口小部件时,您可以覆盖或添加现有方法的行为。 下表列出了充当与above列出的插件方法具有相同API稳定性的扩展点的方法。

Sr.No. 方法和描述
1 _renderItem(ul,item)

此方法控制窗口小部件菜单中每个选项的创建。 此方法创建一个新的

  • 元素,将其附加到菜单并返回它。
  • _renderItem( ul, item )

    此方法控制窗口小部件菜单中每个选项的创建。 此方法创建一个新的

  • 元素,将其附加到菜单并返回它。
  • 哪里 -
    • 《ul》是必须附加到新创建的“li”元素的元素。

    • item

      可以是label(String) ,要为项目显示的字符串,或value(String) ,即在选择项目时插入到输入中的值。
    2 _renderMenu(ul,items)

    此方法控制构建窗口小部件的菜单。

    _renderMenu( ul, items )

    此方法控制构建窗口小部件的菜单。 哪里 -

    • 《ul》是与用户键入的术语匹配的项目数组。 每个项目都是具有labelvalue属性的对象。

    3 _resizeMenu()

    此方法在显示菜单之前控制菜单的大小。菜单元素在this.menu.element可用。 此方法不接受任何参数。

    _resizeMenu()

    此方法在显示菜单之前控制菜单的大小。菜单元素在this.menu.element可用。 此方法不接受任何参数。

    自动完成元素的事件管理

    除了我们在前面几节中看到的自动完成(选项)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

    Sr.No. 事件方法和描述
    1 change(event, ui)

    当基于选择改变《input》元素的值时,将触发此事件。 触发后,此事件将始终在触发close事件后发生。

    Event - change(event, ui)

    当基于选择改变《input》元素的值时,将触发此事件。 触发后,此事件将始终在触发close事件后发生。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • item - 从菜单中选择的项目(如果有)。 否则该属性为null。

    Syntax

    $( ".selector" ).autocomplete({
       change: function( event, ui ) {}
    });
    
    2 close(event, ui)

    只要自动完成菜单关闭,就会触发此事件。

    Event - close(event, ui)

    只要自动完成菜单关闭,就会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).autocomplete({
       close: function( event, ui ) {}
    });
    
    3 create(event, ui)

    创建自动完成时会触发此事件。

    Event - create(event, ui)

    创建自动完成时会触发此事件。其中event的类型为Eventui的类型为Objectui可能值是 -

    • item - 从菜单中选择的项目(如果有)。 否则该属性为null。

    Syntax

    $( ".selector" ).autocomplete({
       create: function( event, ui ) {}
    });
    
    4 focus(event, ui)

    只要其中一个菜单选项获得焦点,就会触发此事件。 除非取消(例如,通过返回false),否则将焦点值设置到《input》元素中。

    Event - focus(event, ui)

    只要其中一个菜单选项获得焦点,就会触发此事件。 除非取消(例如,通过返回false),否则将焦点值设置到《input》元素中。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • item - 重点项目。

    Syntax

    $( ".selector" ).autocomplete({
       focus: function( event, ui ) {}
    });
    
    5 open(event, ui)

    在准备好数据并且菜单即将打开后触发此事件。

    Event - open(event, ui)

    在准备好数据并且菜单即将打开后触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).autocomplete({
       open: function( event, ui ) {}
    });
    
    6 response(event, ui)

    在显示菜单之前,搜索完成后会触发此事件。 搜索完成时始终会触发此事件,即使由于没有结果或禁用自动填充功能而无法显示菜单也是如此。

    Event - response(event, ui)

    在显示菜单之前,搜索完成后会触发此事件。 搜索完成时始终会触发此事件,即使由于没有结果或禁用自动填充功能而无法显示菜单也是如此。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • content - 包含响应数据,可以修改以更改将显示的结果。

    Syntax

    $( ".selector" ).autocomplete({
       response: function( event, ui ) {}
    });
    
    7 search(event, ui)

    在激活源指定的机制之前,在满足任何delayminLength条件之后触发此事件。 如果取消,则中止搜索操作。

    8 select(event, ui)

    从自动完成菜单中选择值时会触发此事件。 取消此事件可防止将值设置到《input》元素中(但不会阻止菜单关闭)。

    Event - select(event, ui)

    从自动完成菜单中选择值时会触发此事件。 取消此事件可防止将值设置到《input》元素中(但不会阻止菜单关闭)。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • item - 具有所选选项的标签和值属性的对象。

    Syntax

    $( ".selector" ).autocomplete({
       select: function( event, ui ) {}
    });
    

    例子 (Example)

    以下示例演示自动完成窗口小部件中的事件方法用法。 此示例演示了使用事件focusselect

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Autocomplete 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>
          <style>
             #project-label {
                display: block;
                font-weight: bold;
                margin-bottom: 1em;
             }
             #project-icon {
                float: left;
                height: 32px;
                width: 32px;
             }
             #project-description {
                margin: 0;
                padding: 0;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                var projects = [
                   {
                      value: "java",
                      label: "Java",
                      desc: "write once run anywhere",
                   }, 
                   {
                      value: "jquery-ui",
                      label: "jQuery UI",
                      desc: "the official user interface library for jQuery",
                   },
                   {
                      value: "Bootstrap",
                      label: "Twitter Bootstrap",
                      desc: "popular front end frameworks ",
                   }
                ];
                $( "#project" ).autocomplete({
                   minLength: 0,
                   source: projects,
                   focus: function( event, ui ) {
                      $( "#project" ).val( ui.item.label );
                      return false;
                   },
                   select: function( event, ui ) {
                      $( "#project" ).val( ui.item.label );
                      $( "#project-id" ).val( ui.item.value );
                      $( "#project-description" ).html( ui.item.desc );
                      return false;
                   }
                })
                .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                   return $( "<li>" )
                   .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                   .appendTo( ul );
                };
             });
          </script>
       </head>
       <body>
          <div id = "project-label">Select a project (type "a" for a start):</div>
          <input id = "project">
          <input type = "hidden" id = "project-id">
          <p id = "project-description"></p>
       </body>
    </html>
    

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

    新页面打开

    JqueryUI - Button

    jQueryUI提供了button()方法,用于将HTML元素(如按钮,输入和锚点)转换为可主题按钮,并自动管理鼠标移动,所有这些都由jQuery UI透明地管理。

    为了对单选按钮进行分组,Button还提供了一个名为Buttonset的附加小部件。 通过选择容器元素(包含单选按钮)和调用.buttonset()

    语法 (Syntax)

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

    $ (selector, context).button(选项)方法

    button (options)方法声明应将HTML元素视为按钮。 options参数是一个对象,它指定按钮的行为和外观。

    语法 (Syntax)

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

    您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

    下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 disabled

    此选项取消激活该按钮设置为true 。 默认情况下,其值为false

    Option - disabled

    此选项取消激活该按钮设置为true 。 默认情况下,其值为false

    Syntax

    $( ".selector" ).button({ disabled: true });
    
    2 icons

    此选项指定button: primary中将显示一个或两个图标button: primary左侧的button: primary图标,右侧的辅助图标。 主要图标由对象的primary属性标识, secondary图标由次要属性标识。 默认情况下,其值为primary: null, secondary: null

    Option - icons

    此选项指定button: primary中将显示一个或两个图标button: primary左侧的button: primary图标,右侧的辅助图标。 主要图标由对象的primary属性标识, secondary图标由次要属性标识。 默认情况下,其值为primary: null, secondary: null

    Syntax

    $( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
    
    3 label

    此选项指定要在覆盖自然标签的按钮上显示的文本。 如果省略,则显示元素的自然标签。 对于单选按钮和复选框,自然标签是与控件关联的 默认情况下,其值为null

    Option - label

    此选项指定要在覆盖自然标签的按钮上显示的文本。 如果省略,则显示元素的自然标签。 对于单选按钮和复选框,自然标签是与控件关联的 默认情况下,其值为null

    Syntax

    $( ".selector" ).button({ label: "custom label" });
    
    4 text

    此选项指定是否在按钮上显示文本。 如果指定为false ,则仅当(并且仅当)icons选项指定至少一个图标时,才会禁止文本。 默认情况下,其值为true

    Option - text

    此选项指定是否在按钮上显示文本。 如果指定为false ,则仅当(并且仅当)icons选项指定至少一个图标时,才会禁止文本。 默认情况下,其值为true

    Syntax

    $( ".selector" ).button({ text: false });
    

    默认功能

    以下示例演示了按钮窗口小部件功能的简单示例,不向button()方法传递任何参数。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Buttons 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() {
                $( "#button-1, #button-2, #button-3, #button-4" ).button();
                $( "#button-5" ).buttonset();
             });
          </script>
       </head>
       <body>
          <button id = "button-1">A button element</button>
          <input id = "button-2" type = "submit" value = "A submit button">
          <a id = "button-3" href = "">An anchor</a>
          <input type = "checkbox"  id = "button-4" >
          <label for = "button-4">Toggle</label>
          <br><br>
          <div id = "button-5">
             <input type = "checkbox" id = "check1">
             <label for = "check1">Left</label>
             <input type = "checkbox" id = "check2">
             <label for = "check2">Middle</label>
             <input type = "checkbox" id = "check3">
             <label for = "check3">Right</label>
          </div>
       </body>
    </html>
    

    让我们将上述代码保存在HTML文件buttonexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

    新页面打开

    此示例演示了可用于按钮的标记:按钮元素,提交类型的输入和锚点。

    使用图标,文本和禁用

    以下示例演示了JqueryUI的按钮功能中两个选项iconstextdisabled的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Buttons 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() {
                $( "#button-6" ).button({
                   icons: {
                      primary: "ui-icon-locked"
                   },
                   text: false
                });
                $( "#button-7" ).button({
                   disabled:true
                });
                $( "#button-8" ).button({
                   icons: {
                      primary: "ui-icon-gear",
                      secondary: "ui-icon-triangle-1-s"
                   }
                });
             });
          </script>
       </head>
       <body>
          <button id = "button-6">
             Button with icon only
          </button>
          <button id = "button-7">
             Button Disabled
          </button>
          <button id = "button-8">
             Button with two icons
          </button>
       </body>
    </html>
    

    让我们将上述代码保存在HTML文件buttonexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

    新页面打开

    在这里,您可以看到一个只有图标的按钮,一个带有两个图标的按钮和一个禁用按钮。

    $ (selector, context).button(“action”,params)方法

    button ("action", params)方法可以对按钮执行操作,例如禁用按钮。 该操作在第一个参数中指定为字符串(例如,“禁用”以禁用按钮)。 请查看下表中可以传递的操作。

    语法 (Syntax)

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

    下表列出了此方法可以使用的不同actions -

    Sr.No. 行动和描述
    1 destroy

    此操作完全删除元素的按钮功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy

    此操作完全删除元素的按钮功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).button("destroy");
    
    2 disable

    此操作会禁用元素的按钮功能。 此方法不接受任何参数。

    Action - disable

    此操作会禁用元素的按钮功能。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).button("disable");
    
    3 enable

    此操作启用元素的按钮功能。 此方法不接受任何参数。

    Action - enable

    此操作启用元素的按钮功能。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).button("enable");
    
    4 option( optionName )

    此操作检索optionName指定的选项的值。 其中optionName是一个String。

    Action - option( optionName )

    此操作检索optionName指定的选项的值。 其中optionName是一个String。

    Syntax

    var isDisabled = $( ".selector" ).button( "option", "disabled" );
    
    5 option

    此操作检索包含表示当前按钮选项哈希的键/值对的对象。

    Action - option

    此操作检索包含表示当前按钮选项哈希的键/值对的对象。

    Syntax

    $( ".selector" ).button("option");
    
    6 option( optionName, value )

    此操作设置与指定的optionName关联的按钮选项的值。

    Action - option( optionName, value )

    此操作设置与指定的optionName关联的按钮选项的值。 其中optionName是要设置的选项的名称, value是要为该选项设置的值。

    Syntax

    $( ".selector" ).button( "option", "disabled", true );
    
    7 option( options )

    此操作为按钮设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

    Action - option( options )

    此操作为按钮设置一个或多个选项。 其中options是要设置的选项 - 值对的映射。

    Syntax

    $( ".selector" ).button( "option", { disabled: true } );
    
    8 refresh

    此操作会刷新按钮的显示。 当程序处理按钮并且显示器不一定对应于内部状态时,这很有用。 此方法不接受任何参数。

    Action - refresh

    此操作会刷新按钮的显示。 当程序处理按钮并且显示器不一定对应于内部状态时,这很有用。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).button("refresh");
    
    9 widget

    此操作返回包含button元素的jQuery对象。 此方法不接受任何参数。

    Action - widget

    此操作返回包含button元素的jQuery对象。 此方法不接受任何参数。

    Syntax

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

    例子 (Example)

    现在让我们看一个使用上表中的操作的示例。 以下示例演示了destroy()disable()方法的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Buttons 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() {
                $( "#button-9" ).button({
                   text: false,
                   icons: {
                      primary: "ui-icon-seek-start"
                   }
                });
                $( "#button-9" ).button('destroy');
                $( "#button-10" ).button({
                   icons: {
                      primary: "ui-icon-seek-prev"
                   }
                });
                $( "#button-10" ).button('disable');
                $( "#button-11" ).button({
                   text: false,
                   icons: {
                      primary: "ui-icon-play"
                   }
                });
             });
          </script>
       </head>
       <body>
          <button id = "button-9">
             I'm destroyed
          </button>
          <button id = "button-10">   
             I'm disabled
          </button>
          <button id = "button-11">
             play
          </button>
       </body>
    </html>
    

    让我们将上面的代码保存在HTML文件buttonexample.htm ,并在支持javascript的标准浏览器中打开它,你应该看到以下输出 -

    新页面打开

    按钮上的事件管理

    除了我们在前面部分中看到的按钮(选项)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

    Sr.No. 事件方法和描述
    1 create(event, ui)

    创建按钮时会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - create(event, ui)

    创建按钮元素时会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).button({
       create: function( event, ui ) {}
    });
    

    例子 (Example)

    以下示例演示了按钮窗口小部件功能的事件方法用法。 此示例演示了事件create的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Buttons 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>
          <style>
             .resultarea {
                background: #cedc98;
                border-top: 1px solid #000000;
                border-bottom: 1px solid #000000;
                color: #333333;
                font-size:14px;
             }
          </style>
          <script>
             $(function() {
                $( "#button-12" ).button({
                   create: function() {
                      $("p#result").html ($("p#result")
                      .html () + "<b>created</b><br>");
                   }
                });
             });
          </script>
       </head>
       <body>
          <button id = "button-12">
             A button element
          </button>
          <p class = "resultarea" id = result></p>
       </body>
    </html>
    

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

    新页面打开

    JqueryUI - Datepicker

    jQueryUI中的Datepickers允许用户轻松,直观地输入日期。 您可以自定义日期格式和语言,限制可选日期范围,并轻松添加按钮和其他导航选项。

    jQueryUI提供了datepicker datepicker()方法,该方法通过添加新的CSS类来创建日期选择器并更改页面上HTML元素的外观。 将包装集中的“input”,“div”和“span”元素转换为datepicker控件。

    默认情况下,对于《input》元素,当相关文本字段获得焦点时,datepicker日历将以小覆盖打开。 对于内联日历,只需将日期选择器附加到
    元素即可。

    语法 (Syntax)

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

    $(selector,context).datepicker(options)方法

    datepicker (options)方法声明<input>元素(或<div>或<span>,具体取决于您选择显示日历的方式)应作为日期选择器进行管理。 options参数是一个对象,它指定了datepicker元素的行为和外观。

    语法 (Syntax)

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

    您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

    下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 altField

    此选项为字段指定jQuery选择器,该选择器也使用任何日期选择进行更新。 altFormat选项可用于设置此值的格式。 这对于将日期值设置为要提交给服务器的隐藏输入元素非常有用,同时向用户显示更加用户友好的格式。 默认情况下,其值为""

    Option - altField

    此选项为字段指定jQuery选择器,该选择器也使用任何日期选择进行更新。 altFormat选项可用于设置此值的格式。 这对于将日期值设置为要提交给服务器的隐藏输入元素非常有用,同时向用户显示更加用户友好的格式。 默认情况下,其值为""

    Syntax

    $(".selector").datepicker(
       { altField: "#actualDate" }
    );
    
    2 altFormat

    指定altField选项时使用此选项。 它提供要写入备用元素的值的格式。 默认情况下,其值为""

    Option - altFormat

    指定altField选项时使用此选项。 它提供要写入备用元素的值的格式。 默认情况下,其值为""

    Syntax

    $(".selector").datepicker(
       { altFormat: "yy-mm-dd" }
    );
    
    3 appendText

    此选项是要放在《input》元素后面的String值,用于向用户显示指令。 默认情况下,其值为""

    Option - appendText

    此选项是要放在《input》元素后面的String值,用于向用户显示指令。 默认情况下,其值为""

    Syntax

    $(".selector").datepicker(
       { appendText: "(yyyy-mm-dd)" }
    );
    
    4 autoSize

    设置为true时,此选项会调整“input”元素的大小,以适应使用dateFormat选项设置的日期选择器的日期格式。 默认情况下,其值为false

    Option - autoSize

    设置为true时,此选项会调整“input”元素的大小,以适应使用dateFormat选项设置的日期选择器的日期格式。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { autoSize: true }
    );
    
    5 beforeShow

    此选项是在显示datepicker之前调用的回调函数,其中《input》元素和datepicker实例作为参数传递。 此函数可以返回用于修改datepicker的选项哈希。 默认情况下,其值为""

    Option - beforeShow

    此选项是在显示datepicker之前调用的回调函数,其中《input》元素和datepicker实例作为参数传递。 此函数可以返回用于修改datepicker的选项哈希。 默认情况下,其值为""

    6 beforeShowDay

    此选项是一个回调函数,它将日期作为参数,在日期选择器显示之前的每一天调用,并将日期作为唯一参数传递。 这可以用于覆盖day元素的一些默认行为。 此函数必须返回一个三元素数组。默认情况下,其值为null

    Option - beforeShowDay

    此选项是一个回调函数,它将日期作为参数,在日期选择器显示之前的每一天调用,并将日期作为唯一参数传递。 这可以用于覆盖day元素的一些默认行为。 该函数必须返回一个三元素数组,如下所示 -

    • [0] - true为日期可选, false否则为false

    • [1] - 要应用的以空格分隔的CSS类名称字符串或不应用空字符串

    • [2] - 将工具提示应用于day元素的可选字符串

    默认情况下,其值为null

    7 buttonImage

    此选项通过将showOn选项设置为其中一个按钮或两者来指定要在按钮上显示的图像的路径。 如果还提供了buttonText ,则按钮文本将成为按钮的alt属性。 默认情况下,其值为""

    Option - buttonImage

    此选项通过将showOn选项设置为其中一个按钮或两者来指定要在按钮上显示的图像的路径。 如果还提供了buttonText ,则按钮文本将成为按钮的alt属性。 默认情况下,其值为""

    Syntax

    $(".selector").datepicker(
       { buttonImage: "/images/datepicker.gif" }
    );
    
    8 buttonImageOnly

    此选项(如果设置为true )指定buttonImage指定的图像将独立显示(而不是按钮)。 showOn选项仍必须设置为按钮或两者之一才能显示图像。 默认情况下,其值为false

    Option - buttonImageOnly

    此选项(如果设置为true )指定buttonImage指定的图像将独立显示(而不是按钮)。 showOn选项仍必须设置为按钮或两者之一才能显示图像。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { buttonImageOnly: true }
    );
    
    9 buttonText

    此选项通过将showOn选项设置为buttonboth来指定启用按钮的标题。 默认情况下,其值为"..."

    Option - buttonText

    此选项通过将showOn选项设置为buttonboth来指定启用按钮的标题。 默认情况下,其值为"..."

    Syntax

    $(".selector").datepicker(
       { buttonText: "Choose" }
    );
    
    10 calculateWeek

    此选项是一个自定义函数,用于计算并返回作为单个参数传递的日期的周数。 默认实现是$.datepicker.iso8601Week()实用程序函数提供的实现。

    Option - calculateWeek

    此选项是一个自定义函数,用于计算并返回作为单个参数传递的日期的周数。 默认实现是$.datepicker.iso8601Week()实用程序函数提供的实现。

    Syntax

    $(".selector").datepicker(
       { calculateWeek: myWeekCalc }
    );
    
    11 changeMonth

    此选项如果设置为true ,则会显示月份下拉列表,允许用户直接更改月份而不使用箭头按钮逐步执行它们。 默认情况下,其值为false

    Option - changeMonth

    此选项如果设置为true ,则会显示月份下拉列表,允许用户直接更改月份而不使用箭头按钮逐步执行它们。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { changeMonth: true }
    );
    
    12 changeYear

    此选项如果设置为true ,则显示年份下拉列表,允许用户直接更改年份而不使用箭头按钮逐步执行它们。 选项yearRange可用于控制可供选择的年份。 默认情况下,其值为false

    Option - changeYear

    此选项如果设置为true ,则显示年份下拉列表,允许用户直接更改年份而不使用箭头按钮逐步执行它们。 选项yearRange可用于控制可供选择的年份。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { changeYear: true }
    );
    
    13 closeText

    此选项指定要替换关闭按钮的默认标题“完成”的文本。 通过showButtonPanel选项显示按钮面板时使用它。 默认情况下,其值为"Done"

    Option - closeText

    此选项指定要替换关闭按钮的默认标题“完成”的文本。 通过showButtonPanel选项显示按钮面板时使用它。 默认情况下,其值为"Done"

    Syntax

    $(".selector").datepicker(
       { closeText: "Close" }
    );
    
    14 constrainInput

    此选项如果设置为true (默认值),则“input”元素中的文本条目将限制为当前dateformat选项允许的字符。 默认情况下,其值为true

    Option - constrainInput

    此选项如果设置为true (默认值),则“input”元素中的文本条目将限制为当前dateformat选项允许的字符。 默认情况下,其值为true

    Syntax

    $(".selector").datepicker(
       { constrainInput: false }
    );
    
    15 currentText

    此选项指定要替换当前按钮的“今天”默认标题的文本。 如果通过showButtonPanel选项显示按钮面板,则使用此选项。 默认情况下,其值为Today

    Option - currentText

    此选项指定要替换当前按钮的“今天”默认标题的文本。 如果通过showButtonPanel选项显示按钮面板,则使用此选项。 默认情况下,其值为Today

    Syntax

    $(".selector").datepicker(
       { currentText: "Now" }
    );
    
    16 dateFormat

    此选项指定要使用的日期格式。 默认情况下,其值为mm/dd/yy

    Option - dateFormat

    此选项指定要使用的日期格式。 默认情况下,其值为mm/dd/yy

    Syntax

    $(".selector").datepicker(
       { dateFormat: "yy-mm-dd" }
    );
    
    17 dayNames

    此选项是一个7元素数组,提供全天名称,第0个元素表示星期日。 可用于本地化控件。 默认情况下,其值为[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]

    Option - dayNames

    此选项是一个7元素数组,提供全天名称,第0个元素表示星期日。 可用于本地化控件。 默认情况下,其值为[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]

    Syntax

    $(".selector").datepicker(
       { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
    );
    
    18 dayNamesMin

    此选项是一个7元素数组,提供最小日期名称,第0个元素表示星期日,用作列标题。 可用于本地化控件。 默认情况下,其值为[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]

    Option - dayNamesMin

    此选项是一个7元素数组,提供最小日期名称,第0个元素表示星期日,用作列标题。 可用于本地化控件。 默认情况下,其值为[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]

    Syntax

    $(".selector").datepicker(
       { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
    );
    
    19 dayNamesShort

    此选项指定一个7元素数组,提供短日期名称,第0个元素表示星期日。 可用于本地化控件。 默认情况下,其值为[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]

    Option - dayNamesShort

    此选项指定一个7元素数组,提供短日期名称,第0个元素表示星期日。 可用于本地化控件。 默认情况下,其值为[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]

    Syntax

    $(".selector").datepicker(
       { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
    );
    
    20 defaultDate

    如果《input》元素没有值,则此选项设置控件的初始日期,覆盖today的默认值。 这可以是Date实例,从今天开始的天number ,或指定绝对或相对日期的string 。 默认情况下,其值为null

    Option - defaultDate

    如果《input》元素没有值,则此选项设置控件的初始日期,覆盖today的默认值。 这可以是Date实例,从今天开始的天number ,或指定绝对或相对日期的string 。 默认情况下,其值为null

    Syntax

    $(".selector").datepicker(
       { defaultDate: +7 }
    );
    
    21 duration

    此选项指定使日期选择器显示的动画的速度。 可以是slow, normal, or fast,也可以是动画跨越的毫秒数。 默认情况下,其值是normal

    Option - duration

    此选项指定使日期选择器显示的动画的速度。 可以是slow, normal, or fast,也可以是动画跨越的毫秒数。 默认情况下,其值是normal

    Syntax

    $(".selector").datepicker(
       { duration: "slow" }
    );
    
    22 firstDay

    此选项指定哪一天被视为一周的第一天,并将显示为最左侧的列。 默认情况下,其值为0

    Option - firstDay

    此选项指定哪一天被视为一周的第一天,并将显示为最左侧的列。 默认情况下,其值为0

    Syntax

    $(".selector").datepicker(
       { firstDay: 1 }
    );
    
    23 gotoCurrent

    此选项设置为true ,当前日期链接设置为所选日期,覆盖今天的默认值。 默认情况下,其值为false

    Option - gotoCurrent

    此选项设置为true ,当前日期链接设置为所选日期,覆盖今天的默认值。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { gotoCurrent: true }
    );
    
    24 hideIfNoPrevNext

    如果设置为true ,则此选项会在不适用时隐藏下一个和上一个链接(而不是仅禁用它们),具体取决于minDatemaxDate选项的设置。 默认情况下,其值为false

    Option - hideIfNoPrevNext

    如果设置为true ,则此选项会在不适用时隐藏下一个和上一个链接(而不是仅禁用它们),具体取决于minDatemaxDate选项的设置。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { hideIfNoPrevNext: true }
    );
    
    25 isRTL

    设置为true ,此选项将本地化指定为从右到左的语言。 默认情况下,其值为false

    Option - isRTL

    设置为true ,此选项将本地化指定为从右到左的语言。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { isRTL: true }
    );
    
    26 maxDate

    此选项设置控件的最大可选日期。 这可以是Date实例,从今天开始的天数,或指定绝对或相对日期的字符串。 默认情况下,其值为null

    Option - maxDate

    此选项设置控件的最大可选日期。 这可以是Date实例,从今天开始的天数,或指定绝对或相对日期的字符串。 默认情况下,其值为null

    Syntax

    $(".selector").datepicker(
       { maxDate: "+1m +1w" }
    );
    
    27 minDate

    此选项设置控件的最小可选日期。 这可以是Date实例,从今天开始的天number ,或指定绝对或相对日期的string 。 默认情况下,其值为null

    Option - minDate

    此选项设置控件的最小可选日期。 这可以是Date实例,从今天开始的天number ,或指定绝对或相对日期的string 。 默认情况下,其值为null

    Syntax

    $(".selector").datepicker(
       { minDate: new Date(2007, 1 - 1, 1) }
    );
    
    28 monthNames

    此选项是一个12元素数组,提供完整月份名称,第0个元素代表1月。 可用于本地化控件。 默认情况下,其值为[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]

    Option - monthNames

    此选项是一个12元素数组,提供完整月份名称,第0个元素代表1月。 可用于本地化控件。 默认情况下,其值为[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]

    Syntax

    $(".selector").datepicker(
       { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
    );
    
    29 monthNamesShort

    此选项指定一个12元素数组,提供短月份名称,第0个元素表示1月。 可用于本地化控件。 默认情况下,其值为[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]

    Option - monthNamesShort

    此选项指定一个12元素数组,提供短月份名称,第0个元素表示1月。 可用于本地化控件。 默认情况下,其值为[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]

    Syntax

    $(".selector").datepicker(
       { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
    );
    
    30 navigationAsDateFormat

    此选项如果设置为true ,则nextText, prevText,currentText的导航链接将在显示之前通过$.datepicker.formatDate()函数传递。 这允许为那些被相关值替换的选项提供日期格式。 默认情况下,其值为false

    Option - navigationAsDateFormat

    此选项如果设置为true ,则nextText, prevText,currentText的导航链接将在显示之前通过$.datepicker.formatDate()函数传递。 这允许为那些被相关值替换的选项提供日期格式。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { navigationAsDateFormat: true }
    );
    
    31 nextText

    此选项指定用于替换下个月导航链接的默认标题Next的文本。 ThemeRoller用图标替换此文本。 默认情况下,其值为Next

    Option - nextText

    此选项指定用于替换下个月导航链接的默认标题Next的文本。 ThemeRoller用图标替换此文本。 默认情况下,其值为Next

    Syntax

    $(".selector").datepicker(
       {  nextText: "Later" }
    );
    
    32 numberOfMonths

    此选项指定在datepicker中显示的月数。 默认情况下,其值为1

    Option - numberOfMonths

    此选项指定在datepicker中显示的月数。 默认情况下,其值为1 。 支持多种类型 -

    • Number - 单行显示的月数。

    • Array - 定义要显示的行数和列数的数组。

    Syntax

    $(".selector").datepicker(
       { numberOfMonths: [ 2, 3 ] }
    );
    
    33 onChangeMonthYear

    此选项是在datepicker移动到新月或年时调用的回调,其中选定的年,月(从1开始)和datepicker实例作为参数传递,并且函数上下文设置为输入字段元素。 默认情况下,其值为null

    Option - onChangeMonthYear

    此选项是在datepicker移动到新月或年时调用的回调,其中选定的年,月(从1开始)和datepicker实例作为参数传递,并且函数上下文设置为输入字段元素。 默认情况下,其值为null

    34 onClose

    此选项是每当关闭一个datepicker时调用的回调,将所选日期作为文本传递(如果没有选择则传递空字符串),以及datepicker实例,并将函数上下文设置为输入字段元素。 默认情况下,其值为null

    Option - onClose

    此选项是每当关闭一个datepicker时调用的回调,将所选日期作为文本传递(如果没有选择则传递空字符串),以及datepicker实例,并将函数上下文设置为输入字段元素。 默认情况下,其值为null

    35 onSelect

    此选项是每当选择日期时调用的回调,将所选日期作为文本传递(如果没有选择则传递空字符串)和datepicker实例,并将函数上下文设置为输入字段元素。 默认情况下,其值为null

    Option - onSelect

    此选项是每当选择日期时调用的回调,将所选日期作为文本传递(如果没有选择则传递空字符串)和datepicker实例,并将函数上下文设置为输入字段元素。 默认情况下,其值为null

    36 prevText

    此选项指定要替换上个月导航链接的默认标题Prev的文本。 (请注意,ThemeRoller用图标替换此文本)。 默认情况下,其值为PrevdefaultDatedayNamesMin

    Option - prevText

    此选项指定要替换上个月导航链接的默认标题Prev的文本。 (请注意,ThemeRoller用图标替换此文本)。 默认情况下,其值为Prev

    Syntax

    $(".selector").datepicker(
       { prevText: "Earlier" }
    );
    
    37 selectOtherMonths

    如果设置为true ,则可以选择此选项,显示在显示的月份之前或之后显示的天数。 除非showOtherMonths选项为true,否则不会显示这些天数。 默认情况下,其值为false

    Option - selectOtherMonths

    如果设置为true ,则可以选择此选项,显示在显示的月份之前或之后显示的天数。 除非showOtherMonths选项为true,否则不会显示这些天数。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { selectOtherMonths: true }
    );
    
    38 shortYearCutoff

    此选项(如果是数字)指定0到99年之间的值,在此之前任何2位数年份值将被视为属于上个世纪。 如果此选项是字符串,则该值将进行数字转换并添加到当前年份。 默认值为+10 ,表示当前年份的10年。

    Option - shortYearCutoff

    此选项(如果是数字)指定0到99年之间的值,在此之前任何2位数年份值将被视为属于上个世纪。 如果此选项是字符串,则该值将进行数字转换并添加到当前年份。 默认值为+10 ,表示当前年份的10年。

    Syntax

    $(".selector").datepicker(
       { shortYearCutoff: 50 }
    );
    
    39 showAnim

    此选项指定设置用于显示和隐藏日期选择器的动画的名称。 如果指定,则必须是show (the default), fadeIn, slideDown,或任何jQuery UI显示/隐藏动画之一。 默认情况下,其值为show

    Option - showAnim

    此选项指定设置用于显示和隐藏日期选择器的动画的名称。 如果指定,则必须是show (the default), fadeIn, slideDown,或任何jQuery UI显示/隐藏动画之一。 默认情况下,其值为show

    Syntax

    $(".selector").datepicker(
       { showAnim: "fold" }
    );
    
    40 showButtonPanel

    此选项如果设置为true ,则会显示日期选择器底部的按钮面板,其中包含当前和关闭按钮。 可以通过currentTextcloseText选项提供这些按钮的标题。 默认情况下,其值为false

    Option - showButtonPanel

    此选项如果设置为true ,则会显示日期选择器底部的按钮面板,其中包含当前和关闭按钮。 可以通过currentTextcloseText选项提供这些按钮的标题。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { showButtonPanel: true }
    );
    
    41 showCurrentAtPos

    此选项指定从左上角开始的基于0的索引,其中包含当前日期的月份应放置在多月显示中。 默认情况下,其值为0

    Option - showCurrentAtPos

    此选项指定从左上角开始的基于0的索引,其中包含当前日期的月份应放置在多月显示中。 默认情况下,其值为0

    Syntax

    $(".selector").datepicker(
       { showCurrentAtPos: 3 }
    );
    
    42 showMonthAfterYear

    此选项指定如果设置为true ,则在datepicker的标题中反转月份和年份的位置。 默认情况下,其值为false

    Option - showMonthAfterYear

    此选项指定如果设置为true ,则在datepicker的标题中反转月份和年份的位置。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { showMonthAfterYear: true }
    );
    
    43 showOn

    此选项指定何时应出现日期选择器。 可能的值是focus, button or both 。 默认情况下,其值为focus

    Option - showOn

    此选项指定何时应出现日期选择器。 可能的值是focus, button or both 。 默认情况下,其值为focus

    focus (默认值)会导致datepicker在“input”元素获得焦点时显示。

    button导致在“input”元素之后(但在任何附加文本之前)创建一个按钮,该按钮在单击时触发datepicker。

    both导致触发按钮被创建,而焦点事件也会触发日期选择器。

    Syntax

    $(".selector").datepicker(
       { showOn: "both" }
    );
    
    44 showOptions

    当为showAnim选项指定jQuery UI动画时,此选项提供要传递给动画的哈希。 默认情况下,其值为{}

    Option - showOptions

    当为showAnim选项指定jQuery UI动画时,此选项提供要传递给动画的哈希。 默认情况下,其值为{}

    Syntax

    $(".selector").datepicker(
       { showOptions: { direction: "up" } }
    );
    
    45 showOtherMonths

    如果设置为true ,则显示此选项,显示当前月份的第一天和最后一天之前或之后的日期。 除非selectOtherMonths选项也设置为true,否则这些日期不可选。 默认情况下,其值为false

    Option - showOtherMonths

    如果设置为true ,则显示此选项,显示当前月份的第一天和最后一天之前或之后的日期。 除非selectOtherMonths选项也设置为true,否则这些日期不可选。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { showOtherMonths: true }
    );
    
    46 showWeek

    此选项如果设置为true ,则周数显示在月份显示左侧的列中。 calculateWeek选项可用于更改确定此值的方式。 默认情况下,其值为false

    Option - showWeek

    此选项如果设置为true ,则周数显示在月份显示左侧的列中。 calculateWeek选项可用于更改确定此值的方式。 默认情况下,其值为false

    Syntax

    $(".selector").datepicker(
       { showWeek: true }
    );
    
    47 stepMonths

    此选项指定单击其中一个月导航控件时要移动的月数。 默认情况下,其值为1

    Option - stepMonths

    此选项指定单击其中一个月导航控件时要移动的月数。 默认情况下,其值为1

    Syntax

    $(".selector").datepicker(
       { stepMonths: 3 }
    );
    
    48 weekHeader

    当showWeek为true时,此选项指定要显示的周数列的文本,覆盖Wk的默认值。 默认情况下,其值为Wk

    Option - weekHeader

    当showWeek为true时,此选项指定要显示的周数列的文本,覆盖Wk的默认值。 默认情况下,其值为Wk

    Syntax

    $(".selector").datepicker(
       { weekHeader: "W" }
    );
    
    49 yearRange

    此选项指定在以下形式的下拉列表中显示哪些年份的限制from:tochangeYeartrue 。 值可以是绝对值或相对值(例如:2005:+ 2,从2005年到2年)。 前缀c可用于使相对值偏离所选年份而不是当前年份(例如:c-2:c + 3)。 默认情况下,其值为c-10:c+10

    Option - yearRange

    此选项指定在以下形式的下拉列表中显示哪些年份的限制from:tochangeYeartrue 。 值可以是绝对值或相对值(例如:2005:+ 2,从2005年到2年)。 前缀c可用于使相对值偏离所选年份而不是当前年份(例如:c-2:c + 3)。 默认情况下,其值为c-10:c+10

    Syntax

    $(".selector").datepicker(
       { yearRange: "2002:2012" }
    );
    
    50 yearSuffix

    此选项在datepicker标题中显示年份之后的其他文本。 默认情况下,其值为""

    Option - yearSuffix

    此选项在datepicker标题中显示年份之后的其他文本。 默认情况下,其值为""

    Syntax

    $(".selector").datepicker(
       { yearSuffix: "CE" }
    );
    

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

    默认的功能 (Default functionality)

    以下示例演示了一个简单的datepicker功能示例,该功能不将任何参数传递给datepicker()方法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-1" ).datepicker();
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
       </body>
    </html>
    

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

    新页面打开

    内联Datepicker

    以下示例演示了内联日期选择器功能的简单示例。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-2" ).datepicker();
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          Enter Date: <div id = "datepicker-2"></div>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,我们使用

    元素来获取内联日期选择器。

    使用appendText,dateFormat,altField和altFormat

    以下示例显示了(d) altFormat函数中三个重要选项(a) appendText (b) dateFormat (c) altField(d) altFormat的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-3" ).datepicker({
                   appendText:"(yy-mm-dd)",
                   dateFormat:"yy-mm-dd",
                   altField: "#datepicker-4",
                   altFormat: "DD, d MM, yy"
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
          <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,您可以看到第一个输入的日期格式设置为yy-mm-dd 。 如果从datepicker中选择某个日期,则相同的日期将反映在日期格式设置为“DD,d MM,yy”的第二个输入字段中。

    使用beforeShowDay

    以下示例显示了beforeShowDay函数中选项beforeShowDay的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-5" ).datepicker({
                   beforeShowDay : function (date) {
                      var dayOfWeek = date.getDay ();
                      // 0 : Sunday, 1 : Monday, ...
                      if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                      else return [true];
                   }
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,星期日和星期六被禁用。

    使用showOn,buttonImage和buttonImageOnly

    以下示例显示了(a) showOn (b) buttonImage中三个重要选项(a) showOn (b) buttonImage(c) buttonImageOnly的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-6" ).datepicker({
                   showOn:"button",
                   buttonImage: "/jqueryui/images/calendar-icon.png",
                   buttonImageOnly: true
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,显示了一个图标,需要单击该图标才能打开日期选择器。

    使用defaultDate,dayNamesMin和duration

    以下示例显示了(a) dayNamesMin (b) dayNamesMin中三个重要选项(a) dayNamesMin (b) dayNamesMin(c) duration的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-7" ).datepicker({
                   defaultDate:+9,
                   dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
                   duration: "slow"
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,使用dayNamesMin更改日期的名称。 您还可以看到设置了默认日期。

    使用prevText,nextText,showOtherMonths和selectOtherMonths

    以下示例显示了三个重要选项的用法(a) prevText (b) nextText (c) showOtherMonths(d) selectOtherMonths在JqueryUI的datepicker函数中的selectOtherMonths。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-8" ).datepicker({
                   prevText:"click for previous months",
                   nextText:"click for next months",
                   showOtherMonths:true,
                   selectOtherMonths: false
                });
                $( "#datepicker-9" ).datepicker({
                   prevText:"click for previous months",
                   nextText:"click for next months",
                   showOtherMonths:true,
                   selectOtherMonths: true
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
          <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
       </body>
    </html>
    

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

    新页面打开

    在上面的例子中,prev和nect链接有标题。 如果单击该元素,则会打开日期选择器。 现在在第一个datepicker中,其他月份日期将被禁用,因为selectOtherMonths设置为false 。 在第二个输入类型的第二个日期选择器中,selectOtherMonths设置为true

    使用changeMonth,changeYear和numberOfMonths

    以下示例显示了(a) changeMonth (b) changeYear中三个重要选项(a) changeMonth (b) changeYear(c) numberOfMonths的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-10" ).datepicker({
                   changeMonth:true,
                   changeYear:true,
                   numberOfMonths:[2,2]
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,您可以看到Month和Year字段的下拉菜单。 我们在[2,2]的阵列结构中贬低了4个月。

    使用showWeek,yearSuffix和showAnim

    以下示例显示了(a) showWeek (b) yearSuffix中三个重要选项(a) showWeek (b) yearSuffix(c) showAnim的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-11" ).datepicker({
                   showWeek:true,
                   yearSuffix:"-CE",
                   showAnim: "slide"
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,您可以看到星期编号显示在showWeek的左侧,因为showWeek设置为true 。 年份的后缀为“-CE”。

    $(selector,context).datepicker(“action”,[params])方法

    datepicker (action, params)方法可以对日历执行操作,例如选择新日期。 该action在第一个参数中指定为字符串,并且可选地,可以基于给定的操作提供一个或多个params

    基本上,这里的操作只不过是jQuery方法,我们可以以字符串的形式使用它们。

    语法 (Syntax)

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

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

    Sr.No. 行动和描述
    1 destroy()

    此操作会完全删除datepicker功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy()

    此操作会完全删除datepicker功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $(".selector").datepicker("destroy");
    
    2 对话框(日期[,onSelect] [,设置] [,pos])

    此操作在jQuery UI对话框中显示datepicker。

    Action - dialog( date [, onSelect ] [, settings ] [, pos ] )

    此操作在jQuery UI对话框中显示datepicker。 哪里 -

    • date是初始日期。

    • 选择日期时, onSelect是一个回调函数。 该函数接收日期文本和日期选择器实例作为参数。

    • settings是日期选择器的新设置。

    • pos是对话框顶部/左侧的位置,如[x,y]或包含坐标的MouseEvent。 如果未指定,则对话框在屏幕上居中。

    Syntax

    $(".selector").datepicker( "dialog", "10/12/2012" );
    
    3 getDate()

    此操作返回与所选日期对应的日期。 此方法不接受任何参数。

    Action - getDate()

    此操作返回与所选日期对应的日期。 此方法不接受任何参数。

    Syntax

    $(".selector").datepicker("getDate");
    
    4 hide()

    此操作将关闭先前打开的日期选择器。 此方法不接受任何参数。

    Action - hide()

    此操作将关闭先前打开的日期选择器。 此方法不接受任何参数。

    Syntax

    $(".selector").datepicker("hide");
    
    5 isDisabled()

    此操作检查是否禁用了日期选择器功能。 此方法不接受任何参数。

    Action - isDisabled()

    此操作检查是否禁用了日期选择器功能。 此方法不接受任何参数。

    Syntax

    $(".selector").datepicker("isDisabled");
    
    6 option( optionName )

    此操作将检索当前与指定的optionName关联的值。

    Action - option( optionName )

    此操作将检索当前与指定的optionName关联的值。

    Syntax

    $(".selector").datepicker( "option", "disabled");
    
    7 option()

    此操作获取一个对象,其中包含表示当前datepicker选项哈希的键/值对。 此方法不接受任何参数。

    Action - option()

    此操作获取一个对象,其中包含表示当前datepicker选项哈希的键/值对。 此方法不接受任何参数。

    Syntax

    var options = $( ".selector" ).datepicker( "option" );
    
    8 option( optionName, value )

    此操作设置与指定的optionName关联的datepicker选项的值。

    Action - option( optionName, value )

    此操作设置与指定的optionName关联的datepicker选项的值。

    Syntax

    $(".selector").datepicker( "option", "disabled", true );
    
    9 option( options )

    此操作为datepicker设置一个或多个选项。

    Action - option( options )

    此操作为datepicker设置一个或多个选项。

    Syntax

    $(".selector").datepicker("option", { disabled: true });
    
    10 refresh()

    在进行了一些外部修改之后,此操作会重新绘制日期选择器。 此方法不接受任何参数。

    Action - refresh()

    在进行了一些外部修改之后,此操作会重新绘制日期选择器。 此方法不接受任何参数。

    Syntax

    $(".selector").datepicker("refresh");
    
    11 setDate( date )

    此操作将指定日期设置为datepicker的当前日期。

    Action - setDate()

    此操作将指定日期设置为datepicker的当前日期。

    Syntax

    $(".selector").datepicker("setDate", "10/12/2012");
    
    12 show()

    此操作将打开日期选择器。 如果将日期选择器附加到输入,则必须显示输入才能显示日期选择器。 此方法不接受任何参数。

    Action - show()

    此操作将打开日期选择器。 如果将日期选择器附加到输入,则必须显示输入才能显示日期选择器。 此方法不接受任何参数。

    Syntax

    $(".selector").datepicker("show");
    
    13 widget()

    此操作返回包含datepicker的jQuery对象。

    Action - widget()

    此操作返回包含datepicker的jQuery对象。

    Syntax

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

    以下示例显示了上表中列出的某些操作的用法。

    Use of setDate() action

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

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-12" ).datepicker();
                $( "#datepicker-12" ).datepicker("setDate", "10w+1");
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
       </body>
    </html>
    

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

    新页面打开

    Use of show() action

    以下示例演示了使用action show

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Datepicker 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() {
                $( "#datepicker-13" ).datepicker();
                $( "#datepicker-13" ).datepicker("show");
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
       </body>
    </html>
    

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

    新页面打开

    datepicker元素的事件管理

    截至目前,还没有datepicker事件方法!

    JqueryUI - Dialog

    对话框是在HTML页面上显示信息的好方法之一。 对话框是一个带有标题和内容区域的浮动窗口。 此窗口可以移动,调整大小,当然,默认情况下使用“X”图标关闭。

    jQueryUI提供了dialog()方法,该方法将页面上编写的HTML代码转换为HTML代码以显示对话框。

    语法 (Syntax)

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

    $ (selector, context).dialog(选项)方法

    dialog (options)方法声明可以以对话框的形式管理HTML元素。 options参数是一个对象,它指定该窗口的外观和行为。

    语法 (Syntax)

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

    您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

    下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 appendTo

    如果此选项设置为false ,则会阻止将ui-draggable类添加到所选DOM元素的列表中。 默认情况下,其值为true

    Option - appendTo

    此选项用于将对话框附加到指定的元素。 默认情况下,其值为"body"

    Syntax

    $(".selector").dialog(
       { appendTo: "#identifier" }
    );
    
    2 autoOpen

    此选项除非设置为false ,否则会在创建时打开该对话框。 如果为false ,则在调用对话框(“打开”)时将打开对话框。 默认情况下,其值为true

    Option - autoOpen

    此选项除非设置为false ,否则会在创建时打开该对话框。 如果为false ,则在调用对话框(“打开”)时将打开对话框。 默认情况下,其值为true

    Syntax

    $(".selector").dialog(
       { autoOpen: false }
    );
    
    3 buttons

    此选项在对话框中添加按钮。 它们被列为对象,每个属性都是按钮上的文本。 该值是用户单击按钮时调用的回调函数。 默认情况下,其值为{}

    Option - buttons

    此选项在对话框中添加按钮。 它们被列为对象,每个属性都是按钮上的文本。 该值是用户单击按钮时调用的回调函数。 默认情况下,其值为{}

    使用对话框元素的函数上下文调用此处理程序,并将按钮设置为目标属性传递事件实例。 如果省略,则不会为对话框创建任何按钮。

    Syntax

    $(".selector").dialog(
       { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
    );
    
    4 closeOnEscape

    除非此选项设置为false ,否则当用户在对话框具有焦点时按下Escape键时,将关闭对话框。 默认情况下,其值为true

    Option - closeOnEscape

    除非此选项设置为false ,否则当用户在对话框具有焦点时按下Escape键时,将关闭对话框。 默认情况下,其值为true

    Syntax

    $(".selector").dialog(
       { closeOnEscape: false }
    );
    
    5 closeText

    此选项包含用于替换关闭按钮的默认值“关闭”的文本。 默认情况下,其值为"close"

    Option - closeText

    此选项包含用于替换关闭按钮的默认值“关闭”的文本。 默认情况下,其值为"close"

    Syntax

    $(".selector").dialog(
       { closeText: "hide" }
    );
    
    6 dialogClass

    如果此选项设置为false ,则会阻止将ui-draggable类添加到所选DOM元素的列表中。 默认情况下,其值为""

    Option - dialogClass

    如果此选项设置为false ,则会阻止将ui-draggable类添加到所选DOM元素的列表中。 默认情况下,其值为""

    Syntax

    $(".selector").dialog(
       { dialogClass: "alert" }
    );
    
    7 draggable

    除非您将此选项设置为false ,否则可以通过单击并拖动标题栏来拖动对话框。 默认情况下,其值为true

    Option - draggable

    除非您将此选项设置为false ,否则可以通过单击并拖动标题栏来拖动对话框。 默认情况下,其值为true

    Syntax

    $(".selector").dialog(
       { draggable: false }
    );
    
    8 height

    此选项设置对话框的高度。 默认情况下,其值为"auto"

    Option - height

    如果此选项设置对话框的高度。 默认情况下,其值为"auto" 。 此选项可以是 -

    这可以是 -

    • Number - 指定持续时间(以毫秒为单位)

    • String - 唯一支持的字符串值是auto ,它允许对话框高度根据其内容进行调整。

    Syntax

    $(".selector").dialog(
       { height: 400 }
    );
    
    9 hide

    此选项用于设置关闭对话框时要使用的效果。 默认情况下,其值为null

    Option - hide

    此选项用于设置关闭对话框时要使用的效果。 默认情况下,其值为null

    这可以是 -

    • Boolean - 值可以是true/false 。 如果为false则不使用动画,对话框将立即隐藏。 如果为true ,则对话框将以默认持续时间和默认缓动淡出。

    • Number - 对话框将以指定的持续时间和默认缓动淡出。

    • String - 将使用指定的效果(如slideUpfold隐藏对话框。

    • Object - 如果值是对象,则可以提供effect, delay, duration, easing属性来隐藏对话框。

      10

    Syntax

    $(".selector").dialog(
       { hide: { effect: "explode", duration: 1000 } }
    );
    
    11 maxHeight

    此选项设置可以调整对话框大小的最大高度(以像素为单位)。 默认情况下,其值为false

    Option - maxHeight

    此选项设置可以调整对话框大小的最大高度(以像素为单位)。 默认情况下,其值为false

    Syntax

    $(".selector").dialog(
       { maxHeight: 600 }
    );
    
    12 maxWidth

    此选项设置可以调整对话框大小的最大宽度(以像素为单位)。 默认情况下,其值为false

    Option - maxWidth

    此选项设置可以调整对话框大小的最大宽度(以像素为单位)。 默认情况下,其值为false

    Syntax

    $(".selector").dialog(
       { maxWidth: 600 }
    );
    
    13 minHeight

    此选项是可以调整对话框大小的最小高度(以像素为单位)。 默认情况下,其值为150

    Option - minHeight

    此选项是可以调整对话框大小的最小高度(以像素为单位)。 默认情况下,其值为150

    Syntax

    $(".selector").dialog(
       { minHeight: 200 }
    );
    
    14 minWidth

    此选项是可以调整对话框大小的最小宽度(以像素为单位)。 默认情况下,其值为150

    Option - minWidth

    此选项是可以调整对话框大小的最小宽度(以像素为单位)。 默认情况下,其值为150

    Syntax

    $(".selector").dialog(
       { minWidth: 200 }
    );
    
    15 modal

    如果此选项设置为true ,则对话框将具有模态行为; 页面上的其他项目将被禁用,即无法与之交互。 模态对话框在对话框下方创建叠加层,但在其他页面元素上方。 默认情况下,其值为false

    Option - modal

    如果此选项设置为true ,则对话框将具有模态行为; 页面上的其他项目将被禁用,即无法与之交互。 模态对话框在对话框下方创建叠加层,但在其他页面元素上方。 默认情况下,其值为false

    Syntax

    $(".selector").dialog(
       { modal: true }
    );
    
    16 position

    此选项指定对话框的初始位置。 可以是预定义位置之一: center (the default), left, right, top, or bottom 。 也可以是一个2元素数组,其左侧和顶部值(以像素为单位)为[left,top]或文本位置,如['right','top']。 默认情况下,其值为{ my: "center", at: "center", of: window }

    Option - position

    此选项指定对话框的初始位置。 可以是预定义位置之一: center (the default), left, right, top, or bottom 。 也可以是一个2元素数组,其左侧和顶部值(以像素为单位)为[left,top]或文本位置,如['right','top']。 默认情况下,其值为{ my: "center", at: "center", of: window }

    Syntax

    $(".selector").dialog(
       { position: { my: "left top", at: "left bottom", of: button } }
    );
    
    17 resizable

    此选项除非设置为false ,否则对话框可在所有方向调整大小。 默认情况下,其值为true

    Option - resizable

    此选项除非设置为false ,否则对话框可在所有方向调整大小。 默认情况下,其值为true

    Syntax

    $(".selector").dialog(
       { resizable: false }
    );
    
    18 show

    此选项是打开对话框时要使用的效果。 默认情况下,其值为null

    Option - show

    此选项是打开对话框时要使用的效果。 默认情况下,其值为null

    这可以是 -

    • Boolean - 值可以是true/false 。 如果为false则不使用动画,对话框将立即显示。 如果为true ,则对话框将以默认持续时间和默认缓动方式淡入。

    • Number - 对话框将以指定的持续时间和默认缓动方式淡入。

    • String - 将使用指定的效果(如slideDownfold显示对话框。

    • Object - 如果值是对象,则可以提供effect, delay, duration, easing属性以显示对话框。

      19

    Syntax

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

    此选项指定要在对话框的标题栏中显示的文本。 默认情况下,其值为null

    Option - title

    此选项指定要在对话框的标题栏中显示的文本。 默认情况下,其值为null

    Syntax

    $(".selector").dialog(
       { title: "Dialog Title" }
    );
    
    21 width

    此选项指定对话框的宽度(以像素为单位)。 默认情况下,其值为300

    Option - width

    此选项指定对话框的宽度(以像素为单位)。 默认情况下,其值为300

    Syntax

    $(".selector").dialog(
       { width: 500 }
    );
    

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

    默认的功能 (Default functionality)

    下面的示例演示了一个简单的对话框功能示例,它不向dialog()方法传递任何参数。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Dialog 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>
             .ui-widget-header,.ui-state-default, ui-button {
                background:#b9cd6d;
                border: 1px solid #b9cd6d;
                color: #FFFFFF;
                font-weight: bold;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#dialog-1" ).dialog({
                   autoOpen: false,  
                });
                $( "#opener" ).click(function() {
                   $( "#dialog-1" ).dialog( "open" );
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "dialog-1" 
             title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
          <button id = "opener">Open Dialog</button>
       </body>
    </html>
    

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

    新页面打开

    使用按钮,标题和位置

    以下示例演示了JqueryUI对话框小部件中三个选项buttonstitleposition的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Dialog 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>
             .ui-widget-header,.ui-state-default, ui-button {
                background:#b9cd6d;
                border: 1px solid #b9cd6d;
                color: #FFFFFF;
                font-weight: bold;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#dialog-2" ).dialog({
                   autoOpen: false, 
                   buttons: {
                      OK: function() {$(this).dialog("close");}
                   },
                   title: "Success",
                   position: {
                      my: "left center",
                      at: "left center"
                   }
                });
                $( "#opener-2" ).click(function() {
                   $( "#dialog-2" ).dialog( "open" );
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "dialog-2"
             title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
          <button id = "opener-2">Open Dialog</button>
       </body>
    </html>
    

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

    新页面打开

    使用皮革,表演和身高

    以下示例演示了JqueryUI对话框小部件中三个选项hideshowheight的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Dialog 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>
             .ui-widget-header,.ui-state-default, ui-button {
                background:#b9cd6d;
                border: 1px solid #b9cd6d;
                color: #FFFFFF;
                font-weight: bold;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#dialog-3" ).dialog({
                   autoOpen: false, 
                   hide: "puff",
                   show : "slide",
                   height: 200      
                });
                $( "#opener-3" ).click(function() {
                   $( "#dialog-3" ).dialog( "open" );
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "dialog-3"
             title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
          <button id = "opener-3">Open Dialog</button>
       </body>
    </html>
    

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

    新页面打开

    使用模态

    以下示例演示了JqueryUI对话框小部件中三个选项buttonstitleposition的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Dialog 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>
             .ui-widget-header,.ui-state-default, ui-button {
                background:#b9cd6d;
                border: 1px solid #b9cd6d;
                color: #FFFFFF;
                font-weight: bold;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#dialog-4" ).dialog({
                   autoOpen: false, 
                   modal: true,
                   buttons: {
                      OK: function() {$(this).dialog("close");}
                   },
                });
                $( "#opener-4" ).click(function() {
                   $( "#dialog-4" ).dialog( "open" );
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
          <button id = "opener-4">Open Dialog</button>
          <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>
          <label for = "textbox">Enter Name: </label>
          <input type = "text">
       </body>
    </html>
    

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

    新页面打开

    $ (selector, context).dialog(“action”,[params])方法

    dialog (action, params)方法可以在对话框上执行操作,例如关闭框。 该action在第一个参数中指定为字符串,并且可选地,可以基于给定的操作提供一个或多个params

    基本上,这里的操作只不过是jQuery方法,我们可以以字符串的形式使用它们。

    语法 (Syntax)

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

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

    Sr.No. 行动和描述
    1 close()

    此操作将关闭对话框。 此方法不接受任何参数。

    Action - close()

    此操作将关闭对话框。 此方法不接受任何参数。

    Syntax

    $(".selector").dialog("close");
    
    2 destroy()

    此操作可以有效地删除对话框。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy()

    此操作可以有效地删除对话框。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $(".selector").dialog("destroy");
    
    3 isOpen()

    此操作检查对话框是否已打开。 此方法不接受任何参数。

    Action - isOpen()

    此操作检查对话框是否已打开。 此方法不接受任何参数。

    Syntax

    $(".selector").dialog("isOpen");
    
    4 moveToTop()

    此操作将相应的对话框定位到前景(在其他对话框的顶部)。 此方法不接受任何参数。

    Action - moveToTop()

    此操作将相应的对话框定位到前景(在其他对话框的顶部)。 此方法不接受任何参数。

    Syntax

    $(".selector").dialog("moveToTop");
    
    5 open()

    此操作将打开对话框。 此方法不接受任何参数。

    Action - open()

    此操作将打开对话框。 此方法不接受任何参数。

    Syntax

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

    此操作获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称。

    Action - option( optionName )

    此操作获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称。

    Syntax

    var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
    
    7 option()

    此操作获取一个对象,该对象包含表示当前对话框选项哈希的键/值对。 此方法不接受任何参数。

    Action - option()

    此操作获取一个对象,该对象包含表示当前对话框选项哈希的键/值对。 此方法不接受任何参数。

    Syntax

    var options = $( ".selector" ).dialog( "option" );
    
    8 option( optionName, value )

    此操作设置与指定的optionName关联的对话框选项的值。

    Action - option( optionName, value )

    此操作设置与指定的optionName关联的对话框选项的值。

    Syntax

    $(".selector").dialog( "option", "disabled", true );
    
    9 option( options )

    此操作为对话框设置一个或多个选项。

    Action - option( options )

    此操作为对话框设置一个或多个选项。

    Syntax

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

    此操作返回对话框的小部件元素; 使用ui-dialog类名注释的元素。 此方法不接受任何参数。

    Action - widget()

    此操作返回对话框的小部件元素; 使用ui-dialog类名注释的元素。 此方法不接受任何参数。

    Syntax

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

    例子 (Example)

    现在让我们看一个使用上表中的操作的示例。 以下示例演示了isOpen()open()close()方法的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Dialog 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>
             .ui-widget-header,.ui-state-default, ui-button {
                background:#b9cd6d;
                border: 1px solid #b9cd6d;
                color: #FFFFFF;
                font-weight: bold;
             }
          </style>
          <!-- Javascript -->
          <script type = "text/javascript">
             $(function() {
                $("#toggle").click(function() {
                   ($("#dialog-5").dialog("isOpen") == false) ? $(
                      "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
                });
                $("#dialog-5").dialog({autoOpen: false});
             });
          </script>
       </head>
       <body>
          <button id = "toggle">Toggle dialog!</button>
          <div id = "dialog-5" title = "Dialog Title!">
             Click on the Toggle button to open and close this dialog box.
          </div>
       </body>
    </html>
    

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

    新页面打开

    对话框上的事件管理

    除了我们在前面几节中看到的dialog(options)方法之外,JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -

    Sr.No. 事件方法和描述
    1 beforeClose(event, ui)

    当对话框即将关闭时,将触发此事件。 返回false阻止对话框关闭。 对于包含未通过验证的表单的对话框,它很方便。 其中eventEvent类型, uiObject类型。

    Event - beforeClose(event, ui)

    当对话框即将关闭时,将触发此事件。 返回false阻止对话框关闭。 对于包含未通过验证的表单的对话框,它很方便。 其中eventEvent类型, uiObject类型。

    Syntax

    $(".selector").dialog (
       beforeClose: function(event, ui) {}
    );
    
    2 close(event, ui)

    关闭对话框时会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - close(event, ui)

    关闭对话框时会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $(".selector").dialog (
       close: function(event, ui) {}
    );
    
    3 create(event, ui)

    创建对话框时会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - create(event, ui)

    创建对话框时会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $(".selector").dialog (
       create: function(event, ui) {}
    );
    
    4 drag(event, ui)

    在拖动过程中移动对话框时会重复触发此事件。 其中eventEvent类型, uiObject类型。

    Event - drag(event, ui)

    在拖动过程中移动对话框时会重复触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • position - 表示对话框当前CSS位置的jQuery对象。

    • offset - 表示对话框当前偏移位置的jQuery对象。

    Syntax

    $(".selector").dialog (
       drag: function(event, ui) {}
    );
    
    5 dragStart(event, ui)

    通过拖动标题栏开始重新定位对话框时会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - dragStart(event, ui)

    通过拖动标题栏开始重新定位对话框时会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • position - 表示对话框当前CSS位置的jQuery对象。

    • offset - 表示对话框当前偏移位置的jQuery对象。

    Syntax

    $(".selector").dialog (
       dragStart: function(event, ui) {}
    );
    
    6 dragStop(event, ui)

    拖动操作终止时会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - dragStop(event, ui)

    拖动操作终止时会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • position - 表示对话框当前CSS位置的jQuery对象。

    • offset - 表示对话框当前偏移位置的jQuery对象。

    Syntax

    $(".selector").dialog (
       dragStop: function(event, ui) {}
    );
    
    7 focus(event, ui)

    当对话框获得焦点时会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - focus(event, ui)

    当对话框获得焦点时会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $(".selector").dialog (
       focus: function(event, ui) {}
    );
    
    8 open(event, ui)

    打开对话框时会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - open(event, ui)

    打开对话框时会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $(".selector").dialog (
       open: function(event, ui) {}
    );
    
    9 resize(event, ui)

    调整对话框大小时会重复触发此事件。 其中eventEvent类型, uiObject类型。

    Event - resize(event, ui)

    调整对话框大小时会重复触发此事件。 其中eventEvent类型, uiObject类型.ui的可能值是 -

    • originalPosition - 一个jQuery对象,表示在调整大小之前对话框的CSS位置。

    • position - 表示对话框当前CSS位置的jQuery对象。

    • originalSize - 一个jQuery对象,表示调整大小之前对话框的大小。

    • size - 表示对话框当前大小的jQuery对象。

    Syntax

    $(".selector").dialog (
       resize: function(event, ui) {}
    );
    
    10 resizeStart(event, ui)

    当对话框的调整大小开始时,将触发此事件。 其中eventEvent类型, uiObject类型。

    Event - resizeStart(event, ui)

    当对话框的调整大小开始时,将触发此事件。 其中eventEvent类型, uiObject类型.ui的可能值是 -

    • originalPosition - 一个jQuery对象,表示在调整大小之前对话框的CSS位置。

    • position - 表示对话框当前CSS位置的jQuery对象。

    • originalSize - 一个jQuery对象,表示调整大小之前对话框的大小。

    • size - 表示对话框当前大小的jQuery对象。

    Syntax

    $(".selector").dialog (
       resizeStart: function(event, ui) {}
    );
    
    11 resizeStop(event, ui)

    当对话框的调整大小终止时,将触发此事件。 其中eventEvent类型, uiObject类型。

    Event - resizeStop(event, ui)

    当对话框的调整大小终止时,将触发此事件。 其中eventEvent类型, uiObject类型.ui的可能值是 -

    • originalPosition - 一个jQuery对象,表示在调整大小之前对话框的CSS位置。

    • position - 表示对话框当前CSS位置的jQuery对象。

    • originalSize - 一个jQuery对象,表示调整大小之前对话框的大小。

    • size - 表示对话框当前大小的jQuery对象。

    Syntax

    $(".selector").dialog (
       resizeStop: function(event, ui) {}
    );
    

    以下示例演示了上表中列出的事件的用法。

    使用beforeClose Event方法

    以下示例演示了使用beforeClose事件方法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Dialog 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>
             .ui-widget-header,.ui-state-default, ui-button {
                background:#b9cd6d;
                border: 1px solid #b9cd6d;
                color: #FFFFFF;
                font-weight: bold;
             }
             .invalid { color: red; }
             textarea {
                display: inline-block;
                width: 100%;
                margin-bottom: 10px;
             }
          </style>
          <!-- Javascript -->
          <script type = "text/javascript">
             $(function() {
                $( "#dialog-6" ).dialog({
    	       autoOpen: false, 
                   buttons: {
                      OK: function() {
                         $( this ).dialog( "close" );
                      }
                   },
                   beforeClose: function( event, ui ) {
                      if ( !$( "#terms" ).prop( "checked" ) ) {
                         event.preventDefault();
                         $( "[for = terms]" ).addClass( "invalid" );
                      }
                   },
                   width: 600
                });
                $( "#opener-5" ).click(function() {
                   $( "#dialog-6" ).dialog( "open" );
                });
             });
          </script>
       </head>
       <body>
          <div id = "dialog-6">
             <p>You must accept these terms before continuing.</p>
             <textarea>This Agreement and the Request constitute the entire agreement of the 
             parties with respect to the subject matter of the Request. This Agreement shall be 
             governed by and construed in accordance with the laws of the State, without giving 
             effect to principles of conflicts of law.</textarea>
             <div>
                <label for = "terms">I accept the terms</label>
                <input type = "checkbox" id = "terms">
             </div>
          </div>
          <button id = "opener-5">Open Dialog</button>
       </body>
    </html>
    

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

    新页面打开

    使用resize Event方法

    以下示例演示了resize事件方法的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Dialog 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>
             .ui-widget-header,.ui-state-default, ui-button {
                background:#b9cd6d;
                border: 1px solid #b9cd6d;
                color: #FFFFFF;
                font-weight: bold;
             }
          </style>
          <!-- Javascript -->
          <script type = "text/javascript">
             $(function() {
                $( "#dialog-7" ).dialog({
                   autoOpen: false, 
                   resize: function( event, ui ) {
                      $( this ).dialog( "option", "title",
    	         ui.size.height + " x " + ui.size.width );
                   }
                });
                $( "#opener-6" ).click(function() {
                   $( "#dialog-7" ).dialog( "open" );
                });
             });
          </script>
       </head>
       <body>
          <div id = "dialog-7" title = "Dialog Title goes here..."
             >Resize this dialog to see the dialog co-ordinates in the title!</div>
          <button id = "opener-6">Open Dialog</button>
       </body>
    </html>
    

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

    新页面打开

    扩展点

    对话框小部件是使用小部件工厂构建的,可以进行扩展。 要扩展小部件,我们可以覆盖或添加现有方法的行为。 以下方法提供与对话方法具有相同API稳定性的扩展点。 列于上表中

    Sr.No. 方法和描述
    1 _allowInteraction(event)

    此方法允许用户通过将不是对话框子元素但允许用户能够使用的元素列入白名单来与给定目标元素进行交互。 event属于Event类型。

    Extension Point - allowInteraction(event, ui)

    此方法允许用户通过将不是对话框子元素但允许用户能够使用的元素列入白名单来与给定目标元素进行交互。 event属于Event类型。

    Code Example

    _allowInteraction: function( event ) {
      return !!$( event.target ).is( ".select2-input" ) || this._super( event );
    }
    
    • Select2插件用于模态对话框中

    • super()调用确保对话框中的元素仍然可以与之交互。

    jQuery UI Widget Factory是一个可扩展的基础,可以在其上构建所有jQuery UI的小部件。 使用小部件工厂构建插件为状态管理提供了便利,也为常见任务提供了便利,例如公开插件方法和在实例化后更改选项。

    JqueryUI - Menu

    菜单小部件通常包含带弹出菜单的主菜单栏。 弹出菜单中的项目通常具有子弹出菜单。 只要保持父子关系(使用

      ),就可以使用标记元素创建菜单。
    每个菜单项都有一个锚元素。

    jQueryUI中的Menu Widget可用于内联和弹出菜单,也可用作构建更复杂菜单系统的基础。 例如,您可以使用自定义定位创建嵌套菜单。

    jQueryUI提供了menu()方法来创建菜单。

    语法 (Syntax)

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

    $(selector,context).menu(options)方法

    menu (options)方法声明应将HTML元素及其内容作为菜单进行处理和管理。 options参数是一个对象,它指定所涉及的菜单项的外观和行为。

    语法 (Syntax)

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

    您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

    下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 disabled

    如果设置为true此选项将禁用菜单。 默认情况下,其值为false

    Option - disabled

    如果设置为true此选项将禁用菜单。 默认情况下,其值为false

    Syntax

    $( ".selector" ).menu (
       { disabled: true }
    );
    
    2 icons

    此选项设置子菜单的图标。 默认情况下,其值为{ submenu: "ui-icon-carat-1-e" }

    Option - icons

    此选项设置子菜单的图标。 默认情况下,其值为{ submenu: "ui-icon-carat-1-e" }

    Syntax

    $( ".selector" ).menu (
       { icons: { submenu: "ui-icon-circle-triangle-e" } }
    );
    
    3 menus

    此选项是用作菜单容器的元素的选择器,包括子菜单。 默认情况下,其值为ul

    Option - menus

    此选项是用作菜单容器的元素的选择器,包括子菜单。 默认情况下,其值为ul

    Syntax

    $( ".selector" ).menu (
       { menus: "div" }
    );
    
    4 position

    此选项设置子菜单相对于关联的父菜单项的位置。 默认情况下,其值为{ my: "left top", at: "right top" }

    Option - position

    此选项设置子菜单相对于关联的父菜单项的位置。 默认情况下,其值为{ my: "left top", at: "right top" }

    Syntax

    $( ".selector" ).menu (
       { position: { my: "left top", at: "right-5 top+5" } }
    );
    
    5 role

    此选项用于自定义用于菜单和菜单项的ARIA角色。 默认情况下,其值为menu

    Option - role

    此选项用于自定义用于菜单和菜单项的ARIA角色。 默认情况下,其值为menu

    作为Web可访问性计划(WAI)的一部分,可访问富Internet应用程序套件(ARIA)定义了一种使Web内容和Web应用程序更易于访问的方法。 它用于改进使用Ajax,HTML,JavaScript和相关技术开发的动态内容和高级用户界面控件的可访问性。 您可以在以下ARIA阅读更多信息: ARIA

    Syntax

    $( ".selector" ).menu (
       { role: null }
    );
    

    默认功能

    以下示例演示了菜单窗口小部件功能的简单示例,不向menu()方法传递任何参数。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Menu 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>
             .ui-menu {
                width: 200px;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#menu-1" ).menu();
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <ul id = "menu-1">
             <li><a href = "#">Spring</a></li>
             <li><a href = "#">Hibernate</a></li>
             <li><a href = "#">Java</a>
                <ul>
                   <li><a href = "#">Java IO</a></li>
                   <li><a href = "#">Swing</a></li>
                   <li><a href = "#">Jaspr Reports</a></li>
                </ul>
             </li>
             <li><a href = "#">JSF</a></li>
             <li><a href = "#">HTML5</a></li>
          </ul>
       </body>
    </html>
    

    让我们将上述代码保存在一个HTML文件menuexample.htm ,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出。 现在,你可以玩结果 -

    新页面打开

    在上面的示例中,您可以看到一个主题菜单,其中包含用于导航的鼠标和键盘交互。

    使用图标和位置

    以下示例演示了两个选项icons的用法,以及JqueryUI菜单功能中的位置。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Menu 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>
             .ui-menu {
                width: 200px;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#menu-2" ).menu({
                   icons: { submenu: "ui-icon-circle-triangle-e"},
                   position: { my: "right top", at: "right-10 top+5" }
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <ul id = "menu-2">
             <li><a href = "#">Spring</a></li>
             <li><a href = "#">Hibernate</a></li>
             <li><a href = "#">Java</a>
                <ul>
                   <li><a href = "#">Java IO</a></li>
                   <li><a href = "#">Swing</a></li>
                   <li><a href = "#">Jaspr Reports</a></li>
                </ul>
             </li>
             <li><a href = "#">JSF</a></li>
             <li><a href = "#">HTML5</a></li>
          </ul>
       </body>
    </html>
    

    让我们将上述代码保存在一个HTML文件menuexample.htm ,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出。 现在,你可以玩结果 -

    新页面打开

    在上面的示例中,您可以看到我们已为子菜单列表应用了图标图像,并且还更改了子菜单位置。

    $ (selector, context).menu(“action”,params)方法

    menu ("action", params)方法可以对菜单元素执行操作,例如启用/禁用菜单。 该操作在第一个参数中指定为字符串(例如,“禁用”禁用菜单)。 请查看下表中可以传递的操作。

    语法 (Syntax)

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

    下表列出了此方法可以使用的不同actions -

    Sr.No. 行动和描述
    1 blur( [event ] )

    此操作会从菜单中删除焦点。 它通过重置任何活动元素样式来触发菜单的blur事件。 event的类型为Event ,表示触发菜单模糊的内容。

    Action - blur( [event ] )

    此操作会从菜单中删除焦点。 它通过重置任何活动元素样式来触发菜单的blur事件。 event的类型为Event ,表示触发菜单模糊的内容。

    Syntax

    $(".selector").menu( "blur" );
    
    2 collapse( [event ] )

    此操作将关闭当前活动的子菜单。 event的类型为Event ,表示触发菜单崩溃的内容。

    Action - collapse( [event ] )

    此操作将关闭当前活动的子菜单。 event的类型为Event ,表示触发菜单崩溃的内容。

    Syntax

    $(".selector").menu( "collapse" );
    
    3 collapseAll( [event ] [, all ] )

    此操作将关闭所有打开的子菜单。

    Action - collapseAll( [event ] [, all ] )

    此操作将关闭所有打开的子菜单。 哪里 -

    • event属于Event类型,表示触发菜单折叠的内容

    • all是类型Boolean表示是应该关闭所有子菜单还是仅关闭下面的子菜单,包括是或包含触发事件目标的菜单。

    Syntax

    $(".selector").menu( "collapseAll", null, true );
    
    4 destroy()

    此操作完全删除菜单功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy()

    此操作完全删除菜单功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $(".selector").menu( "destroy" );
    
    5 disable()

    此操作会禁用菜单。 此方法不接受任何参数。

    Action - disable()

    此操作会禁用菜单。 此方法不接受任何参数。

    Syntax

    $(".selector").menu( "disable" );
    
    6 enable()

    此操作启用菜单。 此方法不接受任何参数。

    Action - enable()

    此操作启用菜单。 此方法不接受任何参数。

    Syntax

    $(".selector").menu( "enable" );
    
    7 expand( [event ] )

    此操作将打开当前活动项目下方的子菜单(如果存在)。 其中eventEvent类型,表示触发菜单扩展的内容。

    Action - expand( [event ] )

    此操作将打开当前活动项目下方的子菜单(如果存在)。 其中eventEvent类型,表示触发菜单扩展的内容。

    Syntax

    $(".selector").menu( "expand" );
    
    8 focus( [event ], item )

    此操作激活特定菜单项,开始打开任何子菜单(如果存在)并触发菜单的焦点事件。 event的类型为Event ,表示触发菜单获得焦点的内容。 和item是一个jQuery对象,表示要聚焦/激活的菜单项。

    Action - focus( [event ], item )

    此操作激活特定菜单项,开始打开任何子菜单(如果存在)并触发菜单的焦点事件。 event的类型为Event ,表示触发菜单获得焦点的内容。 和item是一个jQuery对象,表示要聚焦/激活的菜单项。

    Syntax

    $(".selector").menu( "focus", null, menu.find( ".ui-menu-item:last" ) );
    
    9 isFirstItem()

    此操作返回一个boolean值,该值指出当前活动菜单项是否是第一个菜单项。 此方法不接受任何参数。

    Action - isFirstItem()

    此操作返回一个boolean值,该值指出当前活动菜单项是否是第一个菜单项。 此方法不接受任何参数。

    Syntax

    $(".selector").menu( "isFirstItem" );
    
    10 isLastItem()

    此操作返回一个boolean值,该值指出当前活动菜单项是否是最后一个菜单项。 此方法不接受任何参数。

    Action - isLastItem()

    此操作返回一个boolean值,该值指出当前活动菜单项是否是最后一个菜单项。 此方法不接受任何参数。

    Syntax

    $(".selector").menu( "isLastItem" );
    
    11 next( [event ] )

    此操作将活动状态委派给下一个菜单项。 event的类型为Event ,表示触发焦点移动的内容。

    Action - next( [event ] )

    此操作将活动状态委派给下一个菜单项。 event的类型为Event ,表示触发焦点移动的内容。

    Syntax

    $(".selector").menu( "next" );
    
    12 nextPage( [event ] )

    此操作将活动状态移动到可滚动菜单底部下方的第一个菜单项或最后一个项目(如果不可滚动)。 event的类型为Event ,表示触发焦点移动的内容。

    Action - nextPage( [event ] )

    此操作将活动状态移动到可滚动菜单底部下方的第一个菜单项或最后一个项目(如果不可滚动)。 event的类型为Event ,表示触发焦点移动的内容。

    Syntax

    $(".selector").menu( "nextPage" );
    
    13 option( optionName )

    此操作获取当前与指定的optionName关联的值。 其中optionName的类型为String ,表示要获取的选项的名称。

    Action - option( optionName )

    此操作获取当前与指定的optionName关联的值。 其中optionName的类型为String ,表示要获取的选项的名称。

    Syntax

    var isDisabled = $( ".selector" ).menu( "option", "disabled" );
    
    14 option()

    此操作获取一个对象,其中包含表示当前菜单选项哈希的键/值对。

    Action - option()

    此操作获取一个对象,其中包含表示当前菜单选项哈希的键/值对。

    Syntax

    var options = $( ".selector" ).menu( "option" );
    
    15 option( optionName, value )

    此操作设置与指定的optionName关联的菜单选项的值。 其中optionName的类型为String ,表示要设置的选项的名称, value的类型为Object ,表示要为该选项设置的值。

    Action - option( optionName, value )

    此操作设置与指定的optionName关联的菜单选项的值。 其中optionName的类型为String ,表示要设置的选项的名称, value的类型为Object ,表示要为该选项设置的值。

    Syntax

    $(".selector").menu( "option", "disabled", true );
    
    16 option( options )

    此操作为菜单设置一个或多个选项。 其中options的类型为Object ,表示要设置的选项 - 值对的映射。

    Action - option( options )

    此操作为菜单设置一个或多个选项。 其中options的类型为Object ,表示要设置的选项 - 值对的映射。

    Syntax

    $(".selector").menu( "option", { disabled: true } );
    
    17 previous( [event ] )

    此操作将活动状态移动到上一个菜单项。 event的类型为Event ,表示触发焦点移动的内容。

    Action - previous( [event ] )

    此操作将活动状态移动到上一个菜单项。 event的类型为Event ,表示触发焦点移动的内容。

    Syntax

    $(".selector").menu( "previous" );
    
    18 previousPage( [event ] )

    此操作将活动状态移动到可滚动菜单顶部上方的第一个菜单项或第一个项目(如果不可滚动)。 event的类型为Event ,表示触发焦点移动的内容。

    Action - previousPage( [event ] )

    此操作将活动状态移动到可滚动菜单顶部上方的第一个菜单项或第一个项目(如果不可滚动)。 event的类型为Event ,表示触发焦点移动的内容。

    Syntax

    $(".selector").menu( "previousPage" );
    
    19 refresh()

    此操作初始化尚未初始化的子菜单和菜单项。 此方法不接受任何参数。

    Action - refresh()

    此操作初始化尚未初始化的子菜单和菜单项。 此方法不接受任何参数。

    Syntax

    $(".selector").menu( "refresh" );
    
    20 select( [event ] )

    此操作选择当前活动的菜单项,折叠所有子菜单并触发菜单的选择事件。 event的类型为Event ,表示触发选择的内容。

    Action - select( [event ] )

    此操作选择当前活动的菜单项,折叠所有子菜单并触发菜单的选择事件。 event的类型为Event ,表示触发选择的内容。

    Syntax

    $(".selector").menu( "select" );
    
    21 widget()

    此操作返回包含菜单的jQuery对象。 此方法不接受任何参数。

    Action - widget()

    此操作返回包含菜单的jQuery对象。 此方法不接受任何参数。

    Syntax

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

    以下示例演示了如何使用上表中给出的操作。

    使用禁用方法

    以下示例演示了disable()方法的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Menu 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>
             .ui-menu {
                width: 200px;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#menu-3" ).menu();
                $( "#menu-3" ).menu("disable");
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <ul id = "menu-3">
             <li><a href = "#">Spring</a></li>
             <li><a href = "#">Hibernate</a></li>
             <li><a href = "#">Java</a>
                <ul>
                   <li><a href = "#">Java IO</a></li>
                   <li><a href = "#">Swing</a></li>
                   <li><a href = "#">Jaspr Reports</a></li>
                </ul>
             </li>
             <li><a href = "#">JSF</a></li>
             <li><a href = "#">HTML5</a></li>
          </ul>
       </body>
    </html>
    

    让我们将上面的代码保存在一个HTML文件menuexample.htm ,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出 -

    新页面打开

    在上面的示例中,您可以看到菜单已禁用。

    使用焦点和collapseAll方法

    以下示例演示了focus()collapseAll方法的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Menu 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>
             .ui-menu {
                width: 200px;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                var menu = $("#menu-4").menu();
                $( "#menu-4" ).menu(
                   "focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
                $(menu).mouseleave(function () {
                   menu.menu('collapseAll');
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <ul id = "menu-4">
             <li><a href = "#">Spring</a></li>
             <li><a href = "#">Hibernate</a></li>
             <li><a href = "#">JSF</a></li>
             <li><a href = "#">HTML5</a></li>
             <li><a href = "#">Java</a>
                <ul>
                   <li><a href = "#">Java IO</a></li>
                   <li><a href = "#">Swing</a></li>
                   <li><a href = "#">Jaspr Reports</a></li>
                </ul>
             </li>
          </ul>
       </body>
    </html>
    

    让我们将上面的代码保存在一个HTML文件menuexample.htm ,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出 -

    新页面打开

    在上面的示例中,您可以看到焦点位于最后一个菜单项上。 现在展开子菜单,当鼠标离开子菜单时,子菜单关闭。

    菜单元素的事件管理

    除了我们在前面部分中看到的菜单(选项)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

    Sr.No. 事件方法和描述
    1 blur(event, ui)

    当菜单失去焦点时会触发此事件。

    Event - blur(event, ui)

    当菜单失去焦点时会触发此事件。 where event的类型为Eventui的类型为Object ,表示当前活动的菜单项。

    Syntax

    $( ".selector" ).menu({
       blur: function( event, ui ) {}
    });
    
    2 create(event, ui)

    创建菜单时会触发此事件。

    Event - create(event, ui)

    创建菜单时会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).menu({
       create: function( event, ui ) {}
    });
    
    3 focus(event, ui)

    菜单获得焦点或激活任何菜单项时会触发此事件。

    Event - focus(event, ui)

    菜单获得焦点或激活任何菜单项时会触发此事件。 where event的类型为Eventui的类型为Object ,表示当前活动的菜单项。

    Syntax

    $( ".selector" ).menu({
       focus: function( event, ui ) {}
    });
    
    4 select(event, ui)

    选择菜单项时会触发此事件。

    Event - select(event, ui)

    选择菜单项时会触发此事件。 where event的类型为Eventui的类型为Object ,表示当前活动的菜单项。

    Syntax

    $( ".selector" ).menu({
       select: function( event, ui ) {}
    });
    

    例子 (Example)

    以下示例演示了菜单小部件功能的事件方法用法。 此示例演示了事件createblurfocus

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Menu 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>
             .ui-menu {
                width: 200px;
             }
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#menu-5" ).menu({
                   create: function( event, ui ) {
                      var result = $( "#result" );
                      result.append( "Create event<br>" );
                   },
                   blur: function( event, ui ) {
                      var result = $( "#result" );
                      result.append( "Blur event<br>" );
                   },
                   focus: function( event, ui ) {
                      var result = $( "#result" );
                      result.append( "focus event<br>" );
                   }
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <ul id = "menu-5">
             <li><a href = "#">Spring</a></li>
             <li><a href = "#">Hibernate</a></li>
             <li><a href = "#">JSF</a></li>
             <li><a href = "#">HTML5</a></li>
             <li><a href = "#">Java</a>
                <ul>
                   <li><a href = "#">Java IO</a></li>
                   <li><a href = "#">Swing</a></li>
                   <li><a href = "#">Jaspr Reports</a></li>
                </ul>
             </li>
          </ul>
          <span id = "result"></span>
       </body>
    </html>
    

    让我们将上面的代码保存在一个HTML文件menuexample.htm ,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出 -

    新页面打开

    在上面的示例中,我们基于触发的事件打印消息。

    JqueryUI - Progressbar

    进度条表示操作或过程的完成百分比。 我们可以将进度条分类为determinate progress barindeterminate progress bar

    Determinate progress bar应仅用于系统可以准确更新当前状态的情况。 确定的进度条不应该从左到右填充,然后循环回到空以进行单个进程。

    如果无法计算实际状态,则应使用indeterminate progress bar来提供用户反馈。

    jQueryUI提供了一个易于使用的进度条小部件,我们可以使用它来让用户知道我们的应用程序正在努力执行所请求的操作。 jQueryUI提供了progressbar()方法来创建进度条。

    语法 (Syntax)

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

    $(selector,context).progressbar(options)方法

    progressbar (options)方法声明可以以进度条的形式管理HTML元素。 options参数是一个对象,它指定进度条的外观和行为。

    语法 (Syntax)

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

    您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

    下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 disabled

    设置为true时,此选项将禁用进度条。 默认情况下,其值为false

    Option - disabled

    设置为true时,此选项将禁用进度条。 默认情况下,其值为false

    Syntax

    $( ".selector" ).progressbar({ disabled: true });
    
    2 max

    此选项设置进度条的最大值。 默认情况下,其值为100

    Option - max

    此选项设置进度条的最大值。 默认情况下,其值为100

    Syntax

    $( ".selector" ).progressbar({ max: 500});
    
    3 value

    此选项指定进度条的初始值。 默认情况下,其值为0

    Option - value

    此选项指定进度条的初始值。 默认情况下,其值为0

    Syntax

    $( ".selector" ).progressbar({ value: 20 });
    

    以下部分将向您展示一些进度条功能的工作示例。

    默认功能

    以下示例演示了一个简单的进度条功能示例,不将任何参数传递给progressbar()方法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI ProgressBar 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>
          <style>
             .ui-widget-header {
                background: #cedc98;
                border: 1px solid #DDDDDD;
                color: #333333;
                font-weight: bold;
             }
          </style>
          <script>
             $(function() {
                $( "#progressbar-1" ).progressbar({
                   value: 30
                });
             });
          </script>
       </head>
       <body> 
          <div id = "progressbar-1"></div> 
       </body>
    </html>
    

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

    新页面打开

    此示例显示使用progressbar()方法创建进度条。 这是默认的确定进度条。

    使用max和value

    以下示例演示了JqueryUI的progressbar函数中两个选项valuesmax的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI ProgressBar 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>
          <style>
             .ui-widget-header {
                background: #cedc98;
                border: 1px solid #DDDDDD;
                color: #333333;
                font-weight: bold;
             }
          </style>
          <script>
             $(function() {
                var progressbar = $( "#progressbar-2" );
                $( "#progressbar-2" ).progressbar({
                   value: 30,
                   max:300
                });
                function progress() {
                   var val = progressbar.progressbar( "value" ) || 0;
                   progressbar.progressbar( "value", val + 1 );
                   if ( val < 99 ) {
                      setTimeout( progress, 100 );
                   }
                }
                setTimeout( progress, 3000 );
             });
          </script>
       </head>
       <body>
          <div id = "progressbar-2"></div>
       </body>
    </html>
    

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

    新页面打开

    在这里,您可以看到进度条从右向左填充,并在值达到300时停止。

    $ (selector, context).progressbar(“action”,params)方法

    progressbar ("action", params)方法可以对进度条执行操作,例如更改填充百分比。 该操作在第一个参数中指定为字符串(例如,“value”以更改填充的百分比)。 请查看下表中可以传递的操作。

    语法 (Syntax)

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

    下表列出了此方法可以使用的不同actions -

    Sr.No. 行动和描述
    1 destroy

    此操作完全删除元素的进度条功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy

    此操作完全删除元素的进度条功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).progressbar("destroy");
    
    2 destroy

    此操作完全删除元素的进度条功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy

    此操作完全删除元素的进度条功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).progressbar("destroy");
    
    3 disable

    此操作会禁用元素的进度条功能。 此方法不接受任何参数。

    Action - disable

    此操作会禁用元素的进度条功能。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).progressbar("disable");
    
    4 enable

    此操作启用进度条功能。 此方法不接受任何参数。

    Action - enable

    此操作启用进度条功能。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).progressbar("enable");
    
    5 option( optionName )

    此操作将检索当前与指定的optionName关联的值。 其中optionName是一个String。

    Action - option( optionName )

    此操作将检索当前与指定的optionName关联的值。 其中optionName是一个String。

    Syntax

    var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );
    
    6 option

    此操作获取一个对象,该对象包含表示当前进度条选项哈希的键/值对。 此方法不接受任何参数。

    Action - option

    此操作获取一个对象,该对象包含表示当前进度条选项哈希的键/值对。 此方法不接受任何参数。

    Syntax

    var options = $( ".selector" ).progressbar( "option" );
    
    7 option( optionName, value )

    此操作设置与指定的optionName关联的progressbar选项的值。

    Action - option( optionName, value )

    此操作设置与指定的optionName关联的progressbar选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

    Syntax

    $( ".selector" ).progressbar( "option", "disabled", true );
    
    8 option( options )

    此操作为进度条设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

    Action - option( options )

    此操作为进度条设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

    Syntax

    ( ".selector" ).progressbar( "option", { disabled: true } );
    
    9 value

    此操作将检索options.value的当前值,即进度条中填充的百分比。

    Action - value

    此操作将检索options.value的当前值,即进度条中填充的百分比。

    Syntax

    $( ".selector" ).progressbar("value");
    
    10 value( value )

    此操作指定进度条中填充百分比的新值。 参数value可以是Number或Boolean。

    Action - value( value )

    此操作指定进度条中填充百分比的新值。 参数value可以是Number或Boolean。

    Syntax

    $( ".selector" ).progressbar( "value", 50 );
    
    11 widget

    此操作返回包含进度条的jQuery对象。 此方法不接受任何参数。

    Action - widget

    此操作返回包含进度条的jQuery对象。 此方法不接受任何参数。

    Syntax

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

    例子 (Example)

    现在让我们看一个使用上表中的操作的示例。 以下示例演示了disable()option( optionName, value )方法的option( optionName, value )

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI ProgressBar 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>
          <style>
             .ui-widget-header {
                background: #cedc98;
                border: 1px solid #DDDDDD;
                color: #333333;
                font-weight: bold;
             }
          </style>
          <script>
             $(function() {
                $( "#progressbar-3" ).progressbar({
                   value: 30
                });
                $( "#progressbar-3" ).progressbar('disable');
                $( "#progressbar-4" ).progressbar({
                   value: 30
                });
                var progressbar = $( "#progressbar-4" );
                $( "#progressbar-4" ).progressbar( "option", "max", 1024 );
                function progress() {
                   var val = progressbar.progressbar( "value" ) || 0;
                   progressbar.progressbar( "value", val + 1 );
                   if ( val < 99 ) {
                      setTimeout( progress, 100 );
                   }
                }
                setTimeout( progress, 3000 );
             });
          </script>
       </head>
       <body>
          <h3>Disabled Progressbar</h3>
          <div id = "progressbar-3"></div><br>
          <h3>Progressbar with max value set</h3>
          <div id = "progressbar-4"></div>
       </body>
    </html>
    

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

    新页面打开

    禁用进度条

    最大值设置的进度条

    进度条元素的事件管理

    除了我们在前面几节中看到的progressbar(options)方法之外,JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -

    Sr.No. 事件方法和描述
    1 change(event, ui)

    只要进度条的值发生更改,就会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - change(event, ui)

    只要进度条的值发生更改,就会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).progressbar({
       change: function( event, ui ) {}
    });
    
    2 complete(event, ui)

    当进度条达到maximumm值时会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - complete(event, ui)

    >当进度条达到maximumm值时,将触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).progressbar({
       complete: function( event, ui ) {}
    });
    
    3 create(event, ui)

    每当创建进度条时都会触发此事件。 其中eventEvent类型, uiObject类型。

    Event - create(event, ui)

    每当创建进度条时都会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).progressbar({
       create: function( event, ui ) {}
    });
    

    例子 (Example)

    以下示例演示了进度栏功能期间的事件方法用法。 此示例演示了事件的使用changecomplete

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI ProgressBar 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>
          <style>
             .ui-widget-header {
                background: #cedc98;
                border: 1px solid #DDDDDD;
                color: #333333;
                font-weight: bold;
             }
             .progress-label {
                position: absolute;
                left: 50%;
                top: 13px;
                font-weight: bold;
                text-shadow: 1px 1px 0 #fff;
             }
          </style>
          <script>
             $(function() {
                var progressbar = $( "#progressbar-5" );
                progressLabel = $( ".progress-label" );
                $( "#progressbar-5" ).progressbar({
                   value: false,
                   change: function() {
                      progressLabel.text( 
                         progressbar.progressbar( "value" ) + "%" );
                   },
                   complete: function() {
                      progressLabel.text( "Loading Completed!" );
                   }
                });
                function progress() {
                   var val = progressbar.progressbar( "value" ) || 0;
                   progressbar.progressbar( "value", val + 1 );
                   if ( val < 99 ) {
                      setTimeout( progress, 100 );
                   }
                }
                setTimeout( progress, 3000 );
             });
          </script>
       </head>
       <body>
          <div id = "progressbar-5">
             <div class = "progress-label">
                Loading...
             </div>
          </div>
       </body>
    </html>
    

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

    新页面打开

    在这里您可以看到进度条更改其打印的更改值,并在完成事件时“加载完成!” 消息显示。

    JqueryUI - Slider

    只要获得某个范围内的数值,就会使用slider 。 滑块优先于文本输入的优点是用户无法输入错误的值。 他们可以使用滑块选择的任何值都是有效的。

    jQueryUI通过滑块小部件为我们提供了一个滑块控件。 jQueryUI提供了slider()方法,可以更改页面中HTML元素的外观,添加新的CSS类,为它们提供合适的样式。

    语法 (Syntax)

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

    $(selector,context).slider(options)方法

    slider (options)方法声明应将HTML元素作为滑块进行管理。 options参数是一个指定滑块外观和行为的对象。

    语法 (Syntax)

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

    您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

    下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 animate

    设置为true ,此选项会在用户直接单击轴时创建动画效果。 默认情况下,其值为false

    Option - animate

    设置为true ,此选项会在用户直接单击轴时创建动画效果。 默认情况下,其值为false

    这可以是 -

    • Boolean - 设置为true ,句柄将使用默认持续时间进行动画处理。

    • String -

      速度的名称,如slow, normal,fast
    • Number -

      动画的持续时间,以毫秒为单位。

    Syntax

    $( ".selector" ).slider(
       { animate: "fast" }
    );
    
    2 disabled

    此选项设置为true ,禁用滑块。 默认情况下,其值为false

    Option - disabled

    此选项设置为true ,禁用滑块。 默认情况下,其值为false

    Syntax

    $( ".selector" ).slider(
       { disabled: true }
    );
    
    3 max

    此选项指定滑块可以达到的范围的上限值 - 当手柄移动到最右侧(对于水平滑块)或顶部(对于垂直滑块)时表示的值。 默认情况下,其值为100

    Option - max

    此选项指定滑块可以达到的范围的上限值 - 当手柄移动到最右侧(对于水平滑块)或顶部(对于垂直滑块)时表示的值。 默认情况下,其值为100

    Syntax

    $( ".selector" ).slider(
       { max: 50 }
    );
    
    4 min

    此选项指定滑块可以获得的范围的较低值 - 当手柄移动到最左侧(对于水平滑块)或底部(对于垂直滑块)时表示的值。 默认情况下,其值为0

    Option - min

    此选项指定滑块可以获得的范围的较低值 - 当手柄移动到最左侧(对于水平滑块)或底部(对于垂直滑块)时表示的值。 默认情况下,其值为0

    Syntax

    $( ".selector" ).slider(
       { min: 10 }
    );
    
    5 orientation

    此选项指示滑块的水平或垂直方向。 默认情况下,其值为horizontal

    Option - orientation

    此选项指示滑块的水平或垂直方向。 默认情况下,其值为horizontal

    Syntax

    $( ".selector" ).slider(
       { "option", "orientation" }
    );
    
    6 range

    此选项指定滑块是否表示范围。 默认情况下,其值为false

    Option - range

    此选项指定滑块是否表示范围。 默认情况下,其值为false

    这可以是 -

    • Boolean - 如果指定为true ,并且滑块只有两个句柄,则会在句柄之间创建可以设置样式的元素。

    • String -

      可以是minmax 。 如果指定,则分别从句柄到滑块的开头或结尾创建一个范围元素。

    Syntax

    $( ".selector" ).slider(
       { range: true }
    );
    
    7 step

    此选项指定允许滑块表示的最小值和最大值之间的离散间隔。 默认情况下,其值为1

    Option - step

    此选项指定允许滑块表示的最小值和最大值之间的离散间隔。 默认情况下,其值为1

    Syntax

    $( ".selector" ).slider(
       { step: 5 }
    );
    
    8 value

    此选项指定单手柄滑块的初始值。 如果有多个句柄(请参阅值选项),请指定第一个句柄的值。 默认情况下,其值为1

    Option - value

    >此选项指定单手柄滑块的初始值。 如果有多个句柄(请参阅值选项),请指定第一个句柄的值。 默认情况下,其值为1

    Syntax

    $( ".selector" ).slider(
       { value: 10 }
    );
    
    9 values

    此选项的类型为Array,并导致创建多个句柄并指定这些句柄的初始值。 此选项应该是一个可能值的数组,每个句柄一个。 默认情况下,其值为null

    Option - values

    此选项的类型为Array,并导致创建多个句柄并指定这些句柄的初始值。 此选项应该是一个可能值的数组,每个句柄一个。 默认情况下,其值为null

    Syntax

    $( ".selector" ).slider(
       { values: [ 10, 25 ] }
    );
    

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

    默认功能

    以下示例演示了滑块功能的简单示例,不将任何参数传递给slider()方法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Slider 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() {
                $( "#slider-1" ).slider();
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "slider-1"></div>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,它是一个基本的水平滑块,有一个可以用鼠标移动或使用箭头键移动的手柄。

    使用价值,动画和方向

    下面的示例演示了三个选项的使用(a) value (b) animate以及(c) orientation JqueryUI滑块函数中的方向。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Slider 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() {
                $( "#slider-2" ).slider({
                   value: 60,
                   animate:"slow",
                   orientation: "horizontal"
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "slider-2"></div>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,滑块的value即初始值设置为60,因此您可以看到初始值为60的手柄。现在只需直接单击轴并查看动画效果。

    使用范围,最小值,最大值和值

    以下示例演示了JqueryUI的滑块函数中三个选项(a) range, (b) min(c) max(d) values的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Slider 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() {
                $( "#slider-3" ).slider({
                   range:true,
                   min: 0,
                   max: 500,
                   values: [ 35, 200 ],
                   slide: function( event, ui ) {
                      $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                   }
                });
                $( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
                   " - $" + $( "#slider-3" ).slider( "values", 1 ) );
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <p>
             <label for = "price">Price range:</label>
             <input type = "text" id = "price" 
                style = "border:0; color:#b9cd6d; font-weight:bold;">
          </p>
          <div id = "slider-3"></div>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,我们将range选项设置为true以使用两个拖动控制柄捕获一系列值。 手柄之间的空间用不同的背景颜色填充,以指示选择这些值。

    $ (selector, context).slider(“action”,params)方法

    slider ("action", params)方法允许对滑块执行操作,例如将光标移动到新位置。 该动作在第一个参数中被指定为一个字符串(例如,“value”表示光标的新值)。 请查看下表中可以传递的操作。

    语法 (Syntax)

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

    下表列出了此方法可以使用的不同actions -

    Sr.No. 行动和描述
    1 destroy

    此操作会完全破坏元素的滑块功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy

    此操作会完全破坏元素的滑块功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).slider("destroy");
    
    2 disable

    此操作会禁用滑块功能。 此方法不接受任何参数。

    Action - disable

    此操作会禁用滑块功能。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).slider("disable");
    
    3 enable

    此操作启用滑块功能。 此方法不接受任何参数。

    Action - enable

    此操作启用滑块功能。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).slider("enable");
    
    4 option( optionName )

    此操作将检索指定的param选项的值。 此选项对应于slider (options)使用的slider (options) 。 其中optionName是要获取的选项的名称。

    Action - option( optionName )

    此操作将检索指定的param选项的值。 此选项对应于slider (options)使用的slider (options) 。 其中optionName是要获取的选项的名称。

    Syntax

    var isDisabled = $( ".selector" ).slider( "option", "disabled" );
    
    5 option()

    此操作获取一个对象,其中包含表示当前滑块选项哈希的键/值对。

    Action - option()

    此操作获取一个对象,其中包含表示当前滑块选项哈希的键/值对。

    Syntax

    var options = $( ".selector" ).slider( "option" );
    
    6 option( optionName, value )

    此操作设置与指定的optionName关联的滑块选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

    Action - option( optionName, value )

    此操作设置与指定的optionName关联的滑块选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

    Syntax

    $( ".selector" ).slider( "option", "disabled", true );
    
    7 option( options )

    此操作为滑块设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

    Action - option( options )

    此操作为滑块设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。

    Syntax

    $( ".selector" ).slider( "option", { disabled: true } );
    
    8 value

    此操作将检索options.value (the slider)的当前值。 仅在滑块是唯一的情况下使用(如果不是,请使用slider ("values")) 。 此签名不接受任何参数。

    Action - value

    此操作检索options.value (the indicator)的当前值。 仅在指示符唯一时使用(如果不是,请使用slider ("values")) 。 此签名不接受任何参数。

    Syntax

    $( ".selector" ).slider("value");
    
    9 value( value )

    此操作设置滑块的值。

    Action - value( value )

    此操作设置滑块的值。

    Syntax

    $( ".selector" ).slider( "value", 55 );
    
    10 values

    此操作将检索options.values的当前值(数组中滑块的值)。 此签名不接受任何参数。

    Action - values

    此操作将检索options.values的当前值(数组中滑块的值)。 此签名不接受任何参数。

    Syntax

    var values = $( ".selector" ).slider( "values" );
    
    11 values( index )

    此操作获取指定句柄的值。 其中index的类型为Integer,并且是句柄的从零开始的索引。

    Action - values( index )

    此操作获取指定句柄的值。 其中index的类型为Integer,并且是句柄的从零开始的索引。

    Syntax

    var value = $( ".selector" ).slider( "values", 0 );
    
    12 values( index, value )

    此操作设置指定句柄的值。 其中index是句柄的从零开始的索引, value是要设置的值。

    Action - values( index, value )

    此操作设置指定句柄的值。 其中index是句柄的从零开始的索引, value是要设置的值。

    Syntax

    $( ".selector" ).slider( "values", 0, 55 );
    
    13 values( values )

    此操作设置所有句柄的值。

    Action - values( values )

    此操作设置所有句柄的值。

    Syntax

    $( ".selector" ).slider( "values", [ 55, 105 ] );
    
    14 widget

    此操作返回包含滑块的jQuery对象。 此方法不接受任何参数。

    Action - widget

    此操作返回包含滑块的jQuery对象。 此方法不接受任何参数。

    Syntax

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

    例子 (Example)

    现在让我们看一个使用上表中的操作的示例。 以下示例演示了disable()value()方法的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Slider 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() {
                $( "#slider-4" ).slider({
                   orientation:"vertical"	
                });
                $( "#slider-4" ).slider('disable');
                $( "#slider-5" ).slider({
                   orientation:"vertical",
                   value:50,
                   slide: function( event, ui ) {
                      $( "#minval" ).val( ui.value );
                   }	
                });
                $( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "slider-4"></div>
          <p>
             <label for = "minval">Minumum value:</label>
             <input type = "text" id = "minval" 
                style = "border:0; color:#b9cd6d; font-weight:bold;">
          </p>
          <div id = "slider-5"></div>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,第一个滑块被禁用,第二个滑块的值被设置为50。

    滑块元素的事件管理

    除了我们在前面部分中看到的滑块(选项)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

    Sr.No. 事件方法和描述
    1 change(event, ui)

    此事件通过用户操作或以编程方式触发句柄的值更改。

    Event - change(event, ui)

    此事件通过用户操作或以编程方式触发句柄的值更改。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • handle - 表示已更改handle的jQuery对象。

    • value - 滑块的当前值。

    Syntax

    $( ".selector" ).slider({
       change: function( event, ui ) {}
    });
    
    2 create(event, ui)

    创建滑块时会触发此事件。

    Event - create(event, ui)

    创建滑块时会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).slider({
       create: function( event, ui ) {}
    });
    
    3 slide(event, ui)

    只要通过滑块拖动手柄,就会触发鼠标移动事件。 返回false会取消幻灯片。

    Event - slide(event, ui)

    只要通过滑块拖动手柄,就会触发鼠标移动事件。 返回false会取消幻灯片。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • handle - 表示要移动的句柄的jQuery对象。

    • value - 如果未取消事件,句柄将移动到的值。

    • values - 多处理滑块的当前值数组。

    Syntax

    $( ".selector" ).slider({
       slide: function( event, ui ) {}
    });
    
    4 start(event, ui)

    用户开始滑动时会触发此事件。

    Event - start(event, ui)

    用户开始滑动时会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • handle - 表示要移动的句柄的jQuery对象。

    • value - 滑块的当前值。

    Syntax

    $( ".selector" ).slider({
       start: function( event, ui ) {}
    });
    
    5 stop(event, ui)

    幻灯片停止时会触发此事件。

    Event - stop(event, ui)

    幻灯片停止时会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • handle - 表示已移动handle的jQuery对象。

    • value - 滑块的当前值。

    Syntax

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

    例子 (Example)

    以下示例演示滑块功能期间的事件方法用法。 此示例演示了事件的startstopchangeslide

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Slider 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() {
                $( "#slider-6" ).slider({
                   range:true,
                   min: 0,
                   max: 500,
                   values: [ 35, 200 ],
                   start: function( event, ui ) {
                      $( "#startvalue" )
                         .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                   },
                   stop: function( event, ui ) {
                      $( "#stopvalue" )
                         .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                   },
                   change: function( event, ui ) {
                      $( "#changevalue" )
                         .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                   },
                   slide: function( event, ui ) {
                      $( "#slidevalue" )
                         .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                   }
               });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "slider-6"></div>
          <p>
             <label for = "startvalue">Start:</label>
             <input type = "text" id = "startvalue" 
                style = "border:0; color:#b9cd6d; font-weight:bold;">
          </p>
          <p>
             <label for = "stopvalue">Stop:</label>
             <input type = "text" id = "stopvalue" 
                style = "border:0; color:#b9cd6d; font-weight:bold;">
          </p>
          <p>
             <label for = "changevalue">Change:</label>
             <input type = "text" id = "changevalue" 
                style = "border:0; color:#b9cd6d; font-weight:bold;">
          </p>
          <p>
             <label for = "slidevalue">Slide:</label>
             <input type = "text" id = "slidevalue" 
                style = "border:0; color:#b9cd6d; font-weight:bold;">
          </p>
       </body>
    </html>
    

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

    新页面打开

    JqueryUI - Spinner

    Spinner小部件在输入框的左侧添加一个向上/向下箭头,从而允许用户递增/递减输入框中的值。 它允许用户直接键入值,或通过键盘,鼠标或滚轮旋转来修改现有值。 它还具有跳过值的步骤功能。 除了基本的数字功能外,它还支持全球化格式化选项(即货币,千位分隔符,小数等),从而提供方便的国际化屏蔽输入框。

    以下示例取决于Globalize 。 您可以从https://github.com/jquery/globalize获取Globalize文件。 单击releases链接,选择所需的版本,然后下载.ziptar.gz文件。 解压缩文件并将以下文件复制到示例所在的文件夹中。

    • lib/globalize.js:此文件包含用于处理本地化的Javascript代码

    • lib/globalize.culture.js:此文件包含Globalize库附带的一组完整语言环境。

    这些文件也存在于jquery-ui库的external文件夹中。

    jQueryUI提供了创建微调器的spinner()方法。

    语法 (Syntax)

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

    $(selector,context).spinner(options)方法

    spinner (options)方法声明应该将HTML元素及其内容作为微调器处理和管理。 options参数是一个对象,它指定所涉及的微调器元素的外观和行为。

    语法 (Syntax)

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

    您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

    下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 culture

    此选项设置用于解析和格式化值的区域性。 默认情况下,其值为null ,这意味着使用Globalize中当前设置的区域性。

    Option - culture

    此选项设置用于解析和格式化值的区域性。 默认情况下,其值为null ,这意味着使用Globalize中当前设置的区域性。 仅在设置了numberFormat选项时才相关。 需要包含Globalize

    Syntax

    $( ".selector" ).spinner(
       { culture: "fr" }
    );
    
    2 disabled

    如果设置为true则此选项将禁用微调器。 默认情况下,其值为false

    Option - disabled

    如果设置为true则此选项将禁用微调器。 默认情况下,其值为false

    Syntax

    $( ".selector" ).spinner(
       { disabled: true }
    );
    
    3 icons

    此选项设置用于按钮的图标,匹配jQuery UI CSS Framework提供的图标。 默认情况下,其值为{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }

    Option - icons

    此选项设置用于按钮的图标,匹配jQuery UI CSS Framework提供的图标。 默认情况下,其值为{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }

    Syntax

    $( ".selector" ).spinner(
       { icons: { down: "custom-down-icon", up: "custom-up-icon" } }
    );
    
    4 incremental

    此选项控制按住旋转按钮时所采取的步骤数。 默认情况下,其值为true

    Option - incremental

    此选项控制按住旋转按钮时所采取的步骤数。 默认情况下,其值为true

    这可以是 -

    • Boolean - 如果设置为false所有步骤都相等。 如果设置为true ,则在不断旋转时步进增量将增加。

    • Function - 必须返回当前旋转应该发生的步数。

    Syntax

    $( ".selector" ).spinner(
       { incremental: false }
    );
    
    5 max

    此选项指示允许的最大值。 默认情况下,其值为null ,这意味着没有最大强制执行。

    Option - max

    此选项指示允许的最大值。 默认情况下,其值为null ,这意味着没有最大强制执行。

    这可以是 -

    • Number - 最大值。

    • String - 如果包含Globalize,则max选项可以作为字符串传递,该字符串将根据numberFormatculture选项进行解析

    Syntax

    $( ".selector" ).spinner(
       { max: 50 }
    );
    
    6 min

    此选项指示允许的最小值。 默认情况下,其值为null ,这意味着没有最小强制执行。

    Option - min

    此选项指示允许的最小值。 默认情况下,其值为null ,这意味着没有最小强制执行。

    这可以是 -

    • Number - 最小值。

    • String - 如果包含Globalize,则min选项可以作为字符串传递,该字符串将根据numberFormatculture选项进行解析

    Syntax

    $( ".selector" ).spinner(
       { min: 0 }
    );
    
    7 numberFormat

    此选项指示传递给Globalize的数字格式(如果可用)。 最常见的是十进制数字的“n”和货币值的“C”。 默认情况下,其值为null

    Option - numberFormat

    此选项指示传递给Globalize的数字格式(如果可用)。 最常见的是十进制数字的“n”和货币值的“C”。 默认情况下,其值为null

    Syntax

    $( ".selector" ).spinner(
       { numberFormat: "n" }
    );
    
    8 page

    此选项指示通过pageUp/pageDown方法进行分页时要执行的步骤数。 默认情况下,其值为10

    Option - page

    此选项指示通过pageUp/pageDown方法进行分页时要执行的步骤数。 默认情况下,其值为10

    Syntax

    $( ".selector" ).spinner(
       { page: 5 }
    );
    
    9 step

    此选项指示通过按钮旋转或通过stepUp()/stepDown()方法执行时要执行的步骤的大小。 如果元素的step属性存在且未明确设置该选项,则使用该元素的step属性。

    Option - step

    此选项指示通过按钮旋转或通过stepUp()/stepDown()方法执行时要执行的步骤的大小。 如果元素的step属性存在且未明确设置该选项,则使用该元素的step属性。

    这可以是 -

    • Number - 步长。

    • String - 如果包含Globalize,则step选项可以作为字符串传递,该字符串将根据numberFormatculture选项进行解析,否则将回退到本机parseFloat。

    • Syntax

    $( ".selector" ).spinner(
       { step: 2 }
    );
    

    以下部分将向您展示微调器窗口小部件功能的一些工作示例。

    默认功能

    以下示例演示了一个简单的微调器窗口小部件功能示例,它不向spinner()方法传递任何参数。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Spinner 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 type = "text/css">
             #spinner-1 input {width: 100px}
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#spinner-1" ).spinner();
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "example">
             <input type = "text" id = "spinner-1" value = "0" />
          </div>
       </body>
    </html>
    

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

    新页面打开

    使用最小,最大和步长选项

    以下示例演示了JqueryUI的微调器小部件中三个选项minmaxstep的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Spinner 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 type = "text/css">
             #spinner-2,#spinner-3 input {width: 100px}
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#spinner-2" ).spinner({
                   min: -10, 
                   max: 10
                });
                $('#spinner-3').spinner({
                   step: 100, 
                   min: -1000000, 
                   max: 1000000
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "example">
             Spinner Min, Max value set:
             <input type = "text" id = "spinner-2" value = "0" /><br><br>
             Spinner increments/decrements in step of of 100:
             <input type = "text" id = "spinner-3" value = "0" />
          </div>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,您可以在第一个微调器中看到max和min值分别设置为10和-10。 因此,超过这些值,微调器将停止递增/递减。 在第二个微调器中,微调器值以100为步长递增/递减。

    使用图标选项

    以下示例演示了JqueryUI的微调框小部件中选项icons的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Spinner 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 type = "text/css">
             #spinner-5 input {width: 100px}
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#spinner-5" ).spinner({
                   icons: {
                      down: "custom-down-icon", up: "custom-up-icon"
                   }
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "example">
             <input type = "text" id = "spinner-5" value = "0" />
          </div>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,您可以注意到图像微调器已更改。

    使用culture,numberFormat和页面选项

    以下示例演示了numberFormat的微调器窗口小部件中三个选项culturenumberFormatpage的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Spinner 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 src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
          <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
          <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
          <script>
             $(function() {
                $( "#spinner-4" ).spinner({
                   culture:"de-DE",
                   numberFormat:"C",
                   step:2,
                   page:10
                });
             });
          </script>
       </head>
       <body>
          <p>
             <label for = "spinner-4">Amount to donate:</label>
             <input id = "spinner-4" name = "spinner" value = "5">
          </p>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,您可以看到微调器以货币格式显示数字,因为numberFormat设置为“C”, culture设置为“de-DE”。 这里我们使用了jquery-ui库中的Globalize文件。

    $ (selector, context).spinner(“action”,params)方法

    spinner ("action", params)方法可以对微调器元素执行操作,例如启用/禁用微调器。 该操作在第一个参数中指定为字符串(例如,“disable”禁用微调器)。 请查看下表中可以传递的操作。

    语法 (Syntax)

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

    下表列出了此方法可以使用的不同actions -

    Sr.No. 行动和描述
    1 destroy

    此操作会完全破坏元素的微调器功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy

    此操作会完全破坏元素的微调器功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $(".selector").spinner("destroy");
    
    2 disable

    此操作将禁用微调器功能。 此方法不接受任何参数。

    Action - disable

    此操作将禁用微调器功能。 此方法不接受任何参数。

    Syntax

    $(".selector").spinner("disable");
    
    3 enable

    此操作启用微调器功能。 此方法不接受任何参数。

    Action - enable

    此操作启用微调器功能。 此方法不接受任何参数。

    Syntax

    $(".selector").spinner("enable");
    
    4 option( optionName )

    此操作获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称。

    Action - option( optionName )

    此操作获取当前与指定的optionName关联的值。 其中optionName是要获取的选项的名称。

    Syntax

    var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
    
    5 option

    此操作获取一个对象,该对象包含表示当前微调器选项哈希的键/值对。 此方法不接受任何参数。

    Action - option

    此操作获取一个对象,该对象包含表示当前微调器选项哈希的键/值对。 此方法不接受任何参数。

    Syntax

    var options = $( ".selector" ).spinner( "option" );
    
    6 option( optionName, value )

    此操作设置与指定的optionName关联的微调器选项的值。

    Action - optionName

    此操作设置与指定的optionName关联的微调器选项的值。

    Syntax

    $( ".selector" ).spinner( "option", "disabled", true );
    
    7 option( options )

    此操作为微调器设置一个或多个选项。

    Action - option( options )

    此操作为微调器设置一个或多个选项。

    Syntax

    $(".selector").spinner("option", { disabled: true });
    
    8 pageDown([pages])

    此操作将值减少指定的页数,如页面选项所定义。

    Action - pageDown( [pages ] )

    此操作将值减少指定的页数,如页面选项所定义。 调用pageDown()将导致触发start, spin,stop事件。

    Syntax

    $(".selector").spinner("pageDown");
    
    9 pageUp([pages])

    此操作将值增加指定的页数,如页面选项所定义。

    Action - pageUp( [pages ] )

    此操作将值增加指定的页数,如页面选项所定义。 调用pageUp()将导致触发start, spin,stop事件。

    Syntax

    $(".selector").spinner("pageUp");
    
    10 stepDown([steps])

    此操作将值减少指定的步数。

    Action - stepDown( [steps ] )

    此操作将值减少指定的步数。 调用stepDown()将导致触发start, spin,stop事件。

    Syntax

    $(".selector").spinner("stepDown");
    
    11 stepUp([steps])

    此操作将值增加指定的步数。

    Action - stepUp( [steps ] )

    此操作将值增加指定的步数。 调用stepUp()将导致触发start, spin,stop事件。

    Syntax

    $(".selector").spinner("stepUp");
    
    12 value

    此操作将当前值作为数字。 该值基于numberFormat和culture选项进行解析。 此方法不接受任何参数。

    Action - value

    此操作将当前值作为数字。 该值基于numberFormat和culture选项进行解析。 此方法不接受任何参数。

    Syntax

    var value = $( ".selector" ).spinner( "value" );
    
    13 value( value )

    此操作设置值。 如果传递了值,则根据numberFormat和culture选项解析值。

    Action - value( value )

    此操作设置值。 如果传递了值,则根据numberFormat和culture选项解析值。

    Syntax

    $( ".selector" ).spinner( "value", 50 );
    
    14 widget

    此操作返回微调框小部件元素; 用ui-spinner类名注释的那个。

    Action - widget

    此操作返回微调框小部件元素; 用ui-spinner类名注释的那个。

    Syntax

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

    以下示例演示了如何使用上表中给出的操作。

    使用操作stepUp,stepDown,pageUp和pageDown

    以下示例演示了stepUp, stepDown, pageUppageDown方法的pageDown

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Spinner 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 type = "text/css">
             #spinner-6 input {width: 100px}
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $("#spinner-6").spinner();
                $('button').button();
                $('#stepUp-2').click(function () {
                   $("#spinner-6").spinner("stepUp");
                });
                $('#stepDown-2').click(function () {
                   $("#spinner-6").spinner("stepDown");
                });
                $('#pageUp-2').click(function () {
                   $("#spinner-6").spinner("pageUp");
                });
                $('#pageDown-2').click(function () {
                   $("#spinner-6").spinner("pageDown");
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <input id = "spinner-6" />
          <br/>
          <button id = "stepUp-2">Increment</button>
          <button id = "stepDown-2">Decrement</button>
          <button id = "pageUp-2">Increment Page</button>
          <button id = "pageDown-2">Decrement Page</button>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,使用相应的按钮递增/递减微调器。

    使用操作启用和禁用

    以下示例演示了enabledisable方法的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Spinner 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 type = "text/css">
             #spinner-7 input {width: 100px}
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $("#spinner-7").spinner();
                $('button').button();
                $('#stepUp-3').click(function () {
                   $("#spinner-7").spinner("enable");
                });
                $('#stepDown-3').click(function () {
                   $("#spinner-7").spinner("disable");
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <input id = "spinner-7" />
          <br/>
          <button id = "stepUp-3">Enable</button>
          <button id = "stepDown-3">Disable</button>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,使用“启用/禁用”按钮启用或禁用微调器。

    Spinner元素的事件管理

    除了我们在前面部分中看到的spinner(options)方法之外,JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下 -

    Sr.No. 事件方法和描述
    1 change(event, ui)

    微调器的值已更改且输入不再聚焦时触发此事件。

    Event - change(event, ui)

    微调器的值已更改且输入不再聚焦时触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).spinner({
       change: function( event, ui ) {}
    });
    
    2 create(event, ui)

    创建微调器时会触发此事件。

    Event - create(event, ui)

    创建微调器时会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).spinner({
       create: function( event, ui ) {}
    });
    
    3 spin(event, ui)

    在递增/递减期间触发此事件。

    Event - spin(event, ui)

    在递增/递减期间触发此事件。 其中eventEvent类型, uiObject类型。

    并表示要设置的新值,除非事件被取消。

    Syntax

    $( ".selector" ).spinner({
       spin: function( event, ui ) {}
    });
    
    4 start(event, ui)

    在旋转之前触发此事件。 可以取消,防止旋转发生。

    Event - start(event, ui)

    在旋转之前触发此事件。 可以取消,防止旋转发生。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).spinner({
       start: function( event, ui ) {}
    });
    
    5 stop(event, ui)

    旋转后触发此事件。

    Event - stop(event, ui)

    旋转后触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).spinner({
       stop: function( event, ui ) {}
    });
    

    例子 (Example)

    以下示例演示了微调器窗口小部件中的事件方法用法。 此示例演示了事件spinchangestop

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Spinner 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 type = "text/css">
             #spinner-8 input {width: 100px}
          </style>
          <!-- Javascript -->
          <script>
             $(function() {
                $( "#spinner-8" ).spinner({
                   spin: function( event, ui ) {
                      var result = $( "#result-2" );
                      result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
                   },
                   change: function( event, ui ) {
                      var result = $( "#result-2" );
                      result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
                   },
                   stop: function( event, ui ) {
                      var result = $( "#result-2" );
                      result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
                   }
                });
             });
          </script>
       </head>
       <body>
          <!-- HTML --> 
          <div id = "example">
             <input type = "text" id = "spinner-8" value = "0" />
          </div>
          <span id = "result-2"></span>
       </body>
    </html>
    

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

    新页面打开

    在上面的示例中,更改微调器的值,并查看下面显示的用于旋转和停止事件的消息。 现在更改微调器的焦点,您会看到更改事件上显示的消息。

    扩展点

    微调器窗口小部件是使用窗口小部件工厂构建的,可以进行扩展。 要扩展小部件,我们可以覆盖或添加现有方法的行为。 以下方法提供了与spinner方法具有相同API稳定性的扩展点。 列于上表中

    Sr.No. 方法和描述
    1 _buttonHtml(event)

    此方法返回一个HTML,它是一个HTML。 此HTML可用于微调器的递增和递减按钮。 必须为每个按钮指定一个ui-spinner-button类名,以使相关事件起作用。 此方法不接受任何参数。

    Extension Point - _buttonHtml(event, ui)

    此方法返回一个HTML,它是一个HTML。 此HTML可用于微调器的递增和递减按钮。 必须为每个按钮指定一个ui-spinner-button类名,以使相关事件起作用。 此方法不接受任何参数。

    Code Example

    _buttonHtml: function() {
      return "" +
        "<button class="ui-spinner-button ui-spinner-up">" +
          "<span class='ui-icon " + this.options.icons.up + "'>▲</span>" +
        "</button>" +
        "<button class="ui-spinner-button ui-spinner-down">" +
          "<span class='ui-icon " + this.options.icons.down + "'>▼</span>" +
        "</button>";
    }
    
    2 _uiSpinnerHtml(event)

    此方法确定用于包装微调器的《input》元素的HTML。 此方法不接受任何参数。

    Extension Point - _uiSpinnerHtml(event, ui)

    此方法确定用于包装微调器的《input》元素的HTML。 此方法不接受任何参数。

    Code Example

    _uiSpinnerHtml: function() {
      return " ";
    }
    
    jQuery UI Widget Factory是一个可扩展的基础,可以在其上构建所有jQuery UI的小部件。 使用小部件工厂构建插件为状态管理提供了便利,也为常见任务提供了便利,例如公开插件方法和在实例化后更改选项。

    JqueryUI - Tabs

    选项卡是一组逻辑分组的内容,允许我们在它们之间快速切换。 标签允许我们像手风琴一样节省空间。 要使标签正常工作,需要使用一组标记 -

    • 选项卡必须位于已排序(

        )或无序(
        )的列表中。
    • 每个标签标题必须位于每个

    • 中,并由具有href属性的anchor(<a>)标记包装。
    • 每个选项卡面板可以是任何有效元素,但它必须具有id ,该id对应于关联选项卡的锚点中的哈希。

    jQueryUI为我们提供了tabs()方法,彻底改变了页面内HTML元素的外观。 此方法遍历(在jQuery UI内部)HTML代码,并向相关元素(此处为选项卡)添加新的CSS类,以便为它们提供适当的样式。

    语法 (Syntax)

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

    $ (selector, context).tabs(选项)方法

    tabs (options)方法声明应将HTML元素及其内容作为选项卡进行管理。 options参数是一个指定选项卡外观和行为的对象。

    语法 (Syntax)

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

    您可以使用JavaScript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

    下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 active

    此选项指定当前活动的选项卡/面板。 默认情况下,其值为0

    Option - active

    此选项指定当前活动的选项卡/面板。 默认情况下,其值为0

    这可以是 -

    • Boolean - 设置为false ,将折叠所有面板。 这要求collapsible选项为true

    • Integer -

      面板的从零开始的索引处于活动状态(打开)。 负值选择从最后一个面板向后移动的面板。

    Syntax

    $( ".selector" ).tabs (
       { active: 1 }
    );
    
    2 collapsible

    此选项设置为true ,它允许取消选择选项卡。 设置为false(默认值)时,单击选定的选项卡不会取消选择(它保持选中状态)。 默认情况下,其值为false

    Option - collapsible

    此选项设置为true ,它允许取消选择选项卡。 设置为false(默认值)时,单击选定的选项卡不会取消选择(它保持选中状态)。 默认情况下,其值为false

    Syntax

    $( ".selector" ).tabs (
       { collapsible: true }
    );
    
    3 disabled

    此选项使用数组来指示已禁用的索引选项卡(因此无法选择)。 例如,使用[0,1]禁用前两个选项卡。 默认情况下,其值为false

    Option - disabled

    此选项使用数组来指示已禁用的索引选项卡(因此无法选择)。 例如,使用[0,1]禁用前两个选项卡。 默认情况下,其值为false

    这可以是 -

    • Boolean - 启用或禁用所有选项卡。

    • Array - 包含应禁用的选项卡的从零开始的索引的数组,例如[0,2]将禁用第一个和第三个选项卡。

    Syntax

    $( ".selector" ).tabs (
       { disabled: [ 0, 2 ] }
    );
    
    4 event

    此选项是允许用户选择新选项卡的事件名称。 例如,如果此选项设置为“鼠标悬停”,则将鼠标移到选项卡上将选择它。 默认情况下,其值为"click"

    Option - event

    此选项是允许用户选择新选项卡的事件名称。 例如,如果此选项设置为“鼠标悬停”,则将鼠标移到选项卡上将选择它。 默认情况下,其值为"click"

    Syntax

    $( ".selector" ).tabs (
       { event: "mouseover" }
    );
    
    5 heightStyle

    此选项控制选项卡窗口小部件和每个面板的高度。 默认情况下,其值为"content"

    Option - heightStyle

    此选项控制选项卡窗口小部件和每个面板的高度。 默认情况下,其值为"content"

    可能的值是 -

    • auto - 所有面板将设置为最高面板的高度。

    • fill - 根据选项卡的父高度扩展到可用高度。

    • content - 每个面板仅与其内容一样高。

    Syntax

    $( ".selector" ).tabs (
       { heightStyle: "fill" }
    );
    
    6 hide

    此选项指定如何为面板隐藏设置动画。 默认情况下,其值为null

    Option - hide

    此选项指定如何为面板隐藏设置动画。 默认情况下,其值为null

    这可以是 -

    • Boolean - 设置为false ,不使用任何动画,面板将立即隐藏。

    • Number - 面板将以指定的持续时间和默认缓动淡出。

    • String - 将使用指定的效果隐藏面板。 值可以是slideUpfold

    • Object - 对于此类型,可以提供属性effectdelayduration easing

    Syntax

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

    此选项指定如何动画显示面板。 默认情况下,其值为null

    Option - show

    此选项指定如何动画显示面板。 默认情况下,其值为null

    这可以是 -

    • Boolean - 设置为false ,不使用任何动画,面板将立即显示。

    • Number - 面板将以指定的持续时间和默认缓动淡出。

    • String - 将使用指定的效果显示面板。 值可以是slideUpfold

    • Object - 对于此类型,可以提供属性effectdelayduration easing

    Syntax

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

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

    默认功能

    以下示例演示了选项卡功能的简单示例,不向tabs()方法传递任何参数。

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

    让我们将上面的代码保存在HTML文件tabsexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

    新页面打开

    在上面的示例中,单击选项卡以在内容之间交换。

    使用heightStyle,可折叠和隐藏

    下面的示例演示了三个选项的用法(a) heightStyle (b) collapsible ,以及(c) hide在JqueryUI的tabs函数中。

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

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

    新页面打开

    单击选定的选项卡以切换其内容已关闭/打开。 选项卡关闭时,您还可以看到动画效果“slideUp”。

    使用事件

    以下示例演示了JqueryUI的tabs函数中三个options event的用法。

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

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

    新页面打开

    在上面的示例中,使用鼠标悬停选项卡切换打开/关闭的部分。

    $ (selector, context).tabs(“action”,params)方法

    tabs ("action", params)方法允许在选项卡上执行操作(通过JavaScript程序),选择,禁用,添加或删除选项卡。 该操作在第一个参数中指定为字符串(例如,“添加”以添加新选项卡)。 请查看下表中可以传递的操作。

    语法 (Syntax)

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

    下表列出了此方法可以使用的不同actions -

    Sr.No. 行动和描述
    1 destroy

    此操作会完全破坏元素的选项卡功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy

    此操作会完全破坏元素的选项卡功能。 元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).tabs("destroy");
    
    2 disable

    此操作会禁用所有选项卡。 此方法不接受任何参数。

    Action - disable

    此操作会禁用所有选项卡。 此方法不接受任何参数。

    Syntax

    $( ".selector" ).tabs("disable");
    
    3 disable( index )

    此操作将禁用指定的选项卡。 其中index是要禁用的选项卡。

    Action - disable( index )

    此操作将禁用指定的选项卡。 其中index是要禁用的选项卡。 要一次禁用多个选项卡,请设置禁用选项:$(“#tabs”)。tabs(“option”,“disabled”,[1,2,3])。

    Syntax

    $( ".selector" ).tabs( "disable", 1 );
    
    4 enable

    此操作会激活所有选项卡。 此签名不接受任何参数。

    Action - enable

    此操作会激活所有选项卡。 此签名不接受任何参数。

    Syntax

    $( ".selector" ).tabs("enable");
    
    5 enable( index )

    此操作会激活指定的选项卡。 其中index是要启用的选项卡。

    Action - enable( index )

    此操作会激活指定的选项卡。 其中index是要启用的选项卡。 要一次启用多个选项卡,请重置禁用的属性,如:$(“#example”)。tabs(“option”,“disabled”,[]);.

    Syntax

    $( ".selector" ).tabs( "enable", 1 );
    
    6 load( index )

    此操作会强制重新加载索引选项卡,忽略缓存。 其中index是要加载的选项卡。

    Action - load( index )

    此操作会强制重新加载索引选项卡,忽略缓存。 其中index是要加载的选项卡。

    Syntax

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

    此操作获取当前与指定的optionName关联的值。

    Action - option( optionName )

    此操作获取当前与指定的optionName关联的值。

    Syntax

    var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
    
    8 option

    此操作获取一个对象,该对象包含表示当前选项卡选项哈希的键/值对。

    Action - option

    此操作获取一个对象,该对象包含表示当前选项卡选项哈希的键/值对。 此方法不接受任何参数。

    Syntax

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

    此操作设置与指定的optionName关联的tabs选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

    Action - option( optionName, value )

    此操作设置与指定的optionName关联的tabs选项的值。 参数optionName是要设置的选项的名称, value是要为该选项设置的值。

    Syntax

    $( ".selector" ).tabs( "option", "disabled", true );
    
    10 option( options )

    此操作为选项卡设置一个或多个选项。

    Action - option( options )

    此操作为选项卡设置一个或多个选项。

    Syntax

    $( ".selector" ).tabs( "option", { disabled: true } );
    
    11 refresh

    当在DOM中直接添加或删除任何选项卡时,此操作会重新计算选项卡面板的高度。 结果取决于内容和heightStyle选项。

    Action - refresh

    当在DOM中直接添加或删除任何选项卡时,此操作会重新计算选项卡面板的高度。 结果取决于内容和heightStyle选项。

    Syntax

    $( ".selector" ).tabs( "refresh" );
    
    12 widget

    此操作返回用作选项卡窗口小部件的元素,使用ui-tabs类名称进行批注。

    Action - widget

    此操作返回用作选项卡窗口小部件的元素,使用ui-tabs类名称进行批注。

    Syntax

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

    Use of Action Disable()

    现在让我们看一个使用上表中的操作的示例。 以下示例演示了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>
    

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

    新页面打开

    在这里,您可以看到所有选项卡都被禁用。

    Use of Action Disable(index)

    现在让我们看一个使用上表中的操作的示例。 以下示例演示了disable(index)方法的用法。

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

    让我们将上面的代码保存在HTML文件tabsexample.htm ,并在支持javascript的标准浏览器中打开它,你应该看到以下输出 -

    新页面打开

    在上面的示例中,您注意到Tab 3已禁用。

    标签元素的事件管理

    除了我们在前面几节中看到的tabs(options)方法之外,JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -

    Sr.No. 事件方法和描述
    1 activate(event, ui)

    激活选项卡后(动画完成后)将触发此事件。

    Event - activate(event, ui)

    激活选项卡后(动画完成后)将触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • newTab - 刚刚激活的选项卡。

    • oldTab - 刚刚停用的选项卡。

    • newPanel - 刚刚激活的面板。

    • oldPanel - 刚刚停用的面板。

    Syntax

    $( ".selector" ).slider({
       activate: function( event, ui ) {}
    });
    
    2 beforeActivate(event, ui)

    在激活选项卡之前触发此事件。

    Event - beforeActivate(event, ui)

    在激活选项卡之前触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • newTab - 即将激活的选项卡。

    • oldTab - 即将停用的选项卡。

    • newPanel - 该面板即将被激活。

    • oldPanel - 面板即将停用。

    Syntax

    $( ".selector" ).slider({
       beforeActivate: function( event, ui ) {}
    });
    
    3 beforeLoad(event, ui)

    beforeActivate事件之后,即将加载远程选项卡时会触发此事件。 在发出Ajax请求之前触发此事件。

    Event - beforeLoad(event, ui)

    beforeActivate事件之后,即将加载远程选项卡时会触发此事件。 在发出Ajax请求之前触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • tab - 正在加载的选项卡。

    • panel - 将由Ajax响应填充的面板。

    • jqXHR - 请求内容的jqXHR对象。

    • ajaxSettings - jQuery.ajax用于请求内容的设置。

    Syntax

    $( ".selector" ).slider({
       beforeLoad: function( event, ui ) {}
    });
    
    4 create(event, ui)

    创建选项卡时会触发此事件。

    Event - create(event, ui)

    创建选项卡时会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • tab - 活动选项卡。

    • panel - 活动面板。

    Syntax

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

    加载远程选项卡后会触发此事件。

    Event - load(event, ui)

    加载远程选项卡后会触发此事件。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • tab - 刚刚加载的选项卡。

    • panel - 刚刚由Ajax响应填充的面板。

    Syntax

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

    例子 (Example)

    以下示例演示了标签窗口小部件中的事件方法用法。 此示例演示了使用事件activatecreate

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

    让我们将上面的代码保存在HTML文件tabsexample.htm ,并在支持javascript的标准浏览器中打开它,你应该看到以下输出 -

    新页面打开

    单击选项卡以查看特定于事件的下面打印的消息。

    JqueryUI - Tooltip

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

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

    语法 (Syntax)

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

    $(selector,context).tooltip(options)方法

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

    语法 (Syntax)

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

    您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项,则您将使用逗号分隔它们,如下所示 -

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

    下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 content

    此选项表示工具提示的内容。 默认情况下,它的值是function returning the title attribute

    Option - content

    此选项表示工具提示的内容。 默认情况下,它的值是function returning the title attribute 。 这可以是 -

    • Function - 回调可以直接返回内容,也可以调用第一个参数,传入内容,例如。 对于ajax内容。

    • String - 用于工具提示内容的HTML字符串。

    Syntax

    $(".selector").tooltip(
       { content: "Some content!" }
    );
    
    2 disabled

    设置为true时,此选项将禁用工具提示。 默认情况下,其值为false

    Option - disabled

    设置为true时,此选项将禁用工具提示。 默认情况下,其值为false

    Syntax

    $(".selector").tooltip(
       { disabled: true }
    );
    
    3 hide

    此选项表示隐藏工具提示时的动画效果。 默认情况下,其值为true

    Option - hide

    此选项表示隐藏工具提示时的动画效果。 默认情况下,其值为true 。 这可以是 -

    • Boolean - 这可以是truefalse 。 设置为true ,工具提示将以默认持续时间和默认缓动淡出。

    • Number - 工具提示将以指定的持续时间和默认缓动淡出。

    • String - 将使用指定的效果隐藏工具提示,例如"slideUp", "fold"

    • Object - 可能的值包括effect, delay, duration, easing

    Syntax

    $(".selector").tooltip(
       { hide: { effect: "explode", duration: 1000 } }
    );
    
    4 items

    此选项指示哪些项目可以显示工具提示。 默认情况下,其值为[title]

    Option - items

    此选项指示哪些项目可以显示工具提示。 默认情况下,其值为[title]

    Syntax

    $(".selector").tooltip(
       { items: "img[alt]" }
    );
    
    5 position

    此选项决定相关目标元素的工具提示的位置。 默认情况下,它的值是function returning the title attribute 。 可能的值包括: my, at, of, collision, using, within.

    Option - position

    此选项决定相关目标元素的工具提示的位置。 默认情况下,它的值是function returning the title attribute 。 可能的值包括: my, at, of, collision, using, within.

    Syntax

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

    此选项表示如何为工具提示的显示设置动画。 默认情况下,其值为true

    Option - show

    此选项表示如何为工具提示的显示设置动画。 默认情况下,其值为true 。 这可以是 -

    • Boolean - 这可以是truefalse 。 设置为true ,工具提示将以默认持续时间和默认缓动淡出。

    • Number - 工具提示将以指定的持续时间和默认缓动淡出。

    • String - 将使用指定的效果隐藏工具提示,例如"slideUp", "fold"

    • Object - 可能的值包括effect, delay, duration, easing

    Syntax

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

    此选项是一个类,可以将其添加到工具提示窗口小部件中,以获取警告或错误等工具提示。 默认情况下,其值为null

    Option - tooltipClass

    此选项是一个类,可以将其添加到工具提示窗口小部件中,以获取警告或错误等工具提示。 默认情况下,其值为null

    Syntax

    $(".selector").tooltip(
       { tooltipClass: "custom-tooltip-styling" } }
    );
    
    8 track

    此选项设置为true ,工具提示跟随/跟踪鼠标。 默认情况下,其值为false

    Option - track

    此选项设置为true ,工具提示跟随/跟踪鼠标。 默认情况下,其值为false

    Syntax

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

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

    默认功能

    以下示例演示了一个工具提示功能的简单示例,该功能不将任何参数传递给tooltip()方法。

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

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

    新页面打开

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

    使用内容,跟踪和禁用

    以下示例显示了JqueryUI工具提示功能中三个重要选项(a) content (b) track(c) disabled的用法。

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

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

    新页面打开

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

    使用职位

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

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

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

    新页面打开

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

    $ (selector, context).tooltip(“action”,[params])方法

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

    基本上,这里的操作只不过是jQuery方法,我们可以以字符串的形式使用它们。

    语法 (Syntax)

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

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

    Sr.No. 行动和描述
    1 close()

    此操作将关闭工具提示。 此方法不接受任何参数。

    Action - close()

    此操作将关闭工具提示。 此方法不接受任何参数。

    Syntax

    $(".selector").tooltip("close");
    
    2 destroy()

    此操作将完全删除工具提示功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

    Action - destroy()

    此操作将完全删除工具提示功能。 这将使元素返回到pre-init状态。 此方法不接受任何参数。

    Syntax

    $(".selector").tooltip("destroy");
    
    3 disable()

    此操作将停用工具提示。 此方法不接受任何参数。

    Action - disable()

    此操作将停用工具提示。 此方法不接受任何参数。

    Syntax

    $(".selector").tooltip("disable");
    
    4 enable()

    此操作会激活工具提示。 此方法不接受任何参数。

    Action - enable()

    此操作会激活工具提示。 此方法不接受任何参数。

    Syntax

    $(".selector").tooltip("enable");
    
    5 open()

    此操作以编程方式打开工具提示。 此方法不接受任何参数。

    Action - open()

    此操作以编程方式打开工具提示。 此方法不接受任何参数。

    Syntax

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

    此操作获取与工具提示的optionName关联的值。 此方法不接受任何参数。

    Action - option( optionName )

    此操作获取与工具提示的optionName关联的值。 此方法不接受任何参数。

    Syntax

    var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
    
    7 option()

    此操作获取一个对象,该对象包含表示当前工具提示选项哈希的键/值对。 此方法不接受任何参数。

    Action - option()

    此操作获取一个对象,该对象包含表示当前工具提示选项哈希的键/值对。 此方法不接受任何参数。

    Syntax

    $(".selector").tooltip("option");
    
    8 option( optionName, value )

    此操作设置与指定的optionName关联的工具提示选项的值。

    Action - option( optionName, value )

    此操作设置与指定的optionName关联的工具提示选项的值。

    Syntax

    $( ".selector" ).tooltip( "option", "disabled", true );
    
    9 option( options )

    此操作为工具提示设置一个或多个选项。

    Action - option( options )

    此操作为工具提示设置一个或多个选项。

    Syntax

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

    此操作返回包含原始元素的jQuery对象。 此方法不接受任何参数。

    Action - widget()

    此操作返回包含原始元素的jQuery对象。 此方法不接受任何参数。

    Syntax

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

    例子 (Examples)

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

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

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

    新页面打开

    在上面的示例中,单击myBtn按钮,弹出工具提示。

    工具提示元素的事件管理

    除了我们在前面部分中看到的tooltip(options)方法之外,JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -

    Sr.No. 事件方法和描述
    1 create(event, ui)

    创建工具提示时触发。 其中eventEvent类型, uiObject类型。

    Event - create(event, ui)

    创建工具提示时触发。 其中eventEvent类型, uiObject类型。

    Syntax

    $(".selector").tooltip(
       create: function(event, ui) {}
    );
    
    2 close(event, ui)

    工具提示关闭时触发。 通常在focusoutfocusout触发。 其中eventEvent类型, uiObject类型。

    Event - close(event, ui)

    工具提示关闭时触发。 通常在focusoutfocusout触发。 其中eventEvent类型, uiObject类型。 ui可能值是 -

    • tooltip - 生成的工具提示元素。

    Syntax

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

    显示或显示工具提示时触发。 通常在focusinmouseover上触发。 其中eventEvent类型, uiObject类型。

    Event - open(event, ui)

    显示或显示工具提示时触发。 通常在focusinmouseover上触发。 其中eventEvent类型, uiObject类型.ui的可能值是 -

    • tooltip - 生成的工具提示元素。

    Syntax

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

    例子 (Examples)

    以下示例演示了工具提示功能期间的事件方法用法。 此示例演示了openclose事件的使用。

    <!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 IoWiki…',
                   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>
    

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

    新页面打开

    在上面的例子中, Hover over me!的工具提示Hover over me! 立即消失,而工具提示也Hover over me too! 在1000ms的持续时间后消失。

    JqueryUI - Add Class

    本章将讨论addClass()方法,它是用于管理jQueryUI视觉效果的方法之一。 addClass()方法允许动画对CSS属性的更改。

    addClass()方法为匹配的元素添加指定的类,同时为所有样式更改设置动画。

    语法 (Syntax)

    在jQueryUI的1.0版中添加

    addClass()方法的基本语法如下 -

    .addClass( className [, duration ] [, easing ] [, complete ] )
    
    Sr.No. 参数和描述
    1

    className

    这是一个包含一个或多个CSS类(由空格分隔)的String。

    2

    duration

    它的类型为Number或String,表示效果的毫秒数。 值为0会直接在新样式中使用元素,而无需进度。 其默认值为400

    3

    easing

    这是String类型,表示在效果中进行的方式。 它的默认值是swing 。 可能的值在here

    4

    complete

    这是对此元素的效果完成时为每个元素调用的回调方法。

    在jQueryUI 1.9版中添加

    对于1.9版本,此方法现在支持children选项,该选项还将为后代元素设置动画。

    .addClass( className [, options ] )
    
    Sr.No. 参数和描述
    1

    className

    这是一个包含一个或多个CSS类(由空格分隔)的String。

    2

    options

    这表示所有动画设置。 所有属性都是可选的。 可能的值是 -

    • duration - 这是Number或String类型,表示效果的毫秒数。 值为0会直接在新样式中使用元素,而无需进度。 其默认值为400

    • easing - 这是String类型,表示在效果中进行的方式。 它的默认值是swing 。 可能的值在here

    • complete - 这是在为此元素完成效果时为每个元素调用的回调方法。

    • children - 这是布尔类型,表示动画是否应另外应用于匹配元素的所有后代。 其默认值为false

    • queue - 这是Boolean或String类型,表示是否将动画放在效果队列中。 其默认值为true

    例子 (Examples)

    以下示例演示了addClass()方法的用法。

    通过单班

    <!DOCTYPE html>
    <html>
       <head>
          <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>
       </head>
       <body>
          <div id = animTarget class = "elemClass">
             Hello!
          </div>
          <button class = "button" id = "add">Add Class</button>
          <button class = "button" id = "remove">Remove Class</button>
       </body>
    </html>
    

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

    新页面打开

    单击“ Add Class和“ Remove Class按钮以查看类对该框的影响。

    传递多个class

    此示例显示如何将多个类传递给addClass方法。

    <!doctype html>
    <html lang = "en">
       <head>
          <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>
       </head>
       <body>
          <p id = "welcome">Welcome to IOWIKI!</p>
          <button class = "button-1">Click me</button>
       </body>
    </html>
    

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

    新页面打开

    JqueryUI - Color Animation

    jQueryUI扩展了一些核心jQuery方法,以便您可以为元素设置不同的过渡动画。 其中一个是animate方法。 jQueryUI扩展了jQuery animate方法,以添加对动画颜色的支持。 您可以为定义元素颜色的多个CSS属性中的一个设置动画。 以下是animate方法支持的CSS属性。

    • backgroundColor - 设置元素的背景颜色。

    • borderTopColor - 设置元素边框顶部的颜色。

    • borderBottomColor - 设置元素边框底部的颜色。

    • borderLeftColor - 设置元素边框左侧的颜色。

    • borderRightColor - 设置元素边框右侧的颜色。

    • color - 设置元素的文本颜色。

    • outlineColor - 设置轮廓的颜色; 用来强调元素。

    语法 (Syntax)

    以下是jQueryUI animate方法的语法 -

    $( "#selector" ).animate(
       { backgroundColor: "black",
          color: "white"
       }
    );
    

    您可以在此方法中设置任意数量的属性,以(逗号)分隔。

    例子 (Example)

    以下示例演示了addClass()方法的用法。

    <!DOCTYPE html>
    <html>
       <head>
          <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-1').click(function() {
                   $('#animTarget').animate({
                      backgroundColor: "black",
                      color: "white"
                   })
                })
             });
          </script>
       </head>
       <body>
          <div id = animTarget class = "elemClass">
             Hello!
          </div>
          <button id = "button-1">Click Me</button>
       </body>
    </html>
    

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

    新页面打开

    单击按钮,查看动画如何更改框。

    JqueryUI - Effect

    本章将讨论effect()方法,它是用于管理jQueryUI视觉效果的方法之一。 effect()方法将动画效果应用于元素,而不必显示或隐藏它。

    语法 (Syntax)

    effect()方法具有以下语法 -

    .effect( effect [, options ] [, duration ] [, complete ] )
    
    Sr.No. 参数和描述
    1

    effect

    这是一个String,指示用于转换的效果。

    2

    options

    这是Object类型,表示特定于效果的设置easing 。 此外,每个效果都有自己的一组选项,可以在表jQueryUI Effects描述的多个效果中共同指定。

    3

    duration

    它的类型为Number或String,表示效果的毫秒数。 其默认值为400

    4

    complete

    这是对此元素的效果完成时为每个元素调用的回调方法。

    jQueryUI效果

    下表描述了可以与effects()方法一起使用的各种效果 -

    Sr.No. 效果和描述
    1

    blind

    以窗帘的方式显示或隐藏元素:向下或向上移动底边,或向右或向左移动右边边,具体取决于指定的directionmode

    2

    bounce

    使元素看起来在垂直或水平方向上反弹,可选地显示或隐藏元素。

    3

    clip

    通过将元素的相对边界移动到一起直到它们在中间相遇来显示或隐藏元素,反之亦然。

    4

    drop

    通过使元素显示为放下或删除页面来显示或隐藏元素。

    5

    explode

    通过将元素拆分为多个在径向方向上移动的片段来显示或隐藏元素,就像在页面中嵌入或爆炸一样。

    6

    fade

    通过调整其不透明度来显示或隐藏元素。 这与核心淡入淡出效果相同,但没有选项。

    7

    fold

    通过调整或调出相反的边框来显示或隐藏元素,然后对另一组边框执行相同的操作。

    8

    highlight

    通过在显示或隐藏元素时暂时更改其背景颜色来调用元素。

    9

    puff

    在调整其不透明度的同时扩展或收缩元素。

    10

    pulsate

    在确保按指定显示或隐藏元素之前,调整元素的不透明度。

    11

    scale

    按指定百分比扩展或收缩元素。

    12

    shake

    垂直或水平地来回摇动元件。

    13

    size

    将元素的大小调整为指定的宽度和高度。 与规模类似,但指定目标大小的方式除外。

    14

    slide

    移动元素,使其看起来可以滑入或滑出页面。

    15

    transfer

    动画一个瞬态轮廓元素,使元素看起来转移到另一个元素。 必须通过ui-effects-transfer类的CSS规则或指定为选项的类来定义outline元素的外观。

    例子 (Examples)

    以下示例演示了如何使用上表中列出的具有不同效果的effect()方法。

    效果 - 摇晃

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI effect 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>
             #box-1 {
                height: 100px;
                width: 100px;
                background: #b9cd6d;
             }
          </style>
          <script>
             $(document).ready(function() {
                $('#box-1').click(function() {
                   $( "#box-1" ).effect( "shake", {
                      times: 10,
                      distance: 100
                   }, 3000, function() {
                      $( this ).css( "background", "#cccccc" );
                   });
                });
             });
          </script>
       </head>
       <body>
          <div id = "box-1">Click On Me</div>
       </body>
    </html>
    

    让我们将上述代码保存在HTML文件effectexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

    新页面打开

    效果 - 爆炸

    <!doctype html>
    <html lang="en">
       <head>
          <meta charset="utf-8">
          <title>jQuery UI effect 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>
             #box-2 {
                height: 100px;
                width: 100px;
                background: #b9cd6d;
             }
          </style>
          <script>
             $(document).ready(function() {
                $('#box-2').click(function() {
                   $( "#box-2" ).effect({
                      effect: "explode",
                      easing: "easeInExpo",
                      pieces: 4,
                      duration: 5000
                   });
                });
             });
          </script>
       </head>
       <body>
          <div id="box-2"></div>
       </body>
    </html>
    

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

    新页面打开

    JqueryUI - Hide

    本章将讨论hide()方法,它是用于管理jQueryUI视觉效果的方法之一。 effect()方法应用动画效果来隐藏元素。

    语法 (Syntax)

    hide()方法具有以下语法 -

    .hide( effect [, options ] [, duration ] [, complete ] )
    
    Sr.No. 参数和描述
    1

    effect

    这是一个String,指示用于转换的效果。

    2

    options

    这是Object类型,表示特定于效果的设置easing 。 此外,每个效果都有自己的一组选项,可以在表jQueryUI Effects描述的多个效果中共同指定。

    3

    duration

    它的类型为Number或String,表示效果的毫秒数。 其默认值为400

    4

    complete

    这是对此元素的效果完成时为每个元素调用的回调方法。

    jQueryUI效果

    下表描述了hide()方法可以使用的各种效果 -

    Sr.No. 效果和描述
    1

    blind

    以窗帘的方式显示或隐藏元素:向下或向上移动底边,或向右或向左移动右边边,具体取决于指定的directionmode

    2

    bounce

    使元素看起来在垂直或水平方向上反弹,可选地显示或隐藏元素。

    3

    clip

    通过将元素的相对边界移动到一起直到它们在中间相遇来显示或隐藏元素,反之亦然。

    4

    drop

    通过使元素显示为放下或删除页面来显示或隐藏元素。

    5

    explode

    通过将元素拆分为多个在径向方向上移动的片段来显示或隐藏元素,就像在页面中嵌入或爆炸一样。

    6

    fade

    通过调整其不透明度来显示或隐藏元素。 这与核心淡入淡出效果相同,但没有选项。

    7

    fold

    通过调整或调出相反的边框来显示或隐藏元素,然后对另一组边框执行相同的操作。

    8

    highlight

    通过在显示或隐藏元素时暂时更改其背景颜色来调用元素。

    9

    puff

    在调整其不透明度的同时扩展或收缩元素。

    10

    pulsate

    在确保按指定显示或隐藏元素之前,调整元素的不透明度。

    11

    scale

    按指定百分比扩展或收缩元素。

    12

    shake

    垂直或水平地来回摇动元件。

    14

    size

    将元素的大小调整为指定的宽度和高度。 与规模类似,但指定目标大小的方式除外。

    15

    slide

    移动元素,使其看起来可以滑入或滑出页面。

    16

    transfer

    动画一个瞬态轮廓元素,使元素看起来转移到另一个元素。 必须通过ui-effects-transfer类的CSS规则或指定为选项的类来定义outline元素的外观。

    例子 (Examples)

    以下示例演示了如何使用上表中列出的具有不同效果的hide()方法。

    效果 - 盲目

    以下示例显示了使用hide()方法的blind效果。 单击“ Blind Effect Hide ”按钮可在元素隐藏之前查看盲效。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI hide 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>
             .toggler { width: 500px; height: 200px; }
                #button { padding: .5em 1em; text-decoration: none; }
                #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
                #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
          </style>
          <script>
             $(function() {
                function runEffect() {
                   $( "#effect" ).hide( "blind", {times: 10, distance: 100}, 1000, callback );
                };
                // callback function to bring a hidden box back
                function callback() {
                   setTimeout(function() {
                      $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
                   }, 1000 );
                };
                $( "#button" ).click(function() {
                   runEffect();
                   return false;
                });
             });
          </script>
       </head>
       <body>
          <div class = "toggler">
             <div id = "effect" class = "ui-widget-content ui-corner-all">
                <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
                <p>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                </p>
             </div>
          </div>
          <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Blind Effect Hide</a>
       </body>
    </html>
    

    让我们将上述代码保存在HTML文件hideexample.htm ,并在支持javascript的标准浏览器中打开它,您应该看到以下输出。 现在,你可以玩结果 -

    新页面打开

    效果 - 摇晃

    以下示例显示了使用具有blind效的shake()方法。 单击“ Shake Effect Hide ”按钮以在元素隐藏之前查看摇动效果。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI hide 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>
             .toggler-1 { width: 500px; height: 200px; }
                #button-1 { padding: .5em 1em; text-decoration: none; }
                #effect-1 { width: 240px; height: 135px; padding: 0.4em; position: relative; }
                #effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
          </style>
          <script>
             $(function() {
                function runEffect() {
                   $( "#effect-1" ).hide( "shake", {times: 10, distance: 100}, 1000, callback );
                };
                // callback function to bring a hidden box back
                function callback() {
                   setTimeout(function() {
                      $( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
                   }, 1000 );
                };
                // set effect from select menu value
                $( "#button-1" ).click(function() {
                   runEffect();
                   return false;
                });
             });
          </script>
       </head>
       <body>
          <div class = "toggler-1">
             <div id = "effect-1" class = "ui-widget-content ui-corner-all">
                <h3 class = "ui-widget-header ui-corner-all">Hide</h3>
                <p>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                </p>
             </div>
          </div>
          <a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a>
       </body>
    </html>
    

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

    新页面打开

    JqueryUI - Remove Class

    本章将讨论removeClass()方法,它是用于管理jQueryUI视觉效果的方法之一。 removeClass()方法从元素中删除应用的类。

    removeClass()方法在为所有样式更改设置动画时将指定的类移除到匹配的元素。

    语法 (Syntax)

    在jQueryUI的1.0版中添加

    removeClass()方法的基本语法如下 -

    .removeClass( className [, duration ] [, easing ] [, complete ] )
    
    Sr.No. 参数和描述
    1

    className

    这是一个包含一个或多个要删除的CSS类(用空格分隔)的String。

    2

    duration

    它的类型为Number或String,表示效果的毫秒数。 值为0会直接在新样式中使用元素,而无需进度。 其默认值为400

    3

    easing

    这是String类型,表示在效果中进行的方式。 它的默认值是swing 。 可能的值在here

    4

    complete

    这是对此元素的效果完成时为每个元素调用的回调方法。

    在jQueryUI 1.9版中添加

    对于1.9版本,此方法现在支持children选项,该选项还将为后代元素设置动画。

    .removeClass( className [, options ] )
    
    Sr.No. 参数和描述
    1

    className

    这是一个包含一个或多个CSS类(由空格分隔)的String。

    2

    options

    这表示所有动画设置。 所有属性都是可选的。 可能的值是 -

    • duration - 这是Number或String类型,表示效果的毫秒数。 值为0会直接在新样式中使用元素,而无需进度。 其默认值为400

    • easing - 这是String类型,表示在效果中进行的方式。 它的默认值是swing 。 可能的值在here

    • complete - 这是在为此元素完成效果时为每个元素调用的回调方法。

    • children - 这是布尔类型,表示动画是否应另外应用于匹配元素的所有后代。 其默认值为false

    • queue - 这是Boolean或String类型,表示是否将动画放在效果队列中。 其默认值为true

    例子 (Examples)

    以下示例演示了removeClass()方法的用法。

    通过单班

    <!DOCTYPE html>
    <html>
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI removeClass 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>
       </head>
       <body>
          <div id = animTarget class = "elemClass">
             Hello!
          </div>
          <button class = "button" id = "add">Add Class</button>
          <button class = "button" id = "remove">Remove Class</button>
       </body>
    </html>
    

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

    新页面打开

    单击“ Add Class和“ Remove Class按钮以查看类对该框的影响。

    JqueryUI - Show

    本章将讨论show()方法,它是用于管理jQueryUI视觉效果的方法之一。 show()方法使用指示的效果显示项目。

    show()方法使用指定的效果切换包装元素的可见性。

    语法 (Syntax)

    show()方法具有以下语法 -

    .show( effect [, options ] [, duration ] [, complete ] )
    
    Sr.No. 参数和描述
    1

    effect

    这是一个String,指示要用于转换的效果。这是一个String,表示调整元素可见性时要使用的效果。 效果列于下表中。

    2

    options

    这是Object类型,表示特定于效果的设置easing 。 此外,每个效果都有自己的一组选项,可以在表jQueryUI Effects描述的多个效果中共同指定。

    3

    duration

    它的类型为Number或String,用于确定动画的运行时间。 其默认值为400

    4

    complete

    这是对此元素的效果完成时为每个元素调用的回调方法。

    jQueryUI效果

    下表描述了可以与effects()方法一起使用的各种效果 -

    Sr.No. 效果和描述
    1

    blind

    以窗帘的方式显示或隐藏元素:向下或向上移动底边,或向右或向左移动右边边,具体取决于指定的directionmode

    2

    bounce

    使元素看起来在垂直或水平方向上反弹,可选地显示或隐藏元素。

    3

    clip

    通过将元素的相对边界移动到一起直到它们在中间相遇来显示或隐藏元素,反之亦然。

    4

    drop

    通过使元素显示为放下或删除页面来显示或隐藏元素。

    5

    explode

    通过将元素拆分为多个在径向方向上移动的片段来显示或隐藏元素,就像在页面中嵌入或爆炸一样。

    6

    fade

    通过调整其不透明度来显示或隐藏元素。 这与核心淡入淡出效果相同,但没有选项。

    7

    fold

    通过调整或调出相反的边框来显示或隐藏元素,然后对另一组边框执行相同的操作。

    8

    highlight

    通过在显示或隐藏元素时暂时更改其背景颜色来调用元素。

    9

    puff

    在调整其不透明度的同时扩展或收缩元素。

    10

    pulsate

    在确保按指定显示或隐藏元素之前,调整元素的不透明度。

    11

    scale

    按指定百分比扩展或收缩元素。

    12

    shake

    垂直或水平地来回摇动元件。

    13

    size

    将元素的大小调整为指定的宽度和高度。 与规模类似,但指定目标大小的方式除外。

    14

    slide

    移动元素,使其看起来可以滑入或滑出页面。

    15

    transfer

    动画一个瞬态轮廓元素,使元素看起来转移到另一个元素。 必须通过ui-effects-transfer类的CSS规则或指定为选项的类来定义outline元素的外观。

    例子 (Examples)

    以下示例演示了show()方法的用法。

    显示摇动效果

    以下示例演示了具有shake效果的show()方法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI show 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>
             .toggler { width: 500px; height: 200px; }
             #button { padding: .5em 1em; text-decoration: none; }
             #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
             #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
          </style>
          <script>
             $(function() {
                // run the currently selected effect
                function runEffect() {
                   // run the effect
                   $( "#effect" ).show( "shake", {times: 10,distance: 100}, 1000, callback);
                };
                //callback function to bring a hidden box back
                function callback() {
                   setTimeout(function() {
                      $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
                   }, 1000 );
                };
                $( "#button" ).click(function() {
                   runEffect();
                   return false;
                });
                $( "#effect" ).hide();
             });
          </script>
       </head>
       <body>
          <div class = "toggler">
             <div id = "effect" class = "ui-widget-content ui-corner-all">
                <h3 class = "ui-widget-header ui-corner-all">Show</h3>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                </p>
             </div>
          </div>
          <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Run Effect</a>
       </body>
    </html>
    

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

    新页面打开

    单击“ Add Class和“ Remove Class按钮以查看类对该框的影响。

    显示盲目效果

    以下示例演示了使用show()方法的blind效果。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI show 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>
             .toggler { width: 500px; height: 200px; }
                #button { padding: .5em 1em; text-decoration: none; }
                #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
                #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
          </style>
          <script>
             $(function() {
                // run the currently selected effect
                function runEffect() {
                   // run the effect
                   $( "#effect" ).show( "blind", {times: 10,distance: 100}, 1000, callback);
                };
                //callback function to bring a hidden box back
                function callback() {
                   setTimeout(function() {
                      $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
                   }, 1000 );
                };
                // set effect from select menu value
                $( "#button" ).click(function() {
                   runEffect();
                   return false;
                });
                $( "#effect" ).hide();
             });
          </script>
       </head>
       <body>
          <div class = "toggler">
             <div id = "effect" class = "ui-widget-content ui-corner-all">
                <h3 class = "ui-widget-header ui-corner-all">Show</h3>
                <p>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                </p>
             </div>
          </div>
          <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Run Effect</a>
       </body>
    </html>
    

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

    新页面打开

    JqueryUI - Switch Class

    本章将讨论switchClass()方法,它是一个有用的新操作类。 switchClass()方法从一个CSS移动到另一个CSS类,动画从一个状态到另一个状态的转换。

    语法 (Syntax)

    在jQueryUI的1.0版中添加

    switchClass()方法的基本语法如下 -

    .switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
    
    Sr.No. 参数和描述
    1

    removeClassName

    这是一个String,表示要删除的CSS类名称或以空格分隔的类名列表。

    2

    addClassName

    它的类型为String,表示要添加到每个匹配元素的class属性的一个或多个类名(空格分隔)。

    3

    duration

    它的类型为Number或String,可选择提供slow, normal, fast,或效果持续时间之一(以毫秒为单位)。 如果省略,则animate()方法确定默认值。 其默认值为400

    4

    easing

    要传递给animate()方法的缓动函数的名称。

    5

    complete

    这是对此元素的效果完成时为每个元素调用的回调方法。

    在jQueryUI 1.9版中添加

    对于1.9版本,此方法现在支持children选项,该选项还将为后代元素设置动画。

    .switchClass( removeClassName, addClassName [, options ] )
    
    Sr.No. 参数和描述
    1

    removeClassName

    这是一个String,表示要删除的CSS类名称或以空格分隔的类名列表。

    2

    addClassName

    它的类型为String,表示要添加到每个匹配元素的class属性的一个或多个类名(空格分隔)。

    3

    options

    这表示所有动画设置。 所有属性都是可选的。 可能的值是 -

    • duration - 确定动画运行duration的字符串或数字。其默认值为400

    • easing - 一个字符串,指示要用于转换的缓动函数。 它的默认值是swing 。 可能的值在here

    • complete - 这是在为此元素完成效果时为每个元素调用的回调方法。

    • children - 这是一个布尔值,表示动画是否应另外应用于匹配元素的所有后代。

    • queue - 这是String/Boolean类型,指示是否将动画放在效果队列中。

    例子 (Examples)

    以下示例演示了switchClass()方法的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Switch Class 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>
             .LargeClass {
                font-family: Arial;
                font-size: large;
                font-weight: bold;
                color: Red;
             }
             .NormalClass {
                font-family: Arial;
                font-size: small;
                font-weight: bold;
                color: Blue;
             }
          </style>
          <script>
             $(function() {
                $('#btnSwitch').click(function() {
                   $(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
                   $(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
                   return false;
                });
             });
          </script>
       </head>
       <body>
          <div class = "NormalClass">
             IOWIKI Rocks!!!
          </div>
          <div class = "NormalClass">
             Welcome to IOWIKI!!!
          </div>
          <br />
          <input type = "button" id = "btnSwitch" value = "Switch Class" />
       </body>
    </html>
    

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

    新页面打开

    单击“ Switch Class按钮以查看类对该框的影响。

    JqueryUI - Toggle

    本章将讨论jQueryUI视觉效果的toggle()方法。 toggle()方法切换show()或hide()方法,具体取决于元素是否隐藏。

    语法 (Syntax)

    toggle()方法具有以下语法 -

    .toggle( effect [, options ] [, duration ] [, complete ] )
    
    Sr.No. 参数和描述
    1

    effect

    这是一个String,指示要用于转换的效果。这是一个String,表示调整元素可见性时要使用的效果。 效果列于下表中。

    2

    options

    这是Object类型,表示特定于效果的设置easing 。 此外,每个效果都有自己的一组选项,可以在表jQueryUI Effects描述的多个效果中共同指定。

    3

    duration

    它的类型为Number或String,用于确定动画的运行时间。 其默认值为400

    4

    complete

    这是对此元素的效果完成时为每个元素调用的回调方法。

    jQueryUI效果

    下表描述了可以与effects()方法一起使用的各种效果 -

    Sr.No. 效果和描述
    1

    blind

    以窗帘的方式显示或隐藏元素:向下或向上移动底边,或向右或向左移动右边边,具体取决于指定的directionmode

    2

    bounce

    使元素看起来在垂直或水平方向上反弹,可选地显示或隐藏元素。

    3

    clip

    通过将元素的相对边界移动到一起直到它们在中间相遇来显示或隐藏元素,反之亦然。

    4

    drop

    通过使元素显示为放下或删除页面来显示或隐藏元素。

    5

    explode

    通过将元素拆分为多个在径向方向上移动的片段来显示或隐藏元素,就像在页面中嵌入或爆炸一样。

    6

    fade

    通过调整其不透明度来显示或隐藏元素。 这与核心淡入淡出效果相同,但没有选项。

    7

    fold

    通过调整或调出相反的边框来显示或隐藏元素,然后对另一组边框执行相同的操作。

    8

    highlight

    通过在显示或隐藏元素时暂时更改其背景颜色来调用元素。

    9

    puff

    在调整其不透明度的同时扩展或收缩元素。

    10

    pulsate

    在确保按指定显示或隐藏元素之前,调整元素的不透明度。

    11

    scale

    按指定百分比扩展或收缩元素。

    12

    shake

    垂直或水平地来回摇动元件。

    13

    size

    将元素的大小调整为指定的宽度和高度。 与规模类似,但指定目标大小的方式除外。

    14

    slide

    移动元素,使其看起来可以滑入或滑出页面。

    15

    transfer

    动画一个瞬态轮廓元素,使元素看起来转移到另一个元素。 必须通过ui-effects-transfer类的CSS规则或指定为选项的类来定义outline元素的外观。

    例子 (Example)

    下面的示例演示如何使用上表中列出的具有不同效果的toggle()方法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Toggle 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>
             .toggler { width: 500px; height: 200px; }
             #button { padding: .5em 1em; text-decoration: none; }
             #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
             #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
          </style>
          <script>
             $(function() {
                function runEffect() {
                   $( "#effect" ).toggle('explode', 300);
                };
                $( "#button" ).click(function() {
                   runEffect();
                   return false;
                });
             });
          </script>
       </head>
       <body>
          <div class = "toggler">
             <div id = "effect" class = "ui-widget-content ui-corner-all">
                <h3 class = "ui-widget-header ui-corner-all">Toggle</h3>
                <p>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                </p>
             </div>
          </div>
          <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
       </body>
    </html>
    

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

    新页面打开

    单击切换按钮以检查类的显示和隐藏方式。

    JqueryUI - Toggle Class

    本章将讨论toggleClass()方法,它是一个有用的新操作类。 toggleClass()方法从匹配元素集中的每个元素添加或删除一个或多个类。

    语法 (Syntax)

    在jQueryUI的1.0版中添加

    toggleClass()方法的基本语法如下 -

    .toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
    
    Sr.No. 参数和描述
    1

    className

    这是一个String,表示要添加,删除或切换的CSS类名称或以空格分隔的类名列表。

    2

    switch

    这是Boolean类型,如果指定,则强制toggleClass()方法添加类,如果为true ,或者如果为false删除类。

    3

    duration

    它的类型为Number或String,可选择提供slow, normal, fast,或效果持续时间之一(以毫秒为单位)。 如果省略,则animate()方法确定默认值。 其默认值为400

    4

    easing

    要传递给animate()方法的缓动函数的名称。

    5

    complete

    这是对此元素的效果完成时为每个元素调用的回调方法。

    在jQueryUI 1.9版中添加

    对于1.9版本,此方法现在支持children选项,该选项还将为后代元素设置动画。

    .toggleClass( className [, switch ] [, options ] )
    
    Sr.No. 参数和描述
    1

    className

    这是一个String,表示要添加,删除或切换的CSS类名称或以空格分隔的类名列表。

    2

    switch

    这是Boolean类型,如果指定,则强制toggleClass()方法添加类,如果为true ,或者如果为false删除类。

    3

    options

    这表示所有动画设置。 所有属性都是可选的。 可能的值是 -

    • duration - 确定动画运行duration的字符串或数字。其默认值为400

    • easing - 一个字符串,指示要用于转换的缓动函数。 它的默认值是swing 。 可能的值在here

    • complete - 这是在为此元素完成效果时为每个元素调用的回调方法。

    • children - 这是一个布尔值,表示动画是否应另外应用于匹配元素的所有后代。

    • queue - 这是String/Boolean类型,指示是否将动画放在效果队列中。

    例子 (Examples)

    以下示例演示了toggleClass()方法的用法。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Switch Class 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>
             .class1 {
                border-width : 10px;
                border-color : grey;
                background-color : #cedc98;
                color : black;
             }
          </style>
          <script>
             function toggle () {
                $("#para").toggleClass ("class1", 1000);
             }
          </script>
       </head>
       <body>
          <button onclick = toggle()> Toggle </button>
          <p id = "para" style = border-style:solid> Welcome to IOWIKI </p>
       </body>
    </html>
    

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

    新页面打开

    单击Toggle按钮以查看如何更改文本的CSS类。

    JqueryUI - Position

    在本章中,我们将看到jqueryUi的一种实用方法,即position()方法。 position()方法允许您相对于另一个元素或鼠标事件定位元素。

    jQuery UI以一种方式从jQuery核心扩展.position()方法,这种方式可以让你描述你想要如何定位元素,就像你自然地将它描述给另一个人一样。 您可以使用有意义的单词(例如左右)和关系,而不是使用数字和数学。

    语法 (Syntax)

    以下是position()方法的语法 -

    .position( options )
    

    其中options是Object类型,并提供指定如何定位包装集的元素的信息。 下表列出了可与此方法一起使用的不同options -

    Sr.No. 选项和说明
    1 my

    此选项指定包装元素(重新定位的元素)的位置,以与目标元素或位置对齐。 默认情况下,其值为center

    Option - my

    此选项指定包装元素(重新定位的元素)的位置,以与目标元素或位置对齐。 默认情况下,其值为center

    其中两个值用于指定位置: top, left, bottom, right, and center ,由空格字符分隔,其中第一个值是horizontal值,第二个值是vertical 。 指定的单个值是horizontal还是vertical取决于您使用的值(例如, top是垂直的,而right是水平的)。

    Example

    top, or bottom right.
    
    2 at

    此选项的类型为String,并指定目标元素的位置,以便与重新定位的元素对齐。 采用与my选项相同的值。 默认情况下,其值为center

    Option - at

    此选项的类型为String,并指定目标元素的位置,以便与重新定位的元素对齐。 采用与my选项相同的值。 默认情况下,其值为center

    Example

    "right", or "left center"
    
    3 of

    这是Selector或Element类型或jQuery或Event类型。 它标识要重新定位包装元素的目标元素,或包含用作目标位置的鼠标坐标的Event实例。 默认情况下,其值为null

    Option - of

    这是Selector或Element类型或jQuery或Event类型。 它标识要重新定位包装元素的目标元素,或包含用作目标位置的鼠标坐标的Event实例。 默认情况下,其值为null

    Example

    #top-menu
    
    4 collision

    此选项的类型为String,并指定当定位元素在任何方向上延伸到窗口之外时要应用的规则。 默认情况下,其值为flip

    Option - collision

    此选项的类型为String,并指定当定位元素在任何方向上延伸到窗口之外时要应用的规则。 默认情况下,其值为flip

    接受以下两个(水平跟随垂直) -

    • flip - 将元素翻转到相对侧并再次进行碰撞检测以确保合适。 如果两侧都不适合,则使用中心作为后备。

    • fit - 将元素保持在所需方向,但调整位置以使其适合。

    • flipfit - 首先应用翻转逻辑,将元素放在任何一侧允许更多元素可见。 然后应用拟合逻辑以确保尽可能多的元素可见。

    • none - 禁用冲突检测。

    如果指定了单个值,则它适用于两个方向。

    Example

    "flip", "fit", "fit flip", "fit none"
    
    5 using

    此选项是替换更改元素位置的内部函数的函数。 使用单个参数调用每个包装元素,该参数由对象哈希组成, lefttop属性设置为计算目标位置,元素设置为函数上下文。 默认情况下,其值为null

    Option - using

    此选项是替换更改元素位置的内部函数的函数。 使用单个参数调用每个包装元素,该参数由对象哈希组成, lefttop属性设置为计算目标位置,元素设置为函数上下文。 默认情况下,其值为null

    Example

    {horizontal: "center", vertical: "left", important: "horizontal" }
    
    6 within

    此选项是Selector或Element或jQuery元素,允许您指定要用作碰撞检测边界框的元素。 如果您需要在页面的特定部分中包含定位元素,这可以派上用场。 默认情况下,其值为window

    Option - within

    此选项是Selector或Element或jQuery元素,允许您指定要用作碰撞检测边界框的元素。 如果您需要在页面的特定部分中包含定位元素,这可以派上用场。 默认情况下,其值为window

    例子 (Example)

    以下示例演示了position方法的使用。

    <!doctype html>
    <html lang = "en">
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI position method 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>
             .positionDiv {
                position: absolute;
                width: 75px;
                height: 75px;
                background: #b9cd6d;
             }
             #targetElement {
                width: 300px;
                height: 500px;
                padding-top:50px;
             }
          </style>
          <script>
             $(function() {
                // Position the dialog offscreen to the left, but centered vertically
                $( "#position1" ).position({
                   my: "center",
                   at: "center",
                   of: "#targetElement"
                });
                $( "#position2" ).position({
                   my: "left top",
                   at: "left top",
                   of: "#targetElement"
                });
                $( "#position3" ).position({
                   my: "right-10 top+10",
                   at: "right top",
                   of: "#targetElement"
                });
                $( document ).mousemove(function( event ) {
                   $( "#position4" ).position({
                      my: "left+3 bottom-3",
                      of: event,
                      collision: "fit"
                   });
                });
             });
          </script>
       </head>
       <body>
          <div id = "targetElement">
             <div class = "positionDiv" id = "position1">Box 1</div>
             <div class = "positionDiv" id = "position2">Box 2</div>
             <div class = "positionDiv" id = "position3">Box 3</div>
             <div class = "positionDiv" id = "position4">Box 4</div>
          </div>
       </body>
    </html>
    

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

    新页面打开

    在这个例子中我们看到 -

    • Box 1对准div元件的中心(水平和垂直)。

    • Box 2与div元素的左上(水平和垂直)对齐。

    • Box 3显示在窗口的右上角,但留下一些填充,以便消息更突出。 这是使用myat的水平和垂直值完成的。

    • 对于Box 4 ,将值设置为事件对象。 这是与指针关联的事件,随鼠标事件一起移动。

    JqueryUI - Widget Factory

    早些时候,在jQuery中编写自定义控件的唯一方法是扩展$.fn命名空间。 这适用于简单的小部件。 假设您构建了更多有状态的小部件,它很快变得很麻烦。 为了帮助构建小部件,Widget Factory在jQuery UI中引入,它删除了通常与管理小部件相关的大部分样板。

    jQueryUI Widget Factory只是一个函数($ .widget),它将字符串名称和对象作为参数,并创建一个jQuery插件和一个“Class”来封装其功能。

    语法 (Syntax)

    以下是jQueryUI Widget Factory方法的语法 -

    jQuery.widget( name [, base ], prototype )
    

    name - 它是一个字符串,包含要创建的窗口小部件的namespacewidget name (用点分隔)。

    base - 要继承的基本窗口小部件。 这必须是可以使用`new`关键字实例化的构造函数。 默认为jQuery.Widget

    prototype - 要用作要继承的窗口小部件prototype的对象。 例如,jQuery UI有一个“鼠标”插件,其余的交互插件都基于该插件。 为了实现这一点, draggable, droppable,等都继承自鼠标插件,如:jQuery.widget(“ui.draggable”,$ .ui.mouse,{...}); 如果你不提供这个参数,那么widget将直接从“基本小部件”继承jQuery.Widget(注意小写“w”jQuery.widget和大写“W”jQuery.Widget之间的区别)。

    基本小工具

    基本小部件是小部件工厂使用的小部件。

    选项 (Options)

    下表列出了可与基本窗口小部件一起使用的不同options -

    Sr.No. 选项和说明
    1 disabledhide

    如果设置为true则此选项将禁用窗口小部件。 默认情况下,其值为false

    Option - disabledhide

    如果设置为true则此选项将禁用窗口小部件。 默认情况下,其值为false

    Example

    $( ".selector" ).widget({ disabled: true });
    
    2 hide

    此选项确定如何为元素的隐藏设置动画。 默认情况下,其值为null

    Option - hide

    此选项确定如何为元素的隐藏设置动画。 默认情况下,其值为null

    这可以是 -

    • Boolean - 如果设置为false则不使用动画。 如果设置为true则元素将使用默认持续时间和默认缓动淡出。

    • Number - 元素将以指定的持续时间和默认缓动淡出。

    • String - 将使用指定的效果隐藏元素。

    • Object - 如果值是对象,则可以提供effect, delay, duration, easing属性。

    Example

    $( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } });
    
    3 show

    此选项确定如何为元素的显示设置动画。 默认情况下,其值为null

    Option - show

    此选项确定如何为元素的显示设置动画。 默认情况下,其值为null

    这可以是 -

    • Boolean - 如果设置为false不会使用动画来显示元素。 如果设置为true则元素将以默认持续时间和默认缓动淡入。

    • Number - 元素将以指定的持续时间和默认缓动淡入。

    • String - 将使用指定的效果显示元素。

    • Object - 如果值是对象,则可以提供effect, delay, duration, easing属性。

    Example

    $( ".selector" ).widget({ show: { effect: "explode", duration: 1000 } });
    

    方法 (Methods)

    下表列出了可与基本窗口小部件一起使用的不同methods -

    Sr.No. 行动和描述
    1 _create()

    这个方法是widget的构造函数。 没有参数,但是已经设置了this.elementthis.options

    Action - _create()

    此动作完全破坏元素的手风琴功能。 元素返回到pre-init状态。 这个方法是widget的构造函数。 没有参数,但是已经设置了this.elementthis.options

    Example

    _create: function() {
       this.element.css( "background-color", this.options.color );
    }
    
    2 _delay(fn [,延迟])

    此方法在指定的延迟后调用提供的函数。 返回与clearTimeout()一起使用的超时ID。

    Action - _delay( fn [, delay ] )

    此方法在指定的延迟后调用提供的函数。 返回与clearTimeout()一起使用的超时ID。

    Example

    this._delay( this._foo, 100 );
    
    3 _destroy()

    public destroy()方法清除所有公共数据,事件等,然后委托给这个_destroy()方法进行自定义,特定于小部件的清理。

    Action - _destroy()

    public destroy()方法清除所有公共数据,事件等,然后委托给这个_destroy()方法进行自定义,特定于小部件的清理。

    Example

    _destroy: function() {
       this.element.removeClass( "my-widget" );
    }
    
    4 _focusable( element )

    此方法设置元素以将ui-state-focus类应用于焦点。 事件处理程序会在销毁时自动清理。

    Action - _focusable( element )

    此方法设置元素以将ui-state-focus类应用于焦点。 事件处理程序会在销毁时自动清理。

    Example

    _create: function() {
       this._focusable( this.element.find( ".my-items" ) );
    }
    
    5 _getCreateEventData()

    所有小部件都会触发create事件。 默认情况下,事件中不提供任何数据,但此方法可以返回将作为create事件数据传递的对象。

    Action - _getCreateEventData()

    所有小部件都会触发create事件。 默认情况下,事件中不提供任何数据,但此方法可以返回将作为create事件数据传递的对象。

    Example

    _getCreateEventData: function() {
       return this.options;
    }
    
    6 _getCreateOptions()

    此方法允许窗口小部件定义用于在实例化期间定义选项的自定义方法。 用户提供的选项会覆盖此方法返回的选项,这些选项会覆盖默认选项。

    Action - _getCreateOptions()

    此方法允许窗口小部件定义用于在实例化期间定义选项的自定义方法。 用户提供的选项会覆盖此方法返回的选项,这些选项会覆盖默认选项。

    Example

    _getCreateOptions: function() {
       return { id: this.element.attr( "id" ) };
    }
    
    7 _hide(元素,选项[,回调])

    此方法使用内置动画方法或使用自定义效果立即隐藏元素。 有关可能的选项值,请参阅hide选项。

    Action - _hide( element, option [, callback ] )

    此方法使用内置动画方法或使用自定义效果立即隐藏元素。 有关可能的选项值,请参阅hide选项。

    Example

    this._hide( this.element, this.options.hide, function() {
       $( this ).remove();
    });
    
    8 _hoverable( element )

    此方法设置元素以在悬停时应用ui-state-hover类。 事件处理程序会在销毁时自动清理。

    Action - _hoverable( element )

    此方法设置元素以在悬停时应用ui-state-hover类。 事件处理程序会在销毁时自动清理。

    Example

    this._hoverable( this.element.find( "div" ) );
    
    9 _init()

    每次调用插件时都没有参数或只有一个选项哈希,小部件被初始化; 这包括创建窗口小部件的时间。

    Action - _init()

    每次调用插件时都没有参数或只有一个选项哈希,小部件被初始化; 这包括创建窗口小部件的时间。

    Example

    _init: function() {
       if ( this.options.autoOpen ) {
          this.open();
       }
    }
    
    10 _off(element,eventName)

    此方法取消绑定指定元素的事件处理程序。

    Action - _off( element, eventName )

    此方法取消绑定指定元素的事件处理程序。

    Example

    this._off( this.element, "click" );
    
    11 _on([suppressDisabledCheck] [,element],处理程序)

    将事件处理程序绑定到指定的元素。 通过事件名称内的选择器支持委派,例如“click .foo”。

    Action - _on( [suppressDisabledCheck ] [, element ], handlers )

    将事件处理程序绑定到指定的元素。 通过事件名称内的选择器支持委派,例如“click .foo”。

    Example

    this._on( this.element, {
       "click a": function( event ) {
          event.preventDefault();
       }
    });
    
    12 _setOption( key, value )

    对于每个单独的选项,从_setOptions()方法调用此方法。 应根据更改更新窗口小部件状态。

    Action - _setOption( key, value )

    对于每个单独的选项,从_setOptions()方法调用此方法。 应根据更改更新窗口小部件状态。

    Example

    _setOption: function( key, value ) {
       if ( key === "width" ) {
          this.element.width( value );
       }
       if ( key === "height" ) {
          this.element.height( value );
       }
       this._super( key, value );
    }
    
    13 _setOptions( options )

    无论调用option()方法的形式如何,只要调用了option()方法,就会调用此方法。

    Action - _setOptions( options )

    无论调用option()方法的形式如何,只要调用了option()方法,就会调用此方法。

    Example

    _setOptions: function( options ) {
       var that = this,
       resize = false;
       $.each( options, function( key, value ) {
          that._setOption( key, value );
          if ( key === "height" || key === "width" ) {
             resize = true;
          }
       });
       if ( resize ) {
          this.resize();
       }
    }
    
    14 _show(element,option [,callback])

    使用内置动画方法或使用自定义效果立即显示元素。 有关可能的选项值,请参阅show选项。

    Action - _show( element, option [, callback ] )

    使用内置动画方法或使用自定义效果立即显示元素。 有关可能的选项值,请参阅show选项。

    Example

    _this._show( this.element, this.options.show, function() {
       // Focus the element when it's fully visible.
       this.focus();
    }
    
    15 _super([arg] [,...])

    此方法使用任何指定的参数从父窗口小部件调用相同名称的方法。 基本上.call()。

    Action - _super( [arg ] [, ... ] )

    此方法使用任何指定的参数从父窗口小部件调用相同名称的方法。 基本上.call()。

    Example

    _setOption: function( key, value ) {
       if ( key === "title" ) {
          this.element.find( "h3" ).text( value );
       }
       this._super( key, value );
    }
    
    16 _superApply( arguments )

    使用参数数组从父窗口小部件调用相同名称的方法。

    Action - _superApply( arguments )

    使用参数数组从父窗口小部件调用相同名称的方法。

    Example

    _setOption: function( key, value ) {
       if ( key === "title" ) {
          this.element.find( "h3" ).text( value );
       }
       this._superApply( arguments );
    }
    
    17 _trigger(type [,event] [,data])

    此方法触发事件及其关联的回调。 名称等于type的选项将作为回调调用。

    Action - _trigger( type [, event ] [, data ] )

    此方法触发事件及其关联的回调。 名称等于type的选项将作为回调调用。

    Example

    this._on( this.element, {
       keydown: function( event ) {
          // Pass the original event so that the custom search event has
          // useful information, such as keyCode
          this._trigger( "search", event, {
             // Pass additional information unique to this event
             value: this.element.val()
          });
       }
    });
    
    18 destroy()

    此方法完全删除窗口小部件功能。 这将使元素返回到pre-init状态。

    Action - destroy()

    此方法完全删除窗口小部件功能。 这将使元素返回到pre-init状态。

    Example

    this._on( this.element, {
       "click a": function( event ) {
          event.preventDefault();
          this.destroy();
       }
    });
    
    19 disable()

    此方法禁用窗口小部件。

    Action - disable()

    此方法禁用窗口小部件。

    Example

    this._on( this.element, {
       "click a": function( event ) {
          event.preventDefault();
          this.disable();
       }
    });
    
    20 enable()

    此方法启用窗口小部件。

    Action - enable()

    此方法启用窗口小部件。

    Example

    this._on( this.element, {
       "click a": function( event ) {
          event.preventDefault();
          this.enable();
       }
    });
    
    21 option( optionName )

    此方法获取当前与指定的optionName关联的值。

    Action - option( optionName )

    此方法获取当前与指定的optionName关联的值。

    Example

    this.option( "width" );
    
    22 option()

    此方法获取一个对象,该对象包含表示当前窗口小部件选项哈希的键/值对。

    Action - option()

    此方法获取一个对象,该对象包含表示当前窗口小部件选项哈希的键/值对。

    Example

    var options = this.option();
    for ( var key in options ) {
       console.log( key, options[ key ] );
    }
    
    23 option( optionName, value )

    此方法设置与指定的optionName关联的窗口小部件选项的值。

    Action - option( optionName, value )

    此方法设置与指定的optionName关联的窗口小部件选项的值。

    Example

    this.option( "width", 500 );
    
    24 option( options )

    此方法为窗口小部件设置一个或多个选项。

    Action - option( options )

    此方法为窗口小部件设置一个或多个选项。

    Example

    this.option({
       width: 500,
       height: 500
    });
    
    25 widget()

    此方法返回包含原始元素或其他相关生成元素的jQuery对象。

    Action - widget()

    此方法返回包含原始元素或其他相关生成元素的jQuery对象。

    Example

    _create: function() {
       this.widget().css( "border", "2px solid red" );
    }
    

    事件 (Events)

    Sr.No. 事件方法和描述
    1 create( event, ui )

    创建窗口小部件时会触发此事件。

    Event - create( event, ui )

    创建窗口小部件时会触发此事件。 其中eventEvent类型, uiObject类型。

    Syntax

    $( ".selector" ).widget({
       create: function( event, ui ) {}
    });
    

    jQueryUI小部件工厂生命周期

    jQueryUI小部件工厂提供了一种面向对象的方式来管理小部件的生命周期。 这些生命周期活动包括 -

    创建和销毁小部件:例如,

    $( "#elem" ).progressbar();
    

    更改窗口小部件选项:例如

    $( "#elem" ).progressbar({ value: 20 });
    

    在子类窗口小部件中进行“超级”调用:例如

    $( "#elem" ).progressbar( "value" );
    or 
    $( "#elem" ).progressbar( "value", 40 );
    

    事件通知:例如

    $( "#elem" ).bind( "progressbarchange", function() {
       alert( "The value has changed!" );
    });
    

    例子 (Example)

    现在让我们在以下示例中创建自定义小部件。 我们将创建一个按钮小部件。 我们将在以下示例中看到如何在窗口小部件中创建选项,方法和事件 -

    创建自定义小组件

    我们先创建一个简单的自定义小部件。

    <!DOCTYPE html>
    <html>
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Widget - Default functionality</title>
          <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
          <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() {
                $.widget("iP.myButton", {
                   _create: function() { 
                      this._button = $("<button>"); 
                      this._button.text("My first Widget Button");
                      this._button.width(this.options.width) 
                      this._button.css("background-color", this.options.color);    
                      this._button.css("position", "absolute");   
                      this._button.css("left", "100px");            
                      $(this.element).append(this._button);
                   },
                });
                $("#button1").myButton();
             });
          </script>
       </head>
       <body>
          <div id = "button1"></div>
       </body>
    </html>
    

    让我们将上面的代码保存在一个HTML文件widgetfactoryexample.htm ,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出 -

    新页面打开

    将选项添加到自定义小组件

    在前面的示例中,我们使用_create函数来创建自定义控件。 但是用户通常希望通过设置和修改选项来自定义控件。 我们可以定义一个选项对象,它存储您定义的所有选项的默认值。 _setOption函数用于此目的。 它针对用户设置的每个单独选项进行调用。 这里我们设置按钮的widthbackground-color

    <!DOCTYPE html>
    <html>
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Widget - Default functionality</title>
          <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
          <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() {
                $.widget("iP.myButton", {
                   _create: function() { 
                      this._button = $("<button>"); 
                      this._button.text("My first Widget Button");
                      this._button.width(this.options.width) 
                      this._button.css("background-color", this.options.color);    
                      this._button.css("position", "absolute");   
                      this._button.css("left", "100px");            
                      $(this.element).append(this._button);
                   },
                   _setOption: function(key, value) { 
                      switch (key) { 
                         case "width": 
                         this._button.width(value); 
                         break; 
                         case "color":
                         this._button.css("background-color",value);
                         break; 
                      } 
                   },
                });
                $("#button2").myButton();
                $("#button2").myButton("option", {width:100,color:"#cedc98"});
             });
          </script>
       </head>
       <body>
          <div id = "button2"></div>
       </body>
    </html>
    

    让我们将上面的代码保存在一个HTML文件widgetfactoryexample.htm ,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出 -

    新页面打开

    将方法添加到自定义小组件

    在下面的示例中,我们将添加用户可以使用的方法,这些方法很容易构建到框架中。 我们将编写一个Move方法,将按钮移动指定的水平距离。 为了使这个工作,我们还需要在_create函数中设置position和left属性 -

    this._button.css("position", "absolute");   
    this._button.css("left", "100px");  
    

    在此之后,用户现在可以使用通常的jQuery UI方式调用您的方法 -

    this._button.css("position", "absolute");   
    this._button.css("left", "100px");  
    
    $("button3").myButton("move", 200);
    
    <!DOCTYPE html>
    <html>
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Widget - Default functionality</title>
          <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
          <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() {
                $.widget("iP.myButton", {
                   _create: function() { 
                      this._button = $("<button>"); 
                      this._button.text("My first Widget Button");
                      this._button.width(this.options.width) 
                      this._button.css("background-color", this.options.color);    
                      this._button.css("position", "absolute");   
                      this._button.css("left", "100px");            
                      $(this.element).append(this._button);
                   },
                   move: function(dx) { 
                      var x = dx + parseInt(this._button.css("left")); 
                      this._button.css("left", x); 
                      if(x>400) { this._trigger("outbounds",{},  {position:x}); }
                   }
                });
                $("#button3").myButton();
                $("#button3").myButton("move", 200);
             });
          </script>
       </head>
       <body>
          <div id = "button3"></div>
       </body>
    </html>
    

    让我们将上面的代码保存在一个HTML文件widgetfactoryexample.htm ,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出 -

    新页面打开

    将事件添加到自定义小组件

    在此示例中,我们将演示如何创建事件。 要创建事件,您只需使用_trigger方法即可。 第一个参数是事件的名称,第二个是要传递的标准事件对象,第三个是要传递的自定义事件对象。

    如果按钮移动到x = 400以上,我们将触发一个事件。 你所要做的就是添加移动功能 -

    if(x<400) { this._trigger("outbounds",{}, {position:x}); }
    

    在这种情况下,事件被称为outbounds,并且一个空事件对象与一个自定义事件对象一起传递,该事件对象仅将该位置作为其唯一属性提供。

    整个移动功能是 -

    move: function(dx) {
       var x = dx + parseInt(this._button.css("left")); 
       this._button.css("left", x); 
       if(x<400) { this._trigger("outbounds",{}, {position:x}); }
    }
    

    用户可以通过简单地定义相同名称的选项来设置事件处理功能。

    $("button4").myButton("option", {
       width: 100, 
       color: "red",
       outbounds:function(e,ui) {
          alert(ui.position);}
    });
    
    <!DOCTYPE html>
    <html>
       <head>
          <meta charset = "utf-8">
          <title>jQuery UI Widget - Default functionality</title>
          <link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
          <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() {
                $.widget("iP.myButton", {
                   _create: function() { 
                      this._button = $("<button>"); 
                      this._button.text("My first Widget Button");
                      this._button.width(this.options.width) 
                      this._button.css("background-color", this.options.color);    
                      this._button.css("position", "absolute");   
                      this._button.css("left", "100px");            
                      $(this.element).append(this._button);
                   },
                   move: function(dx) { 
                      var x = dx + parseInt(this._button.css("left")); 
                      this._button.css("left", x); 
                      if(x>400) { this._trigger("outbounds",{},  {position:x}); }
                   }
                });
                $("#button4").myButton();
                $("#button4").on("mybuttonoutbounds", function(e, ui) {
                   alert("out");
                });
                $("#button4").myButton("move", 500);
             });
          </script>
       </head>
       <body>
          <div id = "button4"></div>
       </body>
    </html>
    

    让我们将上述代码保存在HTML文件widgetfactoryexample.htm ,并在支持javascript的标准浏览器中打开它,打开一个警告框。

    新页面打开
    ↑回到顶部↑
    WIKI教程 @2018