jQuery常用UI插件
Posted 工云IT技术
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery常用UI插件相关的知识，希望对你有一定的参考价值。
1jQuery的UI基础
jQuery UI基础
jQuery UI是构建于jQuery之上的一套用户界面开发库
其中包括许多交互操作功能和用户界面组件
下载jQuery UI库http://jqueryui.com/download
搭建环境
将jQuery UI库中的js文件夹和css文件夹复制到网站根目录下
在文档首部通过<link>或<script>标记包含所需的支持文件
代码如下：
2jQuery的拖动、投放、缩放、按钮
拖动组件draggable([options]) 中的参数选型
属性 |
说明 |
axis |
限制可拖动元素沿着一个 轴移动，可接受字符串x 和y或布尔值false |
cancel |
阻止从指定的元素上开 始拖动 |
containment |
阻止将可拖动对象拖出指定 元素或区域的边界。可能的 值包括：parent、document、 window、[x1,y1,x2,y2] |
cursor |
指定鼠标指针位于可拖动对 象上时使用的CSS cursor属性 |
cursorAt |
指定一个默认的相对位置， 拖动对象时光标将出现在这里。 其类型为映射，可指定top、 left、right和bottom中的一 个或两个 |
delay |
指定开始拖动时延时的毫秒数 |
属性 |
说明 |
Distance |
按下鼠标后开始拖动前必须 移动鼠标的距离，以像素为 单位。此选项用于防止单击 一个元素时产生不必要的拖动 |
Grid |
使可拖动元素对齐页面上的 一个虚拟网格。可接收数组 [x,y]，其中x和y分别为网 格的宽度和高度 |
Handle |
在可拖动元素中指定用于 放置拖动指针的特定区域 |
Helper |
指定拖动显示的辅助元素。 其值可为字符串original 或clone |
Opacity |
指定拖动过程中辅助元素 的不透明度 |
Revert |
若设置为true，则当停止拖 动时元素将返回其起始位置。 若设置为字符串invalid， 则仅在将元素未拖到可放置 位置时才会返回，而字符串 valid则和其相反 |
revertDuration |
指定元素返回其起始位置 所需要的毫秒数。若将 revert设置为false， 则忽略此选项 |
拖动组件相关命令
创建一个可拖动对象后，可调用disable命令来禁止其可拖动功能：
代码实例：
禁止可拖动功能后，通过调用enable命令来重新激活对象的可拖动功能：
代码实例：
若要获取或设置可拖动属性，可调用option命令：
代码实例：
如果要从一个对象中完全删除可拖动功能，则可以对其调用destroy命令 ：
代码实例：
拖动事件
start事件：其类型为dragstart，当开始拖动时触发该事件
drag事件：其类型为drag，在拖动过程中移动鼠标时将触发该事件
stop事件，其类型为dragstop，当停止拖动时将触发该事件
拖动事件处理程序
eventType指定要绑定的事件名称
ui为包含附加信息的jQuery对象
helper：一个jQuery对象，表示可拖动助手(helper)元素
position：一个包含top属性和left属性的对象，表示可拖动助手相对于原始对象的位
offset：一个包含top属性和left属性的对象，表示可拖动助手相对于页面的绝对位置
核心代码：
拖动事件示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖动事件</title>
<script ></script>
<link rel="stylesheet" href="../assets/css/jquery-ui.css">
<script ></script>
<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>
</head>
<body>
<div id="draggable" class="ui-widget ui-widget-content">
<p>请拖拽我，触发一连串的事件。</p>
<ul>
<li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" 被调用 <span>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>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>0</span>x</li>
</ul>
</div>
</body>
</html>
拖动事件示例js代码
<script>
$(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>
投放组件droppable([options]) 参数介绍：
属性 |
说明 |
accept |
设置投放对象可接 受的元素 |
activeClass |
设置在可接受的元素处 于拖动状态时投放应用 于对象的CSS类 |
greedy |
设置是否在嵌套的投放 对象中阻止事件的传播 |
hoverClass |
设置投放对象在拖动对 象移动到其中时应用的 CSS类 |
tolerance |
设置可接受的拖动元素完 成投放的触发模式。可能 值包括：fit、intersect、 pointer、touch |
投放事件
activate事件：
其类型为dropactivate。当可接受的对象开始拖动时将触发此事件
deactivate事件：
其类型为dropdeactivate。当可接受的对象停止拖动时将触发此事件
over事件：
其类型为dropover。当可接受的对象位于目标对象上方时将触发此事件
out事件：
其类型为dropout。当可接受的对象移出目标对象时将触发此事件
drop事件：
其类型为drop。当把可接受的对象放置在目标对象上方时将触发此事件
投放事件处理程序参数
eventType表示事件名称
ui对象具有以下属性
draggable：一个jQuery对象，表示当前可拖动元素
helper：一个jQuery对象，表示可拖动助手元素
position：一个包含top属性和left属性的对象，表示可拖动助手相对于原始对象的位置
offset：一个包含top属性和left属性的对象，表示可拖动助手相对于页面的绝对位置
缩放组件resizable([options]) 参数介绍：
属性 |
说明 |
alsoResize |
当调整大小时同步调整 所选定的一组元素的大小 |
animate |
指定是否为元素的缩放 过程添加动画效果 |
animateDuration |
指定动画持续的时间。 可接受数字或字符串， 字符串可以是slow、 normal或fast |
aspectRatio |
若设置为true，则调整大小 时保持原有的长宽比。也可 以指定一个自定义的长宽比 ，例如9/16或0.5 |
autoHide |
若设置为true，则自动隐藏 该元素的缩放手柄，直到鼠 标指针悬停在该元素上 |
cancel |
阻止与选择器匹配的元素 的尺寸发生变化 |
containment |
限制在指定元素的边界范围 内调整大小。该属性的可能 值包括：parent、document 、DOM元素或选择器 |
属性 |
说明 |
delay |
设置缩放的延迟时间， 若设置了该属性，则 移动鼠标超过指定的 毫秒数后才开始进行缩放 |
distance |
设置缩放的延迟距离， 若设置了该属性，则 移动鼠标超过指定的 距离后才开始进行缩放 |
ghost |
若设置为true，则在 缩放时显示一个半透 明的辅助元素 |
grid |
使元素缩放时对齐网格。 接受数组[x,y]，x和y分 别指定网格的宽度和高度 |
handles |
定义缩放手柄。 |
helper |
设置向代理元素添加的CSS类。 |
maxHeight |
设置元素允许调整的最大高度 |
maxWidth |
设置元素允许调整的最大宽度 |
minHeight |
设置元素允许调整的最小高度 |
minWidth |
设置元素允许调整的最小宽度 |
缩放事件
start事件：
类型为resizestart。当开始缩放时触发此事件
resize事件：
类型为resize。当通过拖动缩放手柄来调整大小时触发此事件
stop事件：
类型为resizestop。当停止缩放操作时触发此事件
缩放事件处理程序参数
eventType表示事件名称
ui对象具有以下属性 ：
helper：一个包含helper元素的jQuery对象
originalPosition：一个包含top和left属性的对象，表示缩放前的位置
originalSize：一个包含width和height属性的对象，表示缩放前的大小
position：一个包含top和left属性的对象，表示当前位置
size：一个包含width和height属性的对象，表示当前大小
缩放示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缩放事件</title>
<script ></script>
<link rel="stylesheet" href="../assets/css/jquery-ui.css">
<script ></script>
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
</style>
</head>
<body>
<script>
$(function() {
$( "#resizable" ).resizable({
animate: true
});
});
</script>
<div id="resizable">拖动</div>
</body>
</html>
按钮部件button([options]) 参数介绍：
属性 |
说明 |
text |
指定是否显示文本。 |
icons |
指定要在按钮上显示的图标。 |
label |
指定要在按钮上显示的文本。 |
3jQuery的对话框、日历选择器、选项卡
对话框部件dialog([options]) 参数介绍：
属性 |
说明 |
autoOpen |
若设置为true，打开； false，则隐藏 |
bgiframe |
若设置为true，则使 用bgiframe插件 |
buttons |
指定在对话框中显示 的按钮。 |
closeOnEscape |
指定当获得焦点并且用户 按下Esc键时是否关闭对话框 |
dialogClass |
指定添加到对话框的类名 |
draggable |
若设置为true，则可通过 拖动标题栏来移动对话框 |
属性 |
说明 |
height |
指定对话框的高度，以像素为单位。 |
hide |
指定关闭对话框时使用的效果 |
maxHeight |
设置对话框可以调整的最大高度 |
maxWidth |
设置对话框可以调整的最大宽度 |
minHeight |
设置对话框可以调整的最小高度 |
minWidth |
设置对话框可以调整的最小宽度 |
modal |
若设置为true，则显示模式对话框 |
属性 |
说明 |
position |
设置对话框的初始位置。 |
resizable |
若设置为true，则可以调 整该对话框的大小 |
show |
指定打开对话框时使用的动画效果 |
title |
指定该对话框的标题。 |
width |
设置对话框的宽度 |
zIndex |
设置该对话框的起始z-Index属性值 |
对话框组件相关命令
close：关闭对话框
代码如下：
isOpen：如果对话框当前处于打开状态，则返回true
代码如下:
moveToTop：将该对话框移动到对话框堆栈的顶部
代码如下：
open：打开对话框
代码如下：
对话框事件
focus事件：
当对话框得到焦点时触发此事件。
open事件：
当打开对话框时触发此事件。
dragstart事件：
当开始拖动对话框时触发此事件。
drag事件：
当拖动对话框时触发此事件。
dragstop事件：
当停止拖动对话框后触发此事件。
resizeStart事件：
当开始调整对话框大小时触发此事件。
resize事件：
当调整对话框大小时触发此事件。
resizeStop事件：
当结束调整对话框大小时触发此事件。
beforeclose事件：
当试图关闭对话框时触发此事件。如果想要阻止关闭对话框，可以在beforeclose事件处理程序中返回false。
close事件：
当关闭对话框时触发此事件。
对话框部件示例
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对话框</title>
<script ></script>
<link rel="stylesheet" href="../assets/css/jquery-ui.css">
<script ></script>
<style>
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
</style>
</head>
<body>
<button id="dialog-link" class="ui-button ui-corner-all ui-widget">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog
</button>
<!-- ui-dialog -->
<div id="dialog" title="对话框标题">
<p>这是一个对话框.</p>
</div>
</body>
</html>
对话框部件js代码示例
<script>
$(function () {
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
})
</script>
日历选择器部件datepicker([options]) 参数介绍：
属性 |
说明 |
autoSize |
若设置为true，则自动调整 输入字段的大小， |
dateFormat |
指定解析和显示日期的格式。 |
defaultDate |
设置字段为空的情况下首次 打开时要突出显示的日期。 |
maxDate |
设置可选择的最大日期。 |
minDate |
设置可选择的最小日期。 |
showButtonPanel |
指定是否显示按钮面板 |
日历组件相关命令
isDisabled：检查日期选择器是否被禁用。
代码如下：
hide/show：关闭或打开日期选择器，其中参数speed指定动画的速度。
代码如下：
getDate：返回日期选择器中的当前日期，若未选择，则返回null。
代码如下：
setDate：设置日期选择器的当前日期。
代码如下：
日历组件全局方法
setDefaults：更改所有日期选择器的默认设置。
代码如下：
formatDate：使用指定格式将日期格式化为字符串值。
代码如下：
parseDate：使用指定格式从字符串值中提取日期。
代码如下：
日历组件示例
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历组件</title>
<script ></script>
<link rel="stylesheet" href="../assets/css/jquery-ui.css">
<script ></script>
</head>
<body>
<script>
$(function () {
$( "#datepicker" ).datepicker({
inline: true
});
})
</script>
<h2>Datepicker</h2>
<div id="datepicker"></div>
</body>
</html>
选项卡部件tabs([options]) 参数介绍：
属性 |
说明 |
ajaxOptions |
设置加载选项卡内容时的AJAX选项。 |
cache |
设置是否对远程选项卡内容进行缓存 |
collapsible |
若设置为true，则允许将已选定 的选项卡折叠起来 |
cookie |
将最后选定的选项卡保存到cookie中。 |
disabled |
用于设置初始化时禁用哪些选项卡 |
event |
指定选择选项卡时使用的事件类型 |
idPrefix |
指定AJAX远程选项卡的id属性前缀 （锚元素无title属性时） |
selected |
指定初始化时选定的选项卡的索引。 若设置为-1，则所有选项卡均未选定 |
选项卡组件相关命令
add：添加一个新的选项卡
代码如下：
remove：移除一个选项卡，其中参数index指定要移除的选项卡的索引
代码如下：
enable：启用一个被禁用的选项卡
代码如下：
disable：禁用一个选项卡。
代码如下：
select：选定一个选项卡。
代码如下：
load：通过编程方式重新加载一个AJAX选项卡，即使cache属性设置为true。
代码如下：
url：更改AJAX远程选项卡要加载的资源的URL。
代码如下：
length：获取第一个匹配的选项卡面板包含的选项卡数目。
代码如下：
选项卡示例：
效果图：
代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script ></script>
<link rel="stylesheet" href="../assets/css/jquery-ui.css">
<script ></script>
</head>
<body>
<script>
$(function () {
$( "#tabs" ).tabs();
})
</script>
<!-- Tabs -->
<h2>Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
</body>
</html>
本站代码下载方法：
以上是关于jQuery常用UI插件的主要内容，如果未能解决你的问题，请参考以下文章
jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）
JavaScript之jQuery-8 jQuery 使用插件(zTree树插件jQuery UI插件)