Latest web development tutorials
×

jQuery UI หลักสูตร

jQuery UI หลักสูตร jQuery UI แนะนำโดยย่อ jQuery UI ดาวน์โหลด jQuery UI ใช้ jQuery UI ปรับแต่ง jQuery UI โรงงาน

jQuery UI กระทู้

jQuery UI กระทู้ jQuery UI ThemeRoller jQuery UI CSS กรอบ API jQuery UI รูปแบบการออกแบบ

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI ห้องสมุดองค์ประกอบ jQuery UI Widget ขยาย jQuery UI Widget วิธีการภาวนา jQuery UI ใช้ห้องสมุดเครื่องมือทำไม jQuery UI วิธีการใช้ห้องสมุดเครื่องมือ

jQuery UI คู่มืออ้างอิง

jQuery UI API ไฟล์ API หมวดหมู่ - ผลดีเป็นพิเศษ API หมวดหมู่ - ผลกระทบหลัก API หมวดหมู่ - อีกวิธีหนึ่งคือ API หมวดหมู่ - วิธีการบรรทุกเกินพิกัด API หมวดหมู่ - ทาง API หมวดหมู่ - ผู้เลือก API หมวดหมู่ - กระทู้ API หมวดหมู่ - UI แกน API หมวดหมู่ - ประโยชน์ API หมวดหมู่ - วิดเจ็ต

jQuery UI ตัวอย่าง

jQuery UI ตัวอย่าง ลาก สถานที่ ขูดหินปูน เลือก ลำดับ แผงพับ การทำให้สมบูรณ์อัตโนมัติ ปุ่มกด เลือกวันที่ โต้ตอบ เมนู แถบความคืบหน้า Slider Rotator แถบ กล่องเคล็ดลับ ผลดีเป็นพิเศษ แสดงผล ปิดบัง การสลับ .addClass() .removeClass() .toggleClass() .switchClass() นิเมชั่นสี ตั้งอยู่ ห้องสมุดองค์ประกอบ

jQuery UI API - ปฏิสัมพันธ์เมาส์ (Mouse Interaction)

หมวดหมู่

โต้ตอบ (Interactions) | ยูทิลิตี้ (Utilities)

การใช้

รายละเอียด: ชั้นปฏิสัมพันธ์ขั้นพื้นฐาน

การพึ่งพาอาศัยกัน:

หมายเหตุ: jQuery.Widget วัตถุประสงค์ที่คล้ายกันไม่ได้โดยตรงใช้เมาส์เพื่อโต้ตอบ นี้เป็นชั้นฐานบริสุทธิ์สำหรับเครื่องมืออื่น ๆ ได้รับมรดกมาใช้ หน้านี้ได้เพิ่ม jQuery.Widget เอกสาร แต่มันมีวิธีการภายในที่ไม่สามารถได้รับการคุ้มครอง ประชาชน API เป็น _mouseStart() , _mouseDrag() , _mouseStop() และ _mouseCapture()

นำทางอย่างรวดเร็ว

选项 方法 事件

选项 类型 描述 默认值
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) 处理交互的开始。确认与主要的鼠标按钮关联的事件，确保 delay 与 distance 在交互启动之前得到满足。当交互已经准备开始，为要处理的扩展小部件调用 _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" );