jQuery UI教程：飞龙整理2014版

4星 · 超过85%的资源需积分: 10 163 浏览量更新于2024-07-22 1 收藏 6.26MB PDF 举报

"w3school jQuery UI教程飞龙整理 20141001" jQuery UI 是一个基于广泛流行的 jQuery JavaScript 库的扩展框架，它提供了一系列丰富的用户界面小部件和交互功能，旨在简化创建具有高度交互性的Web应用。这个教程由飞龙在2014年10月1日整理，主要涵盖了jQuery UI的基本概念、特性、优点以及可能的不足。 **jQuery UI的主要特性：** 1. **简单易用** - 继承了jQuery的简洁使用方式，提供直观的接口，使得开发者可以快速提升网站的用户体验。 2. **开源免费** - 使用MIT和GPL双许可协议，适应不同类型的项目需求，无论是个人还是商业项目都可以自由使用。 3. **广泛兼容** - 兼容各种主流浏览器，包括IE6+、Firefox2+、Safari3+、Opera9+和Chrome1+，确保了广泛的设备覆盖。 4. **轻便快捷** - 各组件相对独立，可以按需加载，避免了不必要的带宽消耗，提升了网页加载速度。 5. **标准先进** - 支持WAI-ARIA无障碍标准，通过XHTML代码实现渐进增强，确保低功能环境也能访问。 6. **美观多变** - 提供近20种预设主题，并支持深度定制，多达60项可配置样式规则和24种背景纹理，以满足不同的设计需求。 7. **开放透明** - 开发过程公开，文档、代码和讨论都对公众开放，鼓励社区参与。 8. **强力支持** - Google提供CDN服务，加速代码的分发和加载。 9. **完整汉化** - 内置多语言包，包括中文，方便非英文使用者。 **jQuery UI的不足之处：** 1. **代码质量** - 缺乏全面的测试用例，部分组件可能存在较多的错误或Bugs，可能不适用于企业级应用的严格要求。 2. **架构规划** - 组件间的API协调性不足，缺乏使用指南，可能导致开发过程中遇到协同问题。 3. **组件数量** - 相较于Dojo、YUI、ExtJS等成熟的UI库，jQuery UI提供的控件较少，可能无法满足复杂界面和功能的需求。 **如何下载jQuery UI：** 要获取jQuery UI，你可以访问其官方网站的DownloadBuilder页面，根据项目需求定制自己的下载包。这个过程通常分为三个步骤： 1. **选择组件** - 在下载生成器页面，你可以从核心、交互部件、小部件和效果库四个类别中选取你需要的组件。 2. **自定义主题** - 如果需要，你可以定制组件的主题风格，调整颜色、字体等视觉元素。 3. **下载配置** - 最后，确认你的选择，系统会生成一个定制的压缩包，包含你所选的所有组件和配置。通过这个教程，开发者可以学习如何利用jQuery UI创建出功能丰富、交互性强的Web应用，同时了解其优缺点，以便在实际项目中做出最佳选择。

return value;

_destroy: function() {

this.element

.removeClass( "progressbar" )

.text( "" );

}

});

关闭注释

部件库（Widget Factory）只是创建有状态插件的一种方式。这里还有一些其他不同的模型可以使用，且每个都有各自的优势和劣势。部件库（Widget

Factory）解决了很多常见的问题，且大大提高了效率，同时也大大提高了代码的重用性，使它适合于 jQuery UI 及其他有状态的插件。

请注意，在本章节中我们使用了 custom 命名空间。ui 命名空间被官方的 jQuery UI 插件保留。当创建您自己的插件时，您应该创建自己的命名空间。这样

才能更清楚插件来自哪里，属于哪个范围。

jQuery UI 实例

jQuery UI 提供了一组用户界面交互、特效、小部件、实用工具及主题。通过实例演示、查看源代码、创建主题、阅读API 文档，开始学习使用 jQuery UI。

交互（Interactions）

交互（Interactions）向任何元素添加基本的基于鼠标的行为。您可以只通过短短的几行代码即可创建排序列表、缩放元素、拖放行为等等。交互

（Interactions）也作用于更复杂的小部件和应用程序。

拖动（Draggable）

放置（Droppable）

缩放（Resizable）

选择（Selectable）

排序（Sortable）

小部件（Widgets）

小部件（Widgets）有功能齐全的 UI 控件，使桌面应用程序也具备 Web 应用程序一样丰富的功能。所有的小部件（Widgets）提供了一个核心，带有定制行

为的大量扩展以及完整的主题支持。

折叠面板（Accordion）

自动完成（Autocomplete）

按钮（Button）

日期选择器（Datepicker）

对话框（Dialog）

菜单（Menu）

进度条（Progressbar）

滑块（Slider）

旋转器（Spinner）

标签页（Tabs）

工具提示框（Tooltip）

特效（Effects）

特效（Effects）支持颜色动画和 Class 转换，同时也提供了一些额外的 Easings。另外，提供了一套完整的定制特效，供显示和隐藏元素时或者只是添加一

些视觉显示时使用。

特效（Effect）

可见性（Visibility）

显示（Show）

隐藏（Hide）

切换（Toggle）

Class 动画（Class Animation）

添加 Class（Add Class）

移除 Class（Remove Class）

切换 Class（Toggle Class）

转换 Class（Switch Class）

颜色动画（Color Animation）

实用工具（Utilities）

jQuery UI 使用实体工具（Utilities）来创建交互（interactions）和小部件（widgets）。

定位（Position）

部件库（Widget Factory）

jQuery UI 实例 - 拖动（Draggable）

允许使用鼠标移动元素。

如需了解更多有关 draggable 交互的细节，请查看 API 文档可拖拽小部件（Draggable Widget）。

默认功能

在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。

<!doctype html>

<head>

<title>jQuery UI 拖动（Draggable） - 默认功能</title>

<style>

#draggable { width: 150px; height: 150px; padding: 0.5em; }

</style>

$(function() {

$( "#draggable" ).draggable();

});

</script>

</head>

<body>

</div>

</body>

</html>

查看演示

自动滚动

当 draggable 移动到视区外时自动滚动文档。设置 scroll 选项为 true 来启用自动滚动，当滚动触发时进行微调，滚动速度是通过 scrollSensitivity 和

scrollSpeed 选项设置的。

<!doctype html>

<head>

<title>jQuery UI 拖动（Draggable） - 自动滚动</title>

<style>

#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

</style>

$(function() {

$( "#draggable" ).draggable({ scroll: true });

$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });

$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });

});

</script>

</head>

<body>

<p>Scroll 设置为 true，默认设置</p>

</div>

<p>scrollSensitivity 设置为 100</p>

</div>

<p>scrollSpeed 设置为 100</p>

</div>

</body>

</html>

查看演示

约束运动

通过定义 draggable 区域的边界来约束每个 draggable 的运动。设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴，或者使用 containment 选项来指

定一个父级的 DOM 元素或者一个 jQuery 选择器，比如 'document.'。

<!doctype html>

<head>

<title>jQuery UI 拖动（Draggable） - 约束运动</title>

<style>

.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

#draggable, #draggable2 { margin-bottom:20px; }

#draggable { cursor: n-resize; }

#draggable2 { cursor: e-resize; }

#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }

h3 { clear: left; }

</style>

$(function() {

$( "#draggable" ).draggable({ axis: "y" });

$( "#draggable2" ).draggable({ axis: "x" });

$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });

$( "#draggable5" ).draggable({ containment: "parent" });

});

</script>

</head>

<body>

<h3>沿着轴约束运动：</h3>

<p>只能垂直拖拽</p>

</div>

<p>只能水平拖拽</p>

</div>

<h3>或者在另一个 DOM 元素中约束运动：</h3>

<p>我被约束在盒子里</p>

</div>

<p id="draggable5" class="ui-widget-header">我被约束在父元素内</p>

</div>

</body>

</html>

查看演示

光标样式

当拖拽对象时定位光标。默认情况下，光标是出现在被拖拽对象的中间。使用 cursorAt 选项来指定相对于 draggable 的另一个位置（指定一个相对于 top、

right、bottom、left 的像素值）。通过提供一个带有有效的 CSS 光标值的 cursor 选项，来自定义光标的外观。有效的 CSS 光标值包括：default、move、

pointer、crosshair，等等。

<!doctype html>

<head>

<title>jQuery UI 拖动（Draggable） - 光标样式</title>

<style>

#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

</style>

$(function() {

$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });

$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });

$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });

});

</script>

</head>

<body>

<p>我总是在中间（相对于鼠标）</p>

</div>

<p>我的光标是在 left -5 和 top -5</p>

</div>

<p>我的光标位置只控制了 'bottom' 值</p>

</div>

</body>

</html>

查看演示

延迟开始

通过 delay 选项设置延迟开始拖拽的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽。

<!doctype html>

<head>

<title>jQuery UI 拖动（Draggable） - 延迟开始</title>

<style>

#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

</style>

$(function() {

$( "#draggable" ).draggable({ distance: 20 });

$( "#draggable2" ).draggable({ delay: 1000 });

$( ".ui-draggable" ).disableSelection();

});

</script>

</head>

<body>

<p>只有把我拖拽了 20 像素后，拖拽才开始</p>

</div>

<p>不管 distance 是多少，您都必须拖拽并等待 1000ms 后拖拽才开始</p>

</div>

</body>

</html>

查看演示

事件

draggable 上的 start、drag 和 stop 事件。拖拽开始时触发 start 事件，拖拽期间触发 drag 事件，拖拽停止时触发 stop 事件。

<!doctype html>

<head>

<title>jQuery UI 拖动（Draggable） - 事件</title>

<style>

#draggable { width: 16em; padding: 0 1em; }

#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }

#draggable ul li span.ui-icon { float: left; }

#draggable ul li span.count { font-weight: bold; }

</style>

$(function() {

var $start_counter = $( "#event-start" ),

$drag_counter = $( "#event-drag" ),

$stop_counter = $( "#event-stop" ),

counts = [ 0, 0, 0 ];

$( "#draggable" ).draggable({

start: function() {

counts[ 0 ]++;

updateCounterStatus( $start_counter, counts[ 0 ] );

drag: function() {

counts[ 1 ]++;

updateCounterStatus( $drag_counter, counts[ 1 ] );

stop: function() {

counts[ 2 ]++;

updateCounterStatus( $stop_counter, counts[ 2 ] );

}

});

function updateCounterStatus( $event_counter, new_count ) {

// 首先更新视觉状态...

if ( !$event_counter.hasClass( "ui-state-hover" ) ) {

$event_counter.addClass( "ui-state-hover" )

.siblings().removeClass( "ui-state-hover" );

}

// ...然后更新数字

$( "span.count", $event_counter ).text( new_count );

}

});

</script>

</head>

<body>

<p>请拖拽我，触发一连串的事件。</p>

<li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" 被调用 <span

class="count">0</span>x</li>

<li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" 被调用 <span

class="count">0</span>x</li>

<li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" 被调用 <span

class="count">0</span>x</li>

</ul>

</div>

</body>

</html>

查看演示

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 选择器。

<!doctype html>

<head>

<title>jQuery UI 拖动（Draggable） - Handles</title>

剩余316页未读，继续阅读

绝不原创的飞龙

粉丝: 4w+
资源: 1083

jQuery UI教程：飞龙整理2014版

w3school ruby教程 飞龙整理 20141001

w3school 设计模式教程 飞龙整理 20141001

w3school 正则表达式教程 飞龙整理 20141001

w3school mangodb教程 飞龙整理 20141001

w3school jQuery Mobile教程 飞龙整理 20141022

w3school ios教程 飞龙整理 20141001

w3school bootstrap教程 飞龙整理 20141001

w3school xml教程 飞龙整理 20141001

w3school AngularJS教程 飞龙整理 20141001

w3school SQL教程 飞龙整理 20141001

最新资源

w3school ruby教程飞龙整理 20141001

w3school 设计模式教程飞龙整理 20141001

w3school 正则表达式教程飞龙整理 20141001

w3school mangodb教程飞龙整理 20141001

w3school jQuery Mobile教程飞龙整理 20141022

w3school ios教程飞龙整理 20141001

w3school bootstrap教程飞龙整理 20141001

w3school xml教程飞龙整理 20141001

w3school AngularJS教程飞龙整理 20141001

w3school SQL教程飞龙整理 20141001