jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)
来源:互联网 发布:爱奇艺出品的网络剧 编辑:程序博客网 时间:2024/05/17 07:21
1、拖曳插件——draggable
通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:
$(selector). draggable({options})
options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。
$("#test").draggable({axis:"x"}); //延X轴移动
$("#test").draggable("enable");
<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"}); //仅延x轴拖拽 $("#y").draggable({containment:"parent",axis:"y"}); //<span style="font-family: Arial, Helvetica, sans-serif;">仅延y轴拖拽</span> }); </script> </body>2、放置插件——droppable
除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:
$(selector).droppable({options})
selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
3、自行拖曳排序插件——sortable,拖拽后以新位置排列
功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:
$(selector).sortable({options});
selector参数为进行拖曳排序的元素,options为调用方法时的配置对象
4、面板折叠插件——accordion
点击同一组下一个标签时,其它组内容隐藏
面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:
$(selector).accordion({options});
其中,参数selector为整个面板元素,options参数为方法对应的配置对象。
5、横向选项卡插件——tabs
使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:
$(selector).tabs({options});
selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。
6、对话框插件——dialog,弹出自定义按钮确认框
对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()和confirm()函数的功能,它的调用格式为:
$(selector).dialog({options});
selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
7、左侧菜单工具插件——menu
菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下:
$(selector).menu({options});
selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。
8、微调按钮插件——spinner ,改变文本框内值触发效果
微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:
$(selector).spinner({options});
selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。
9、工具提示插件——tooltip,显示点击时提示框效果与移开时效果
工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:
$(selector).tooltip({options});
其中selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
来源:慕课网
- jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)
- Jquery UI tabs(选项卡)插件和accordion(折叠菜单)插件的示例
- jQuery UI draggable+droppable+resizable+selectable+sortable
- jQuery UI draggable+droppable+resizable+selectable+sortable
- jQuery UI draggable+droppable+resizable+selectable+sortable
- 【jQuery】面板折叠插件——accordion
- Jquery Accordion 折叠面板
- jquery-accordion-dialog-tabs
- 【JQuery UI】面板折叠插件——accordion
- JQuery Tabs 选项卡插件
- jquery ui(二)draggable,droppable
- 【jQuery】放置插件——droppable
- 【JQuery UI】放置插件——droppable
- [JQ权威指南]折叠面板插件accordion
- jQuery Tabs插件 (选项卡插件) --推荐
- jQuery UI 实例 - 放置(Droppable)
- Jquery的拖放 draggable&droppable
- jquery ui draggable,droppable 应用
- JVM调优总结 -Xms -Xmx -Xmn -Xss
- android 标签页<include /> 的使用
- wu wen tao推荐博客
- 2015 Multi-University Training Contest 3
- 你想成为50W年薪的优秀产品经理吗?
- jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)
- Python长字符串的打印
- II7下Framework2.0转为Framework4.0 部署后找不到aspx文件的错误
- eclipse上传到dfs的文件内容为空
- GridView实现列显示或隐藏
- poj2184 负容量01背包
- svn提交前验证、限制注释等
- POJ 1182 食物链
- 利用DMA进行数据传输的例子