Jqueryui插件.docx

Jquery ui 插件 菜单工具插件——menu 菜单工具插件可以通过ul创建多级内联或弹出式菜单，支持通过键盘方向键控制菜单滑动，允许为菜单的各个选项添加图标，调用格式如下： $(selector).menu({options}); selector参数为菜单列表中最外层ul元素，options为menu()方法的配置对象。 例如，在页面中，通过ul元素内联的方式构建一个三层结构的导航菜单，并将最外层ul元素通过menu()方法绑定插件，实现导航菜单的功能，如下图所示： INCLUDEPICTURE \d /52e4c2c10001b1a705160466.jpg \* MERGEFORMATINET  在浏览器中显示的效果： INCLUDEPICTURE \d /52e4c2dd0001b82505350338.jpg \* MERGEFORMATINET  从图中可以看出，通过ul内嵌的方式，构建一个三层结构的导航菜单，将li元素的class属性值设为“ui-state-disabled”，可将菜单选项置为不可用状态。 面板折叠插件——accordion 面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下： $(selector).accordion({options}); 其中，参数selector为整个面板元素，options参数为方法对应的配置对象。 例如，通过accordion插件展示几个相同区域面板的折叠效果，如下图所示： INCLUDEPICTURE \d /52e4bd2c0001e58jpg \* MERGEFORMATINET  在浏览器中显示的效果： INCLUDEPICTURE \d /52e4bd4a0001b4ejpg \* MERGEFORMATINET  从图中可以看出，由于绑定了折叠面板插件，默认为第一个面板的内容为展示状态，点击第二个面板主题时，展示主题对应内容，同时关闭上一个面板内容。 拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector). draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。 例如，在页面中的div元素中添加两个子类div，通过与拖曳插件绑定，这两个子类div元素只能在外层的父div元素中任意拖曳，如下图所示： INCLUDEPICTURE \d /52e4b50c0001545304260177.jpg \* MERGEFORMATINET  在浏览器中显示的效果： INCLUDEPICTURE \d /52e4b5240001794706620379.jpg \* MERGEFORMATINET  body div id=divtest div id=x class=drag沿x轴拖拽/div div id=y class=drag沿y轴拖拽/div div id=all class=drag沿xy轴拖拽/div /div script type=text/javascript $(function () { $(#x).draggable({containment:parent,axis:x}); $(#y).draggable({containment:parent,axis:y}); $(#all).draggable({containment:parent}); }); /script 放置插件——droppable 除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下： $(selector).droppable({options}) selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。 例如