简单的滑动条

今天要做个滑动条

如图:

用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏做全栈攻城狮

程序员带你学习安卓开发系列-Android文件存储

输入帐号密码,并勾选记住帐号 ,点击登录时,保存帐号信息。下次登陆可以直接显示上次保存的QQ帐号。

1392
来自专栏上善若水

013 mysql 忘记密码,修改密码

启动:sudo service mysql start 停止:sudo service mysql stop

1045
来自专栏技术博文

sublime Text3

sublime Text3实用功能和常用快捷键 PS:ST3在Mac OX与Windows不同平台下的快捷键差别很大。下面是针对windows平台的解说。 1....

30611
来自专栏数据小魔方

Excel常用数据导入方法

今天给大家讲解Excel数据源的导入 ▽ excel支持的数据源类型有很多 今天只讲解常用的三种类型 Access文件、网页数据、文本数据 Access数据源导...

3037
来自专栏小狼的世界

如何生成eot字体

前一段时间听闻Google退出ubuntu字体的时候,使用了一下,从而了解到 font-face 的用法:

1212
来自专栏码生

swift floatWindow 自定义 iphone小圆点 浮动窗口 第三方库 pod

KKFloatWindow create a float window, to do some extra things

1232
来自专栏web

vue-router基本使用

1502
来自专栏Golang语言社区

如何使用golang实现操作键盘按键

https://godoc.org/github.com/nsf/termbox-go 这个库可以支持 简单示例: package main import...

4875
来自专栏代码GG之家

Scoops android app多主题架构(四)

使用Scoops ? 1:MainApp ? 使用addDayNightFlavor将一个主题设置为DayNight模式 2:在对应的主题里面配置上文本...

2106
来自专栏赵俊的Java专栏

Hexo优化 --- 添加复制功能

7821

扫码关注云+社区

领取腾讯云代金券