jq UI型插件

Posted 2020-09-02 懒人猫

1.拖曳插件——draggable

http://www.runoob.com/jqueryui/example-draggable.html

     $(function () {
                $(‘#x‘).draggable({
                    axis:"x"
                })
                $("#y").draggable({
                    axis:"y"
                })
               
            });

2.放置插件——droppable

var intSum=0;
            $(function () {
                $(".drag").draggable();
                $(".cart").droppable({
                    drop: function () {
                            intSum++;
                            $(this).addClass("focus")
                            $(".cart").html("")
                            $(‘.cart‘).html(intSum)
                    }
                })
            });

3.拖曳排序插件——sortable

 $(function () {
                $("ul").sortable({
                    delay:2,
                    opacity:0.5
                })
            });

4.面板折叠插件——accordion

 $(function () {
                $("#accordion").accordion()
            });

5.选项卡插件——tabs

 $(function () {
               $("#tabs").tabs ({
                    //设置各选项卡在切换时的动画效果
                    fx: { opacity: "toggle", height: "toggle" },
                    event: "mousemove" //通过移动鼠标事件切换选项卡
                })
            });

6.对话框插件——dialog

7.菜单工具插件——menu

 $(function () {
                $(‘#menu‘).menu()
            });

8.微调按钮插件——spinner

9.工具提示插件——tooltip

$(function () {
                $(‘#name‘).tooltip({
                    show: {
                        effect: "slideDown",
                        delay: 350
                    },
                    hide: {
                        effect: "explode",
                        delay: 350
                    },
                    position: {
                        my: "left top",
                        at: "left bottom"
                    }
                });
            });