• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

    range-picker: 依赖于JQuery 的范围选择工具

    原作者: [db:作者] 来自: 网络 收藏 邀请

    开源软件名称:

    range-picker

    开源软件地址:

    https://gitee.com/syjefbz/range-picker

    开源软件介绍:

    #range-picker

    a range picker of JQuery plugins

    Screenshot

    date-picker

    Examples

    1. see sample folder
    2. jsfiddle

    Browser Support

    1. chrome
    2. firefox
    3. IE8+

    Requirements

    1. JQuery 1.7+

    Usage

    ###Install

    ######download

    download range-picker

    ######bower

    bower install --save range-picker

    ###Import css

    <link rel="stylesheet" href="../css/range-picker.css" type="text/css" charset="utf-8" />

    ###Import javascript

    <script src="../bower_components/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script><script src="../src/range_picker.js" type="text/javascript" charset="utf-8"></script>

    ###Call

    $("#date_picker").rangepicker();

    Options

    ####startValue

    default: none

    require: true

    the left label. eg: "2016/01/03"

    ####endValue

    default: none

    require: true

    the right label. eg: "2016/03/12"

    ####type

    type: String

    default: single

    require: false

    Choose picker type, could be single - for one cursor, or double for two cursors

    ######example

    $("#number_range").rangepicker({    type: "double",    startValue: 0,    endValue: 100,    translateSelectLabel: function(currentPosition, totalPosition) {        return parseInt(100 * (currentPosition / totalPosition));    }});

    ####translateSelectLabel

    type: Function

    default: none

    require: true

    ######parameter

    1. currentPosition cursor position
    2. totalWidth the width of process bar

    get the text for cursor

    ######example

    $("#number_range").rangepicker({    startValue: 0,    endValue: 100,    translateSelectLabel: function(currentPosition, totalPosition) {        return parseInt(100 * (currentPosition / totalPosition));    }});

    Function

    ####getSelectValue

    get selected range

    ###updatePosition

    ######parameter

    1. endPosition the right cursor position
    2. startPosition the left cursor position

    set the cursor position

    ######example

    var rangePicker = $("#number_range").rangepicker({    startValue: 0,    endValue: 100,    translateSelectLabel: function(currentPosition, totalPosition) {        return parseInt(100 * (currentPosition / totalPosition));    }});rangePicker.updatePosition("-50px", "10%");// rangePicker.updatePosition("-50px");// rangePicker.updatePosition("-50px", "50px");// rangePicker.updatePosition("90%", "10%");

    Build

    First, get a copy of the git repo by running:

    git clone https://git.oschina.net/syjefbz/range-picker.git

    Enter the directory and install the dependencies:

    cd range-picker && npm install && bower install

    Build

    grunt

    Test

    grunt test

    鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    专题导读
    热门推荐
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap