jQuery UI-实例

32F  2018/09/10 jqueryui



Jquery UI 实例


交互

  • 拖动

    • 默认功能 (在任意的 DOM元素上启用 draggable功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。)
    • 自动滚动(当 draggable 移动到视区外时自动滚动文档。设置 scroll 选项为 true 来启用自动滚动,当滚动触发时进行微调,滚动速度是通过scrollSensitivityscrollSpeed 选项设置的。)
    • 约束运动(通过定义 draggable 区域的边界来约束每个 draggable 的运动。设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴,或者使用 containment 选项来指定一个父级的 DOM 元素或者一个 jQuery 选择器,比如document.)
    • 光标样式(当拖拽对象时定位光标。默认情况下,光标是出现在被拖拽对象的中间。使用 cursorAt 选项来指定相对于 draggable的另一个位置(指定一个相对于top、right、bottom、left 的像素值)。通过提供一个带有有效的 CSS 光标值的 cursor 选项,来自定义光标的外观。有效的 CSS 光标值包括:default、move、pointer、crosshair,等等。)
    • 延迟开始(通过 delay 选项设置延迟开始拖拽的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽。)
    • 事件(draggable 上的 start、drag 和 stop 事件。拖拽开始时触发 start 事件,拖拽期间触发 drag 事件,拖拽停止时触发 stop 事件。)
    • Handles(只有当光标在 draggable 上指定部分时才允许拖拽。使用 handle 选项来指定用于拖拽对象的元素(或元素组)的 jQuery 选择器。 Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the cancel option to specify a jQuery selector over which to "cancel" draggable functionality. 或者当光标在 draggable 内指定元素(或元素组)上时不允许拖拽。使用 handle 选项来指定取消拖拽功能的 jQuery 选择器)
    • 还原位置(当带有布尔值revert 选项的draggable停止拖拽时,返回 draggable(或它的助手)到原始位置。)
    • 对齐到元素或网格(对齐 draggable 到 DOM 元素的内部或外部边界。使用snap、snapMode(inner, outer, both)snapTolerance(当调用对齐时,draggable 与元素之间的距离,以像素为单位)选项。 或者对齐 draggable到网格。通过 grid 选项设置网格单元的尺寸(以像素为单位的高度或宽度)。)
    • 视觉反馈(给用户提供反馈,就像以助手方式拖拽对象一样。helper 选项接受值 'original'(用光标移动 draggable 对象),'clone'(用光标移动 draggable 的副本),或者一个返回 DOM 元素的函数(该元素在拖拽期间显示在光标附近)。通过opacity选项控制助手的透明度。 为了区别哪一个 draggable 正在被拖拽,让在运动中的 draggable 保持最前。如果正在拖拽,使用zIndex 选项来设置助手的高度 z-index,或者使用 stack 选项来确保当停止拖拽时,最后一个被拖拽的项目总是出现在同组其他项目的上面。)
    • Draggable 与 Sortable 的无缝交互
  • 放置

    • 默认功能(在任意的 DOM 元素上启用droppable 功能,并为可拖拽小部件创建目标。)
    • 接受(使用 accept 选项指定目标 droppable 接受哪一个元素(或元素组)。)
    • 防止传播(当使用嵌套的 droppable 时 — 例如,您可以有一个树形的可编辑的目录结构,带有文件夹和文档节点 — greedy选项设置为 true 来防止当 draggable被放置在子节点(droppable)上时的事件传播。)
    • 还原 draggable 的位置(当带有布尔值revert选项的 draggable停止拖拽时,返回draggable(或它的助手)到原始位置。)
    • 购物车演示(演示如何使用折叠面板来展示产品的目录结构,使用拖拽和放置来添加产品到购物车,购物车中的产品是可排序的。)
    • 简单的照片管理器(您可以通过拖拽照片到回收站或者点击回收站图标来删除照片。 您可以通过拖拽照片到相册或者点击回收利用图标来还原照片。 您可以通过点击缩放图标来查看大图。jQuery UI 对话框(dialog)部件用于模态窗口)
    • 视觉反馈(当悬停在 droppable上时,或者当 droppable 被激活(即一个可接受的 draggable 被放置在droppable 上)时,改变 droppable 的外观。使用hoverClassactiveClass 选项来分别指定 class。)
  • 缩放

    • 默认功能(在任意的 DOM 元素上启用resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。)
    • 动画(使用 animate 选项(布尔值)使缩放行为动画化。当该选项设置为 true 时,拖拽轮廓到所需的位置,元素会在拖拽停止时以动画形式调整到该尺寸。)
    • 限制缩放区域(定义缩放区域的边界。使用 containment 选项来指定一个父级的 DOM 元素或一个 jQuery 选择器,比如 'document.'。)
    • 延迟开始(通过 delay 选项设置延迟开始缩放的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许缩放。)
    • 助手(通过设置 helper选项为一个 CSS class,当缩放时只显示元素的轮廓。)
    • 最大/最小尺寸(使用 maxHeightmaxWidthminHeightminWidth 选项限制 resizable 元素的最大或最小高度或宽度。)
    • 保持纵横比(保持现有的纵横比或设置一个新的纵横比来限制缩放比例。设置 aspectRatio选项为 true,且可选地传递一个新的比率(比如,4/3)。)
    • 对齐到网格(对齐 resizable 元素到网格。通过 grid 选项设置网格单元的尺寸(以像素为单位的高度和宽度)。)
    • 同步缩放(通过点击并拖拽一个元素的边来同时调整多个元素的尺寸。给alsoResize选项传递一个共享的选择器。)
    • 文本框(可缩放的文本框。)
    • 视觉反馈(通过设置 ghost选项为 true,可在缩放期间显示一个半透明的元素,而不是显示一个实际的元素。)
  • 选择

    • 默认功能(在某个 DOM 元素上或者一组元素上启用 selectable 功能。通过鼠标拖拽选择条目。按住Ctrl键,选择多个不相邻的条目。)
    • 显示为网格(让selectable 条目显示为网格,使用 CSS 使得它们带有相同的尺寸且浮动显示。)
    • 序列化(写一个函数,在stop 事件发生时触发,来收集被选中条目的索引值。呈现这些值作为反馈,或者以数据字符串形式进行传递。)
  • 排序

    • 默认功能(在任意的 DOM 元素上启用sortable 功能。通过鼠标点击并拖拽元素到列表中的一个新的位置,其它条目会自动调整。默认情况下,sortable 各个条目共享 draggable属性。)
    • 连接列表(通过向connectWith选项传递一个选择器,来把一个列表中的元素排序到另一个列表中,反之亦然。最简单的办法是将带有某个 CSS class 的所有相关的列表分组,然后传递该 class 到 sortable函数(比如,connectWith: '.myclass')。)
    • 标签页连接列表(通过放置列表项到顶部适当的标签页中,来把一个列表中的元素排序到另一个列表中,反之亦然。)
    • 延迟开始(通过时间延迟和距离延迟来防止意外的排序。通过 delay选项设置开始排序之前必须拖拽的毫秒数。通过 distance选项设置开始排序之前必须拖拽的像素数。)
    • 显示为网格(让 sortable 条目显示为网格,使用 CSS 使得它们带有相同的尺寸且浮动显示。)
    • 放置占位符(当拖拽一个 sortable条目到一个新的位置时,其他条目将为该条目腾出空间。向 placeholder选项传递一个 class 来定义可视化的空白的样式。使用布尔值的 forcePlaceholderSize 选项来设置占位符的尺寸。)
    • 处理空列表(通过把 选项设置为 false,来阻止一个列表中的所有条目被放置到一个单独的空列表中。默认情况下,sortable 条目可被放置到空的列表中。)
    • 包含/排除条目(指定通过向items 选项传递一个 jQuery 选择器哪些项目可排序。该选项之外的项目则是不可排序的,同时它们也不是 sortable条目的有效的目标。 如果只想防止特定的条目排序,则向cancel 选项传递一个 jQuery 选择器。已取消的条目依然是其他条目的有效的排序目标。)
    • 门户组件(Portlets)(启用门户组件(样式化的 div)作为 sortable,并使用 connectWith选项来允许在列之间进行排序。


小部件

  • 折叠面板

    • 默认功能(点击头部展开/折叠被分为各个逻辑部分的内容,就像标签页(tabs)一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。 基本的 HTML 标记是一系列的标题(H3 标签)和内容 div,因此内容不用通过 JavaScript 即可用。)
    • 折叠内容(默认情况下,折叠面板总是保持一个部分是打开的。为了让所有部分都是折叠的,可设置collapsible选项为 true。点击当前打开的部分,来折叠它的内容面板。)
    • 自定义图标 (通过 icons选项自定义标题图标,icons选项接受标题默认的和激活的(打开的)状态的 class。使用 UI CSS 框架中的任意 class,或者使用背景图像创建自定义的 class。)
    • 填充空间(由于折叠面板是由块级元素组成的,默认情况下它的宽度会填充可用的水平空间。为了填充由容器分配的垂直空间,设置 heightStyle 选项为 fill,脚本会自动设置折叠面板的尺寸为父容器的高度。)
    • 非自动高度(设置 heightStyle: "content",让折叠面板保持它们初始的高度。)
    • 当悬停时打开(点击头部展开/折叠被分为各个逻辑部分的内容,就像标签页(tabs)一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。 基本的 HTML 标记是一系列的标题(H3 标签)和内容 div,因此内容不用通过 JavaScript 即可用。)
    • 排序(Sortable)(拖拽标题来给面板重新排序)
  • 自动完成

    • 默认功能(当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议。在本实例中,提供了编程语言的建议选项,您可以输入 "ja" 尝试一下,可以得到 Java 或 JavaScript。 数据源是一个简单的 JavaScript 数组,使用 source选项提供给部件。)
    • 分类(分类的搜索结果。尝试键入 "a" 或 "n"。)
    • 组合框(Combobox) (一个由 AutocompleteButton创建的自定义部件。您可以键入一些字符,来获得基于您的输入过滤的结果,或者使用按钮从完整列表中选择。 该输入是从一个已有的 select元素中读取,传递给带有自定义的 source 选项的 Autocomplete。 这是一个不被支持的不完美的部件。这里纯粹是为了演示 autocomplete 定制功能。)
    • 多个值(用法:键入一些字符,比如 "j",可以看到相关的编程语言结果。选择一个值,然后继续键入字符来添加其他的值。 本实例演示如何使用 source选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。)
  • 按钮

    • 默认功能(可用于按钮的标记实例:一个 button 元素,一个类型为 submitinput元素和一个。)
    • 复选框 (通过 button 部件把复选框显示为切换按钮样式。与复选框相关的 label 元素作为按钮文本。 本实例通过在一个公共的容器上调用 .buttonset(),演示了三个显示为按钮样式的复选框。)
    • 图标 (一些带有文本和图标的各种组合的按钮)
    • 单选(三个单选按钮转变为一套按钮。)
    • 分割按钮()
    • 工具栏 (一个多媒体播放器的工具栏。请看基础的标记:一些button 元素,Shuffle按钮是一个类型为 checkboxinputRepeat选项是三个类型为 radioinput。)
  • 日期选择器

  • 对话框

    • 默认功能 (基本的对话框窗口是一个定位于视区中的覆盖层,同时通过一个 iframe与页面内容分隔开(就像select元素)。它由一个标题栏和一个内容区域组成,且可以移动,调整尺寸,默认可通过 'x' 图标关闭。)
    • 动画(可以通过为 show/hide 属性指定一个特效来动画显示对话框。您必须为想使用的特效引用独立的特效文件。)
    • 基本的模态(模态对话框防止用户与对话框以外的页面其他部分进行交互,直到对话框关闭为止。)
    • 模态确认(确认一个动作可能是破坏性的也可能是有意义的。设置 modal 选项为true,并通过buttons选项来指定主要的和次要的用户动作。)
    • 模态表单(使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入form 标记,设置 modal选项为true,并通过 buttons选项来指定主要的和次要的用户动作。)
    • 模态消息(使用模态对话框来在下一步动作执行之前确认信息和动作。设置modal 选项为true,并通过 buttons选项来指定主要的动作(Ok)。)
  • 菜单

    • 默认功能(一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的,添加了主题,并支持鼠标和键盘交互。尝试使用光标键导航菜单。)
    • 图标(一个带有默认配置的菜单,显示如何使用带有图标的菜单。)
  • 进度条

  • 滑块

    • 默认功能 (基本的滑块是水平的,有一个单一的手柄,可以用鼠标或箭头键进行移动。)
    • 颜色选择器 (组合了三个滑块,来创建一个简单的 RGB 颜色选择器)
    • 多个滑块(组合水平的和垂直的滑块,每个都带有各自的选项,来创建一个音乐播放器的 UI。)
    • 范围滑块(设置range 选项为true,来获取带有两个拖拽手柄的值的范围。手柄之间的控件用不同的背景颜色填充来表示该区间的值是可选择的。)
    • 带有固定最大值的范围(固定范围滑块的最大值,用户只能选择最小值。设置 range 选项为 max`。)
    • 带有固定最小值的范围(固定范围滑块的最小值,用户只能选择最大值。设置 range 选项为 min。)
    • 绑定到 select 的滑块(如何绑定一个滑块到一个已有的 select元素。选择保持可见以便显示变化。当选择改变时,同时更新滑块。)
    • 滑块滚动条 (使用滑块来操作页面上内容的定位。本实例中,它是一个能获取值的滚动条。)
    • 对齐增量(通过把 step 选项设置为一个整数来设置滑块值的增量,通常是滑块最大值的除数。默认增量是 1。)
    • 垂直的范围滑块(改变范围滑块的方向为垂直的。通过.height()分配一个高度值,或通过 CSS 设置高度,同时设置 orientation 选项为 vertical。)
    • 垂直的滑块(改变滑块的方向为垂直的。通过.height()分配一个高度值,或通过 CSS 设置高度,同时设置 orientation 选项为 vertical。)
  • 旋转器

    • 默认功能 (默认的旋转器。)
    • 货币 (本实例是一个捐款表格,带有货币选择和数量旋转器。)
    • 小数 (本实例是一个小数旋转器。增量设置为 0.01。处理文化变化的代码会读取当前的选择器的值,当改变文化时,会基于新的文化重新设置值的样式。)
    • 地图(谷歌地图集成,使用旋转器来改变纬度和经度。)
    • 溢出 (溢出旋转器限制范围从 -10 到 10。对于 10 以上的值,会溢出到 -10,反之亦然。)
    • 时间(一个扩展自旋转器的自定义部件。使用 全球化(Globalization)插件来解析和输出时间戳,带有自定义的steppage 选项。向上/向下光标用于分钟的递增/递减,向上/向下翻页用于小时的递增/递减。)
  • 标签页

    • 默认功能(点击标签页,切换被划分为不同逻辑部分的内容。)
    • 折叠内容(点击选中的标签页来切换内容的关闭/打开状态。为了启用这个功能,需要设置collapsible选项为true。)
    • 通过 Ajax 获取内容 (在标签页链接中设置 href 的值来为标签页通过 Ajax 获取外部的内容。当 Ajax 请求在等待响应时,标签页的标签变为 Loading...,当加载完成后返回常规的标签。 标签 3 和 4 演示了慢加载和损坏的 AJAX 标签,以及如何处理这些情况下的服务器端的错误。请注意,这两个都要求 web 服务器能解释 PHP。它们在文件系统以外无法工作。)
    • 当鼠标悬停时打开 (通过 event选项设置当鼠标悬停时切换各部分的打开/关闭状态。event 的默认值是 click。)
    • 简单的操作 (简单的标签页添加和移除。)
    • 排序(Sortable)(拖拽上面的标签页来对它们进行重新排序。 只需要简单地调用 .ui-tabs-nav 元素上的 .sortable(),即可让标签页可排序。)
    • 底部标签页 (通过一些额外的 CSS(用于定位的)和 JS(在元素上放置正确的 class),标签页皆可放置在内容的底部。)
    • 垂直的标签页 (点击标签页,切换被划分为不同逻辑部分的内容。)
  • 工具提示框

    • 默认功能(悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。)
    • 自定义样式(悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。)
    • 自定义动画(本实例演示了如何使用 showhide 选项来自定义动画,也可以使用 open事件来自定义动画。)
    • 自定义内容(演示如何通过自定义 itemscontent 选项,来组合不同的事件委托工具提示框到一个单一的实例中。 您可能需要与地图工具提示框进行交互,这是未来版本中的一个待实现的功能。)
    • 表单 (使用下面的按钮来显示帮助文本,或者只需要让鼠标悬停在输入框上或者让输入框获得焦点,即可显示相应输入框的帮助文本。 在 CSS 中定义一个固定的宽度,让同时显示所有的帮助文本时看起来更一致。)
    • 跟踪鼠标(本实例中的工具提示框是相对于鼠标进行定位的,当鼠标在元素上移动时,它会跟随鼠标移动。)
    • 视频播放器(一个虚拟的视频播放器,带有喜欢/分享/统计按钮,每个按钮都带有自定义样式的工具提示框。 )

特效

实用工具

  • 定位
    • 默认功能(使用表单控件配置位置,或者拖拽被定位的元素来修改它的偏移量。向四周拖拽父元素来查看碰撞检测。)
    • 图像循环(一个照片浏览器的原型,使用 Position 分别把图片定为在左边、中间、右边,然后循环显示。使用顶部的链接来循环图像,或者在图像的左侧或右侧点击来循环图像。请注意,当调整窗口大小时,会重新定位图像。)
  • 部件库
    • 默认功能(该演示展示了一个简单的使用部件库(jquery.ui.widget.js)创建的自定义的小部件。 三个区块是以不同的方式初始化的。点击改变他们的背景颜色。查看源码及注释理解工作原理。)

手动抄录...orz...orz...orz...


添加评论
全部回复
1f 32F  2018-11-24 14:35:37

https://www.runoob.com/jqueryui/jqueryui-tutorial.html回复