jquery之UI型插件

来源：互联网发布：muse软件怎么玩编辑：程序博客网时间：2024/06/05 00:56

在网上学习了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>

阅读全文

1 0