简单的滑动条

今天要做个滑动条

如图:

用jqueryUI实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简单的滑动条插件</title>

    <link rel="stylesheet" href="js/jQueryUi/jquery-ui.min.css">

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/jQueryUi/jquery-ui.min.js"></script>

<style>

.slidebox { position: relative; padding-top: 30px; width: 300px; margin: 15px; }

.slidebox .s_span { position:absolute; top:0; font-size:12px; background:#3EB194; display:inline-block; border-radius: 2px; padding: 1px 5px; }

.slidebox .s_l { left: 5px; background: #3EB194; color: #fff; }

.slidebox .s_r { right: 5px; background: #E7EBEE; }

.slidebox .s_span:after{position: absolute;left:50%;margin-left:-4px;bottom:-2px;content:" ";display:block;transform:rotate(-45deg);

    border-top:solid 8px #fff;border-left:solid 8px #3EB194;height:0px;width:0px;z-index: -1}

.slidebox .s_r:after{border-left:solid 8px #E7EBEE;}

#slider { float: left; clear: left; width: 300px; }

#slider .ui-slider-range { background: #3EB194; }

#slider .ui-slider-handle { border-color: #3EB194;cursor:pointer; }

</style>



</head>

<body>

<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">

    <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>

    简单的滑动条插件

</p>



<div id="slidebox" class="slidebox">

    <span class="s_span s_l "></span>

    <span class="s_span s_r"></span>

    <div id="slider"></div>

    <input type="hidden" id="input_slide" name="" value="">

</div>



<script>

var o = {

    'count':100,

    'left':80,

    'right':20

};



jQuery(function($) {



    function refreshSwatch() {

        var left = $( "#slider" ).slider( "value" );

        var right = o.count-left;

        $("#slidebox .s_l").html( left );

        $("#slidebox .s_r").html( right );

        $("#input_slide").val( o.count +'_'+ left +'_'+ right );

        console.log($("#input_slide").val());

    }

    $( "#slider" ).slider({

        orientation: "horizontal",

        range: "min",

        max: o.count,

        value: o.left,

        slide: refreshSwatch,

        change: refreshSwatch

    });

    $( "#slider" ).slider( "value", o.left );

});

</script>

</body>

</html>

源代码下载地址:

链接:http://pan.baidu.com/s/1gd8fW7T 密码:gshg

你可能感兴趣的:(简单)