网页交互设计控件 第1篇
1.有界输入控件（用于有任何需要数值界限的地方）
1）微调控制项
2）刻度查和滑块
是机械时代借用过来的习惯用法。分别对应旋转控制钮和滑动控制杆。可以很好的提供设定的视觉反馈，常被用于音频软件。
3）拇指轮
是刻度盘的变体，是一种紧凑的无界控件。是和平移和缩放。和滚动条不同，它不提供任何比例反馈，控件范围是有限的。
4）其他
2.无界输入控件
显示控件（用于可视化地直接操作程序）
经常看到的文字文本本身就是显示控件，常见的滚动条也是显示控件。向下滚动页面时，我们发现滚动条，停留在页面的右侧。滚动条是可进行操作的，给用户呈现信息的控件。抽屉式的轮播也是显示控件的一类。
网页交互设计控件 第2篇
在Web开发中，拖放功能允许用户通过鼠标将对象从一个位置拖动到另一个位置。这种交互方式对于提升用户体验非常有帮助，比如在排序列表项、移动图片等场景中经常使用。jQuery UI提供了一套完整的拖放功能API，使得开发者可以轻松地为网页元素添加拖放交互能力。
在实现拖放时，通常有两个基本的角色：拖动源（draggable）和放置目标（droppable）。拖动源是用户可以开始拖动操作的元素，放置目标则是拖动源可以被放置的元素。通过结合适当的事件处理器和配置选项，jQuery UI的拖放功能可以实现复杂的交互逻辑。
要实现拖放功能，首先需要在页面上引入jQuery和jQuery UI库。以下是基本的实现步骤：
为拖动源元素添加可拖动的行为。通过选择器选中元素后，调用 .draggable() 方法： javascript $('.draggable').draggable();
为放置目标元素添加可放置的行为。同样地，通过选择器选中元素后，调用 .droppable() 方法： javascript $('.droppable').droppable({ drop: function(event, ui) { ('Dropped'); } });
在上面的代码中， drop 事件处理器会在元素被成功放置后触发，你可以在这里编写放置后需要执行的代码。
使用 .draggable() 和 .droppable() 方法时，还可以设置各种选项来调整拖放行为，例如限制拖动的方向、改变拖动元素的外观、定义放置目标接受或拒绝拖动源的条件等。
jQuery UI的交互组件是一系列预定义的、可交互的界面元素，它们为常见的用户界面交互提供了即时可用的解决方案。这些组件包括但不限于：
这些组件不仅提高了用户界面的可用性，还增强了界面的交互性，使得开发者可以更快地构建出响应用户操作的应用程序。
以 accordion 为例，以下是如何在页面中加入一个简单的 accordion 交互组件：
网页交互设计控件 第3篇
随着Web应用的发展，用户界面的交互性和丰富性变得日益重要。jQuery UI，作为一款流行的JavaScript库，它在jQuery的基础上扩展了界面交互组件。本章将带您了解jQuery UI的发展历程、核心特点，并探讨其在现代Web开发中的应用价值。
jQuery UI最初是作为jQuery项目的一部分而诞生，它的发展历程与jQuery紧密相连。随着Web技术的不断进步，用户对交互体验的要求越来越高，这促使了jQuery UI的不断完善和演进。自2006年推出首个版本以来，它已经成为了Web开发者不可或缺的工具之一。
jQuery UI提供了多种预设的界面组件和交互效果，这些组件包括但不限于日历、对话框、滑动器等，它们增强了Web应用的视觉和交互性能。特点之一是易于定制的主题系统，允许开发者根据应用需求快速打造个性化的界面。此外，jQuery UI还具有良好的浏览器兼容性，使其能够适用于多种环境。
在当今的Web开发中，jQuery UI不仅可以提高开发效率，还能显著提升用户的体验。它简化了许多复杂的用户界面任务，如拖放功能、表格排序、日期选择器等，使开发者可以专注于更核心的业务逻辑，而不必从头开始编写这些基础功能。