码迷,mamicode.com
首页 > 其他好文 > 详细

jq UI型插件

时间:2017-02-28 19:48:45      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:span   UI   int   function   移动   delay   event   down   height   

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"
                    }
                });
            });

 

jq UI型插件

标签:span   UI   int   function   移动   delay   event   down   height   

原文地址:http://www.cnblogs.com/summerXll/p/6480292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!