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

阻止将可拖动对象拖出指定

元素或区域的边界。可能

包括:parentdocument

window[x1,y1,x2,y2]

cursor

指定鼠标指针位于可拖动

象上时使用的CSS   cursor属性

cursorAt

指定一个默认的相对位置

拖动对象时光标将出现在这里。

类型为映射,可指定top

leftrightbottom中的

或两个

delay

指定开始拖动时延时的毫秒数

属性

说明

Distance

按下鼠标后开始拖动前必须

移动鼠标的距离,以像素

单位。此选项用于防止单击

个元素时产生不必要的拖动

Grid

使可拖动元素对齐页面上

个虚拟网格。可接收数组

[x,y],其中xy分别为

的宽度和高度

Handle

在可拖动元素中指定用于

放置拖动指针的特定区域

Helper

指定拖动显示的辅助元素

其值可为字符串original

clone

Opacity

指定拖动过程中辅助元素

不透明度

Revert

若设置为true,则当停止

动时元素将返回其起始位置

设置为字符串invalid

仅在将元素未拖到可放置

位置时才会返回,而字符

valid则和其相反

revertDuration

指定元素返回其起始位置

需要的毫秒数。若

revert设置为false

忽略此选项

拖动组件相关命令

创建一个可拖动对象后,可调用disable命令来禁止其可拖动功能: 

代码实例:

jQuery常用UI插件

禁止可拖动功能后,通过调用enable命令来重新激活对象的可拖动功能: 

代码实例:

jQuery常用UI插件

若要获取或设置可拖动属性,可调用option命令: 

代码实例:

jQuery常用UI插件

如果要从一个对象中完全删除可拖动功能,则可以对其调用destroy命令 :

代码实例:

jQuery常用UI插件

拖动事件

start事件:其类型为dragstart,当开始拖动时触发该事件 

drag事件:其类型为drag,在拖动过程中移动鼠标时将触发该事件 

stop事件,其类型为dragstop,当停止拖动时将触发该事件

拖动事件处理程序

eventType指定要绑定的事件名称 


ui为包含附加信息的jQuery对象 

helper:一个jQuery对象,表示可拖动助手(helper)元素 

position:一个包含top属性和left属性的对象,表示可拖动助手相对于原始对象的位 

offset:一个包含top属性和left属性的对象,表示可拖动助手相对于页面的绝对位置 

核心代码:

jQuery常用UI插件

拖动事件示例

<!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

设置可接受的拖动元素

投放的触发模式。可能

包括:fitintersect

pointertouch

投放事件

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

normalfast

aspectRatio

若设置为true,则调整大小

保持原有的长宽比。也

指定一个自定义的长宽

例如9/160.5

autoHide

若设置为true,则自动隐藏

元素的缩放手柄,直到

标指针悬停在该元素上

cancel

阻止与选择器匹配的元素

尺寸发生变化

containment

限制在指定元素的边界范围

调整大小。该属性的可能

包括:parentdocument

DOM元素或选择器

属性

说明

delay

设置缩放的延迟时间

设置了该属性,

移动鼠标超过指定

毫秒数后才开始进行缩放

distance

设置缩放的延迟距离

设置了该属性,

移动鼠标超过指定

距离后才开始进行缩放

ghost

若设置为true,则

缩放时显示一个半

的辅助元素

grid

使元素缩放时对齐网格

接受数组[x,y]xy

指定网格的宽度和高度

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:关闭对话框 

代码如下:

jQuery常用UI插件

isOpen:如果对话框当前处于打开状态,则返回true 

代码如下:

jQuery常用UI插件

moveToTop:将该对话框移动到对话框堆栈的顶部 

代码如下:

jQuery常用UI插件

open:打开对话框 

代码如下:

jQuery常用UI插件

对话框事件

focus事件:

当对话框得到焦点时触发此事件。 

open事件:

当打开对话框时触发此事件。 

dragstart事件:

当开始拖动对话框时触发此事件。 

drag事件:

当拖动对话框时触发此事件。

dragstop事件:

当停止拖动对话框后触发此事件。 

resizeStart事件:

当开始调整对话框大小时触发此事件。 

resize事件:

当调整对话框大小时触发此事件。 

resizeStop事件:

当结束调整对话框大小时触发此事件。

beforeclose事件:

当试图关闭对话框时触发此事件。如果想要阻止关闭对话框,可以在beforeclose事件处理程序中返回false。 

close事件:

当关闭对话框时触发此事件。

对话框部件示例

效果图:

jQuery常用UI插件

代码如下:

<!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:检查日期选择器是否被禁用。 

代码如下:

jQuery常用UI插件

hide/show:关闭或打开日期选择器,其中参数speed指定动画的速度。 

代码如下:

jQuery常用UI插件

getDate:返回日期选择器中的当前日期,若未选择,则返回null。

代码如下: 

jQuery常用UI插件

setDate:设置日期选择器的当前日期。 

代码如下:

jQuery常用UI插件

日历组件全局方法

setDefaults:更改所有日期选择器的默认设置。 

代码如下:

jQuery常用UI插件

formatDate:使用指定格式将日期格式化为字符串值。 

代码如下:

jQuery常用UI插件

parseDate:使用指定格式从字符串值中提取日期。 

代码如下:

jQuery常用UI插件

日历组件示例

效果图:

jQuery常用UI插件

代码如下:

<!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:添加一个新的选项卡 

代码如下:

jQuery常用UI插件

remove:移除一个选项卡,其中参数index指定要移除的选项卡的索引

代码如下:

jQuery常用UI插件

enable:启用一个被禁用的选项卡

代码如下: 

jQuery常用UI插件

disable:禁用一个选项卡。 

代码如下:

jQuery常用UI插件

select:选定一个选项卡。

代码如下: 

jQuery常用UI插件

load:通过编程方式重新加载一个AJAX选项卡,即使cache属性设置为true。 

代码如下:

jQuery常用UI插件

url:更改AJAX远程选项卡要加载的资源的URL。 

代码如下:

jQuery常用UI插件

length:获取第一个匹配的选项卡面板包含的选项卡数目。 

代码如下:

jQuery常用UI插件

选项卡示例:

效果图:

jQuery常用UI插件

代码实例

<!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常用UI插件

jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

JavaScript之jQuery-8 jQuery 使用插件(zTree树插件jQuery UI插件)

jquery常用插件-(转载)

jquery-1.3.2 ui.progressbar.js 插件需要那些css,最好给个css文件。3Q!!

jquery插件库一般怎么使用。