第 10 章 jQuery UI 型插件

  • 拖曳插件 draggable
  • 放置插件 droppable
  • 拖曳排序插件 sortable
  • 面板折叠插件 accordion
  • 选项卡插件 tabs
  • 对话框插件 dialog
  • 菜单工具插件 menu
  • 微调按钮插件 spinner
  • 工具提示插件 tooltip

拖曳插件—— draggable

拖曳插件 draggable 的功能是拖动被绑定的元素,当这个 jQuery UI 插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:

$(selector). draggable({options})

options 参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如”containment”属性指定拖曳区域,”axis”属性设置拖曳时的坐标方向。

例如,在页面中的

元素中添加两个子类
,通过与拖曳插件绑定,这两个子类
元素只能在外层的父
元素中任意拖曳,如下图所示:

这里写图片描述

在浏览器中显示的效果:

这里写图片描述

从图中可以看出,由于使用 jQuery UI 插件 draggable 绑定了两个子类

元素,并将配置对象的”containment”属性值设为”parent”,因此,这两个子类
元素只能在外层的父框中实现任意拖曳。

<body>
        <div id="divtest">
            <div id="x" class="drag">沿x轴拖拽div>
            <div id="y" class="drag">沿y轴拖拽div>
        div>

        <script type="text/javascript">
            $(function () {
                $("#x").draggable({ containment:"parent",axis:"x"});
                $("#y").draggable({ containment:"parent",axis:"y"});
            });
        script>
    body>

放置插件—— droppable

除使用 draggable 插件拖曳任意元素外,还可以调用 droppable UI 插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:

$(selector).droppable({options})

selector 参数为接收拖曳元素,options 为方法的配置对象,在对象中,drop 函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。

例如,在页面中,通过调用 droppable 插件将”产品区”中的元素拖曳至”购物车”中,同时改变”购物车”的背景色和数量值,如下图所示:

第 10 章 jQuery UI 型插件_第1张图片

在浏览器中显示的效果:

第 10 章 jQuery UI 型插件_第2张图片

从图中可以看出,先调用 draggable 插件任意拖曳”产品区”的元素,然后,调用 droppable 插件绑定”购物车”中接收元素,当”产品区”元素完全拖曳至”购物车”时,触发定义的 drop 函数,改变”购物车”中背景色和总数量值。

拖曳排序插件—— sortable

拖曳排序插件的功能是将序列元素(例如

  • )按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:

    $(selector).sortable({options});

    selector 参数为进行拖曳排序的元素,options 为调用方法时的配置对象

    例如,在页面中,通过加载 sortable 插件将

  • 你可能感兴趣的:(jQuery,基础课程,jquery)