JQuery UI入门

最新推荐文章于 2022-05-02 06:27:21 发布

泠泠在路上

最新推荐文章于 2022-05-02 06:27:21 发布

阅读量423

点赞数

分类专栏： Jquery 文章标签： jquery ui jquery ui

本文链接：https://blog.csdn.net/u012396955/article/details/54835733

版权

Jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JQuery UI入门

draggable:拖拽
droppable:放置

例：index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery UI</title>
        <style>
        .block{width: 100px;height: 100px;background: #008000;border: 1px solid #008000;}
        .drop{width: 100px;height: 100px;background:red;border: 1px dashed black;opacity: 0.5;}
        .droppable-active{border: 1px solid yellow;}
        .droppable-hover{background-color: yellow;}
        </style>
    </head>
    <body>
        <div class="block"></div>
        <div class="drop"></div>
    </body>
    <script type="text/javascript" src="../jquery/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="../jquery/jquery-ui.js" ></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.block').draggable({helper:'clone',opacity:0.5});
            $('.drop').droppable({
            accept:'.block',
            activeClass:'droppable-active',
            hoverClass:'droppable-hover',
            drop:function(ev,ui){
            $(this).append('<br>Dropped!')
                }
            });

        });

    </script>
</html>

效果图：
这里写图片描述
sortable:排序

按照y轴进行排序：

$('.sort').sortable({axis:"y"});

selectable:选择

$('.sort').selectable();

resizable:改变大小

$('.block').resizable();

accordion折叠菜单

$('#accordion').accordion({collapsible:true,active:0,header:'h3'});

dialog: 对话框

$('.dialog').dialog();

slider:滑动条

$('.slider').slider({step:10});
$('.slider').on("sliderchange",function(event,ui){
//event content
});

tablesorter：表格排序
需引进更多包，可查看相关文档。

泠泠在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery UI入门

JQuery UI入门draggable:拖拽 droppable:放置例：index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JQuery UI</title> <style> .block{width: 100px;height: 10
复制链接

扫一扫