非常教程

jQuery UI 教程教程

jQuery UI API – 鼠标交互(Mouse Interaction)

jQuery UI API – 鼠标交互(Mouse Interaction)

jQuery UI API - 鼠标交互(Mouse Interaction)

所属类别

交互(Interactions) | 实用工具(Utilities)

用法

描述:基本交互层。

依赖:

  • 部件库(Widget Factory)

注释:jQuery.Widget 相似,鼠标交互的目的不是直接使用。这是一个纯粹给其他小部件继承用的基础层。该页面有添加到 jQuery.Widget 的文档,但是它包含了不能被覆盖的内部方法。公共的 API 是 _mouseStart()_mouseDrag()_mouseStop()_mouseCapture()

快速导航

选项 方法 事件
cancel
delay
distance
_mouseCapture
_mouseDelayMet
_mouseDestroy
_mouseDistanceMet
_mouseDown
_mouseDrag
_mouseInit
_mouseMove
_mouseStart
_mouseStop
_mouseUp

选项 类型 描述 默认值
cancel Selector 防止从指定的元素上开始交互。

代码实例:

初始化带有指定 cancel 选项的 mouse:

$( ".selector" ).mouse({ cancel: ".title" });
    

在初始化后,获取或设置 cancel 选项:

// getter
var cancel = $( ".selector" ).mouse( "option", "cancel" );
 
// setter
$( ".selector" ).mouse( "option", "cancel", ".title" );
    
"input, textarea, button, select, option"
delay Number 鼠标按下后直至交互开始的事件,以毫秒计。该选项可用于防止点击在一个元素上时不必要的交互。

代码实例:

初始化带有指定 delay 选项的 mouse:

$( ".selector" ).mouse({ delay: 300 });
    

在初始化后,获取或设置 delay 选项:

// getter
var delay = $( ".selector" ).mouse( "option", "delay" );
 
// setter
$( ".selector" ).mouse( "option", "delay", 300 );
    
0
distance Number 鼠标按下后交互开始前鼠标必须移动的距离,以像素计。该选项可用于防止点击在一个元素上时不必要的交互。

代码实例:

初始化带有指定 distance 选项的 mouse:

$( ".selector" ).mouse({ distance: 10 });
    

在初始化后,获取或设置 distance 选项:

// getter
var distance = $( ".selector" ).mouse( "option", "distance" );
 
// setter
$( ".selector" ).mouse( "option", "distance", 10 );
    
1

方法 返回 描述
_mouseCapture() Boolean 决定交互是否应该基于交互的事件目标开始。默认的实现总是返回 true
  • 该方法不接受任何参数。

代码实例:

调用 _mouseCapture 方法:

$( ".selector" ).mouse( "_mouseCapture" );
    
_mouseDelayMet() Boolean 决定 delay 选项是否满足当前交互。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseDelayMet 方法:

$( ".selector" ).mouse( "_mouseDelayMet" );
    
_mouseDestroy() jQuery (plugin only) 销毁交互事件处理程序。这必须调用来自扩展的小部件的 _destroy() 方法。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseDestroy 方法:

$( ".selector" ).mouse( "_mouseDestroy" );
    
_mouseDistanceMet() Boolean 决定 distance 选项是否满足当前交互。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseDistanceMet 方法:

$( ".selector" ).mouse( "_mouseDistanceMet" );
    
_mouseDown() jQuery (plugin only) 处理交互的开始。确认与主要的鼠标按钮关联的事件,确保 delaydistance 在交互启动之前得到满足。当交互已经准备开始,为要处理的扩展小部件调用 _mouseStart 方法。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseDown 方法:

$( ".selector" ).mouse( "_mouseDown" );
    
_mouseDrag() jQuery (plugin only) 扩展小部件应实现一个 _mouseDrag() 方法,来处理交互的每个移动。该方法将接收与鼠标移动相关联的鼠标事件。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseDrag 方法:

$( ".selector" ).mouse( "_mouseDrag" );
    
_mouseInit() jQuery (plugin only) 初始化交互事件处理程序。这必须调用来自扩展的小部件的 _create() 方法。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseInit 方法:

$( ".selector" ).mouse( "_mouseInit" );
    
_mouseMove() jQuery (plugin only) 处理交互的每个移动。为要处理的扩展小部件调用 _mouseDrag 方法。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseMove 方法:

$( ".selector" ).mouse( "_mouseMove" );
    
_mouseStart() jQuery (plugin only) 扩展小部件应实现一个 _mouseStart() 方法,来处理交互的开始。该方法将接收与交互开始相关联的鼠标事件。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseStart 方法:

$( ".selector" ).mouse( "_mouseStart" );
    
_mouseStop() jQuery (plugin only) 扩展小部件应实现一个 _mouseStop() 方法,来处理交互的结束。该方法将接收与交互结束相关联的鼠标事件。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseStop 方法:

$( ".selector" ).mouse( "_mouseStop" );
    
_mouseUp() jQuery (plugin only) 处理交互结束。对扩展小部件的处理调用 _mouseStop 方法。
  • 该方法不接受任何参数。

代码实例:

调用 _mouseUp 方法:

$( ".selector" ).mouse( "_mouseUp" );
jQuery UI API – 鼠标交互(Mouse Interaction)
jQuery UI 教程

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题,可用于创建高度交互的 Web 应用程序。

jQuery UI 教程目录

1.jQuery UI 简介
2.jQuery UI 教程
3.jQuery UI CSS 框架 API
4.jQuery UI 主题
5.jQuery UI 工作原理
6.jQuery UI 如何使用部件库
7.jQuery UI 为什么使用部件库
8.jQuery UI 小部件方法调用
9.jQuery UI 通过部件库扩展小部件
10.jQuery UI 部件库
11.jQuery UI 设计主题
12.jQuery UI API 类别 – UI 核心
13.jQuery UI API 类别 – 主题
14.jQuery UI API 类别 – 选择器
15.jQuery UI API 类别 – 方法
16.jQuery UI API 类别 – 方法重载
17.jQuery UI API 类别 – 交互
18.jQuery UI API 类别 – 特效核心
19.jQuery UI API 类别 – 特效
20.jQuery UI API 文档
21.jQuery UI API – 颜色动画(Color Animation)
22.jQuery UI API – 剪辑特效(Clip Effect)
23.jQuery UI API – 反弹特效(Bounce Effect)
24.jQuery UI API – 百叶窗特效(Blind Effect)
25.jQuery UI API – .addClass()
26.jQuery UI 实例
27.jQuery UI API 类别 – 小部件
28.jQuery UI API 类别 – 实用工具
29.jQuery UI API – 跳动特效(Pulsate Effect)
30.jQuery UI API – 膨胀特效(Puff Effect)
31.jQuery UI API – 突出特效(Highlight Effect)
32.jQuery UI API – .hide()
33.jQuery UI API – 折叠特效(Fold Effect)
34.jQuery UI API – 淡入淡出特效(Fade Effect)
35.jQuery UI API – 爆炸特效(Explode Effect)
36.jQuery UI API – .effect()
37.jQuery UI API – Easings
38.jQuery UI API – 降落特效(Drop Effect)
39.jQuery UI API – 转移特效(Transfer Effect)
40.jQuery UI API – .toggleClass()
41.jQuery UI API – .toggle()
42.jQuery UI API – .switchClass()
43.jQuery UI API – 滑动特效(Slide Effect)
44.jQuery UI API – 尺寸特效(Size Effect)
45.jQuery UI API – .show()
46.jQuery UI API – 震动特效(Shake Effect)
47.jQuery UI API – 缩放特效(Scale Effect)
48.jQuery UI API – .removeClass()
49.jQuery UI API – 可放置小部件(Droppable Widget)
50.jQuery UI API – 可拖拽小部件(Draggable Widget)
51.jQuery UI API – .enableSelection()
52.jQuery UI API – .disableSelection()
53.jQuery UI API – .position()
54.jQuery UI API – .focus()
55.jQuery UI API – 可排序小部件(Sortable Widget)
56.jQuery UI API – 可选择小部件(Selectable Widget)
57.jQuery UI API – 可调整尺寸小部件(Resizable Widget)
58.jQuery UI API – 鼠标交互(Mouse Interaction)
59.jQuery UI API – 堆叠元素(Stacking Elements)
60.jQuery UI API – 图标(Icons)
61.jQuery UI API – CSS 框架(CSS Framework)
62.jQuery UI API – :tabbable Selector
63.jQuery UI API – :focusable Selector
64.jQuery UI API – :data() Selector
65.jQuery UI API – .zIndex()
66.jQuery UI API – .uniqueId()
67.jQuery UI API – .scrollParent()
68.jQuery UI API – .removeUniqueId()
69.jQuery UI API – 插件桥(Widget Plugin Bridge)
70.jQuery UI API – 部件库(Widget Factory)
71.jQuery UI API – jQuery.ui.keyCode
72.jQuery UI API – 滑块部件(Slider Widget)
73.jQuery UI API – 进度条部件(Progressbar Widget)
74.jQuery UI API – 菜单部件(Menu Widget)
75.jQuery UI API – 对话框部件(Dialog Widget)
76.jQuery UI API – 日期选择器部件(Datepicker Widget)
77.jQuery UI API – 按钮部件(Button Widget)
78.jQuery UI API – 自动完成部件(Autocomplete Widget)
79.jQuery UI API – 折叠面板部件(Accordion Widget)
80.jQuery UI API – 工具提示框部件(Tooltip Widget)
81.jQuery UI API – 标签页部件(Tabs Widget)
82.jQuery UI API – 旋转器部件(Spinner Widget)
83.jQuery UI 实例 – 缩放(Resizable)
84.jQuery UI 实例 – 放置(Droppable)
85.jQuery UI 实例 – 拖动(Draggable)
86.jQuery UI 实例 – 滑块(Slider)
87.jQuery UI 实例 – 进度条(Progressbar)
88.jQuery UI 实例 – 菜单(Menu)
89.jQuery UI 实例 – 对话框(Dialog)
90.jQuery UI 实例 – 日期选择器(Datepicker)
91.jQuery UI 实例 – 按钮(Button)
92.jQuery UI 实例 – 自动完成(Autocomplete)
93.jQuery UI 实例 – 折叠面板(Accordion)
94.jQuery UI 实例 – 排序(Sortable)
95.jQuery UI 实例 – 选择(Selectable)
96.jQuery UI 实例 – 切换 Class(Toggle Class)
97.jQuery UI 实例 – 移除 Class(Remove Class)
98.jQuery UI 实例 – 添加 Class(Add Class)
99.jQuery UI 实例 – 切换(Toggle)
100.jQuery UI 实例 – 隐藏(Hide)