juqeryUI:(拖拽，滑动条，日期实例):(九)-CSDN博客

本文链接：https://blog.csdn.net/SenZendao/article/details/82708545

本文介绍了 jQueryUI 的基本使用，包括拖拽、滑动条和日期选择器等组件的实现方式，展示了如何利用 jQueryUI 构建交互丰富的 Web 应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jqueryUI也是一个库，就有很多属性和方法，简单写几个常用的吧。

目录二十

jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

jqueryUI 网址
http://jqueryui.com/
http://www.jqueryui.org.cn/

jqueryUI拖拽

<head>
    <meta charset="UTF-8">
    <title>04_jqueryui.html</title>
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.box').draggable({
                // 约束元素在父级内拖动
                containment:'parent',
                //限制在x轴向拖动
                axis:'x',
                //拖动是透明度变为0.6
                opacity:0.6,
                drag:function(ev,ui){
                    //console.log('ev='+ev);
                    console.log(ui.position);
                }
            });
        })
    </script>
    <style type="text/css">
        .con{
            width:300px;
            height:300px;
            border:1px solid #000;
            margin:50px auto 0;
        }
        .box{
            width:40px;
            height:40px;
            background-color:gold;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box"></div>
    </div>
</body>

jquery滑动条

<head>
    <meta charset="UTF-8">
    <title>05_jqueryui滑动条.html</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.dragbar').draggable({
                axis:'x',

                containment:'parent',
                //containment:[0,0,600,0]
                opacity:0.6,

                drag:function(ev,ui){
                    //console.log(ui.position.left);                    
                    var nowleft = ui.position.left;
                    $('.progress').css({width:nowleft});
                    $('.slide_count').val(parseInt(nowleft*100/570));
                }

            });
        })
    </script>
    <style type="text/css">
        .slidebar_con{
            width:650px;
            height:32px;
            margin:50px auto 0;
        }

        .slidebar{
            width:600px;
            height:30px;
            border:1px solid #ccc;          
            float:left;
            position:relative;
        }

        .slidebar .dragbar{
            width:30px;
            height:30px;
            background-color:gold;
            cursor:pointer;
            position:absolute;
            left:0;
            top:0;
        }

        .slidebar .progress{
            width:0px;
            height:30px;
            background-color:#f0f0f0;
            position:absolute;
            left:0;
            top:0;
        }

        .slide_count{
            padding:0;
            float:right;
            width:40px;
            height:30px;
            border:1px solid #ccc;
            text-align:center;
            font-size:16px;
        }

    </style>
</head>
<body>
    <div class="slidebar_con">
        <div class="slidebar">
            <div class="progress"></div>
            <div class="dragbar"></div>
        </div>
        <input type="text" name="" value="0" class="slide_count">
    </div>
</body>

jquery日期

<head>
    <meta charset="UTF-8">
    <title>06_jqueryui日期.html</title>
    <script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui.js"></script>
    <link rel="stylesheet" href="./css/jquery-ui.css">
    <script type="text/javascript">
        $(function(){
            $( "#datepicker" ).datepicker();
            $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd");
        })
    </script>
</head>
<body>
    <div>
        <p>日期：<input type="text" id="datepicker" readonly="readonly"></p>
    </div>
</body>