jquery之UI型插件

在网上学习了UI型插件,自己做个备忘录备用

更多的插件也可以在官网上面去学习 https://jqueryui.com/

draggable拖拽插件

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

            });
 </script>



droppable放置插件

<script type="text/javascript">
        
            $(function () {
        		var intSum=0;
            	$(".drag").draggable();
                $(".cart").droppable({
                    drop: function () {
                    	console.log("========进入到drop函数里面");
                            intSum++;
                            $(this).addClass('focus').find("#tip").html('');
                            $('.title span').html("("+intSum+")");
                    }
                })
            });
  </script>



sortable拖拽排序插件

<script type="text/javascript">
            $(function () {
                $("ul").sortable({
                    $("ul").sortable({
                        delay:2,//防止与点击事件冲突,延时2秒
                        opacity:0.35,//以透明度0.35随意拖动
                    })
                })
            });
</script>



accordion面板折叠插件

需要注意的是折叠的是标题后面的一个布局,所以折叠部分内容较多可以用div包裹起来

    <script type="text/javascript">
            $(function () {
                $("#accordion").accordion();
            });
        </script>



tabs 选项卡插件

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容

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



dialog对话框插件

还是用其他第三方的好,样式方面别人调好了

<script type="text/javascript">
            $(function () {
                $("#btnDelete").bind("click", function () { //询问按钮事件
                    if ($("#spnName").html() != null) { //如果对象不为空
                        sys_Confirm("您真的要删除该条记录吗?");
                        return false;
                    }
                });
            });
            function sys_Confirm(content) { //弹出询问信息窗口
                $("#dialog-modal").dialog({
                    height: 140,
                    modal: true,
                    title: '系统提示',
                    hide: 'slide',
                    buttons: {
                        '确定': function () {
                            $("#spnName").remove();
                            $(this).dialog("close");
                        },
                        '取消': function () {
                            $(this).dialog("close");
                        }
                    },
                    open: function (event, ui) {
                        $(this).html("");
                        $(this).append("<p>" + content + "</p>");
                    }
                });
            }
 </script>



menu菜单工具插件

 <script type="text/javascript">
            $(function () {
                $("#menu").menu();
            });
</script>



spinner微调按钮插件

<script type="text/javascript">
            $(function () {
                //定义变量
                var intR = 0, intG = 0, intB = 0, strColor;
                $("input").spinner({
                    //初始化插件
                    max: 10,
                    min: 0,
                    //设置微调按钮递增/递减事件
                    spin: function (event, ui) {
                        if (ui.value == 8)
                            spnPrev.style.backgroundColor = "red";
                        else
                            spnPrev.style.backgroundColor = "green";
                    },
                    //设置微调按钮值改变事件
                    change: function (event, ui) {
                        var intTmp = $(this).spinner("value");
                        if (intTmp < 0) $(this).spinner("value", 0);
                        if (intTmp > 10) $(this).spinner("value", 10);
                        if (intTmp == 8)
                            spnPrev.style.backgroundColor = "red";
                        else
                            spnPrev.style.backgroundColor = "green";
                    }
                });
            });
</script>



tooltip工具提示插件
<script type="text/javascript">
            $(function () {
                $("#name").tooltip({
                    show: {
                        effect: "slideDown",
                        delay: 350
                    },
                    hide: {
                        effect: "explode",
                        delay: 350
                    },
                    position: {
                        my: "left top",
                        at: "left bottom"
                    }
                });
            });
 </script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值