jQuery UI 实例

来源：互联网发布：网络谣言研究报告编辑：程序博客网时间：2024/06/07 16:27

1）说明
实现滑动滑块选择数值
2）示例代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>滑块实现</title>    <meta name="description" content="滑块实现">    <meta name="keywords" content="滑块实现">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />    <link rel="stylesheet" href="weui.min.css">    <style>        div {            display: block;        }        .riskBlock_list_content{            -webkit-flex: 1;            -ms-flex: 1;            border-left: 1px dashed #f96549;        }        .weui-slider-box{            display: flex;            -webkit-box-align: center;            align-items: center;        }        .weui-slider {            padding: 15px 18px;            user-select: none;            margin-top: 23px;        }        .weui-slider-box .weui-slider {            -webkit-box-flex: 1;            flex: 1;        }        .weui-slider {            user-select: none;        }        .weui-slider__inner {            position: relative;            border: 1px solid #27bdeb;            height: 4px;            border-radius: 4px;            background-color: #fff;        }        .weui-slider__track {            opacity: 0;        }        weui.min.css:5        .weui-slider__track {            height: 2px;            background-color: #1aad19;        }        .weui-slider__handler {            position: absolute;            width: 1px;            top: 0;            border-radius: 0px;            border: none;            box-shadow: none;            margin-left: -5px;            margin-top: 0;            background-color: transparent;        }        .handler {            background: url(img/slide_bg.png) no-repeat;            background-size: 29px 42px;            -webkit-background-size: 29px 42px;            width: 29px;            height: 42px;            top: -33px;            left: -10px;            position: absolute;            color: #27bdeb;            font-weight: bold;            font-size: 12px;            text-align: center;        }    </style></head><body>    <div class="riskBlock__list__content">        <div class="riskBlock__list__content__slider">            <div class="weui-slider-box" id="slider1">                <div class="weui-slider">                    <div id="sliderInner" class="weui-slider__inner">                        <div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>                        <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler">                            <div class="handler">50</div>                        </div>                    </div>                </div>            </div>        </div>    </div>    <script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>    <script src="js/jquery-weui.min.js"></script>    <script type="text/javascript">        $(function () {            $('#slider1').slider(function (per) {                $('#sliderValue').text(per+'kg');                $('#slider1 .handler').text(per)            });        })    </script></body></html>

3）效果如下图
这里写图片描述
参考文档说明：http://www.runoob.com/jqueryui/example-slider.html
文件下载链接：http://jqweui.com/download

阅读全文

0 0