JavaScript 仿ios滑动选择器

从git上找了一个，不过不是我想要的，更改了许多。到了我想要的效果：

roller_selector_0_9.js
首先上js:

"use strict";

/*
 * Author: Atte Virtanen
 * Initial version: 22.6.2014
 * 
 * Description:
 * An eyePhone/eyeOS like "Roller"/"Spinner" javascript selection control
 * 
 * License:
 * MIT License
 * 
 * Version:
 * 0.9
 * 
 */


/***
 * Method:  "RollerSelector": Creates a roller selector object for the div, which id is given as a param.
 * 
 * Args:
 * "div_element_id":    the element inside which the roller goes
 * "options" object with the following properties:
 *
 * array_values:    values in the list (all values must be unique)
 * selected_value:  selected value
 * line_height_px:  the options.height_px of an item in the list in pixels
 * value_has_changed_callback:  a function, which is called when the selection has changed, gets as an argument the selected value
 * 
 * the following params are not required:
 * 
 * initial_value_can_be_null:   the options.selected_value at the beginning can be null (must be changed by user, to get a value)
 * oheight_px and options.width_px: integers in pixels (not required -> see beginning of function)
 * array_texts: if the values don't want to be shown but texts instead of them
 * show_square_brackets_on_selection:   [ ] characters show the selection (no css needed)
 *
 * Example:
 * 
 * var options = 
 *  {
 *      array_values: ["id of apple","id of orange","id of kiwi","id of pineapple"], 
 *      selected_value: null, 
 *      line_height_px: 35, //px 
 *      value_has_changed_callback: on_roller_selector_2_change, // a function (selected value comes as arg)
 *      initial_value_can_be_null: true, // not required
 *      height_px: 125, //px not required
 *      width_px: 100, //px not required
 *      array_texts: ["apple","orange","kiwi","pineapple"], // not required
 *      selected_value_if_value_null: "id of orange", // not required
 *      show_square_brackets_on_selection: false // not required
 *  }
 *
 * Returns:
 * the roller selector object (which has val() and val(selected_value) methods)
 */
function RollerSelector(div_element_id, options)
{
    //Global consts
    var DEFAULT_INDICATOR_PADDING = 0; //em
    var DEFAULT_WIDTH = 120; //px
    var DEFAULT_HEIGHT = 4; //rows


    //"validation" before setting defaults
    if(options.array_values.length < 1)
        throw "At least one value must be given in the values array (options.array_values)";

    setDefaults();

    if(options.array_texts.length != options.array_values.length)
        throw "The amount of values (options.array_values) and texts (options.array_texts) is different";

    var value_has_changed = false;
    var offY = 0;

    var draggableDivId = div_element_id + "_draggable";
    var index_of_sel_val = options.array_values.indexOf(options.selected_value);

    //simply if value is null then the first value is selected (although the callback has not been called and therefore a selection has not been made)
    if(index_of_sel_val == -1 && options.initial_value_can_be_null === true && options.selected_value === null)
        index_of_sel_val = 0;

    if(index_of_sel_val == -1)
        throw "Selected value ("+options.selected_value+") is not contained in the options.array_values. If you want the initial value to be null, then set initial_value_can_be_null = true and selected_value_if_value_null = value shown as selected in the beginning (val() still returns null).";

    //set the selection in the middle of the control
    var selection_offset = 0.5 * (options.height_px - options.line_height_px);
    //offset depending on the selected item at start
    var offset_at_start = selection_offset - index_of_sel_val * options.line_height_px;
    var len_array_values = options.array_values.length;
    //the height (px) of all items together (for stopping)
    var values_height = options.line_height_px * (len_array_values - 1);
    var jquery_obj = $("#" + div_element_id);

    render();
    initializeDragEvents();

    /***
     * Private methods:
     */

    function setDefaults()
    {
        var default_options = 
        {
            /* required:
              array_values: [], 
            selected_value: null, 
            line_height_px: 35, //px 
            value_has_changed_callback: on_roller_selector_2_change, // a function (selected value comes as arg)
            */
            initial_value_can_be_null: false, // not required
            height_px: options.line_height_px * DEFAULT_HEIGHT, //px not required
            width_px: DEFAULT_WIDTH, //px not required
            array_texts: options.array_values, // not required
            selected_value_if_value_null: options.array_values[0], // not required
            show_square_brackets_on_selection: true // not required
        };

        options = $.extend(default_options, options || {});

    }

    function render()
    {
        jquery_obj.css(
            {
                "height":'' + options.height_px + 'px',
                "width":'' + options.width_px + 'px',
                "position":"relative",
                "overflow":"hidden",
                "white-space": "nowrap",
                "webkit-touch-callout": "none",
                "-webkit-user-select": "none",
                "-khtml-user-select": "none",
                "-moz-user-select": "none",
                "-ms-user-select": "none",
                "user-select": "none", 
                "cursor":"ns-resize"
            }
        );

    //这里构造html
        var str_html = "<div id='"+draggableDivId+"' class='roller_selector_roller' " +
                "style='position:absolute;text-align:center;100%;top:"+
             offset_at_start+"px;line-height:"+options.line_height_px+"px;'>";

        //循环数组里面的选项
        for(var i in options.array_texts){
            //选中的那个特殊处理
            if(index_of_sel_val==i){
                str_html+="<div id='#"+i+"div' "+"style='border-bottom: 1px solid #DDDDDD;border-top: 1px solid #DDDDDD;height:"+options.line_height_px+"px;'"+"line-height:"+ options.line_height_px+"px;'"+"margin-bottom: 5px;'>";
                str_html += "<span id='#"+i+"' style='color:#4A444E ;font-size: 30px'>" + options.array_texts[i] + "</span>"+(i < (len_array_values - 1) ? "<br />" : "");
                str_html+="</div>";
            }else{
                str_html+="<div id='#"+i+"div'"+"style='height:"+(options.line_height_px-10)+"px;line-height:"+(options.line_height_px-10)+"px;margin-bottom:5px;'>";
                str_html += "<span id=#"+i+" style='font-size: 20px;color: #B0AEAF'>" + options.array_texts[i] + "</span>"+(i < (len_array_values - 1) ? "<br />" : "");
                str_html+="</div>";
            }
        }


        str_html += "</div>";
        // 
        if(options.show_square_brackets_on_selection)
        {
            //get maximum width of item text for setting the square_brackets distance 
            //from each other
            var max_value_str_length = 0;
            for(var i in options.array_texts)
            {
                var str_length = options.array_texts[i].toString().length;
                if(str_length > max_value_str_length)
                    max_value_str_length = str_length;
            }

            str_html += "<div style='position:absolute;top:"+selection_offset+"px;line-height:"+options.line_height_px+"px;text-align:center;100%;'>" +
                        "<div style='margin-left:auto;margin-right:auto;"+ (max_value_str_length + DEFAULT_INDICATOR_PADDING * 2) + "em;" +
                            "position:relative;height:"+options.line_height_px+"px;max-"+options.width_px+"px'>" +
                                    "<div style='position:absolute;left:0px;top:0px;'>[</div>" +
                                "<div style='position:absolute;right:0px;top:0px;'>]</div>" +
                                "</div>" +
                            "</div>";
        }

        str_html += "<div class='roller_selector_glass' style='position:absolute;left:0px;top:0px;" + options.width_px + "px;height:" + options.height_px + "px;'>" +
                    "</div>";

        jquery_obj.html(str_html);  
    }

    function initializeDragEvents()
    {
        //take away the default movement of the draggable feature of jquery ui
        jquery_obj.draggable(
            {
                drag: function(event, ui) {
                    ui.position.top = 0;
                    ui.position.left = 0;
                  }
            });
        // 滑动开始的时候调用
        jquery_obj.on("dragstart", 
            function (e)
            {
                var div = $('#' + draggableDivId)[0];
                offY = e.clientY-parseInt(div.offsetTop);
            }
        );
        //滑动的时候调用
        jquery_obj.on("drag", 
                function (e)
                {
                    var div = $('#' + draggableDivId)[0];
                    var pos = e.clientY - offY;
                    if(pos > selection_offset)
                        pos = selection_offset;
                    else if(pos < selection_offset - values_height)
                        pos = selection_offset - values_height;
                    div.style.top = '' + pos + 'px';
                } 
            );
        // 滑动结束的时候调用  返回一个滑动的结果
        jquery_obj.on("dragstop", 
            function (e)
            {

                var div = $('#' + draggableDivId)[0];
                offY = parseInt(div.offsetTop) - 0.5 * options.line_height_px;
                var diff = offY - selection_offset;
                offY = offY - (diff % options.line_height_px);
                div.style.top = offY + 'px';
                var selected_value_index = Math.round(-(offY - selection_offset) / options.line_height_px);
                var selected_value1 = options.array_values[selected_value_index];   
                for(var i in options.array_values){
                    var sapn_select=document.getElementById("#"+i+"");
                    var div_select=document.getElementById("#"+i+"div");
                    if(selected_value_index==i){

                    $(sapn_select).css("color","#4A444E");
                    $(sapn_select).css("font-size","30px");
                        $(div_select).css("border-bottom","1px solid #DDDDDD");
                        $(div_select).css("border-top","1px solid #DDDDDD");
                    }else{
                        $(sapn_select).css("color","#B0AEAF");
                        $(sapn_select).css("font-size","20px");
                        $(div_select).css("border-bottom","none");
                        $(div_select).css("border-top","none");

                    }


        }

                value_has_changed = true;
                //这里我把返回的结果改成了 数组中的第几个元素options.value_has_changed_callback(selected_value_index);
            });
    }


    /***
     * Public methods:
     */

    /***
     * Method: sets (if an argument is given) the selected value of the RollerSelector object 
     *         gets (if no argument is given) the selected value
     * 
     * Note: Setting the value using this method does not call the options.value_has_changed_callback-method
     * 
     * Args:
     * options.selected_value: the value, which is selected (if not given returns the selected value)
     * 
     * Returns:
     * the selected value (if no argument is given)
     */
    this.val = function(selected_value1)
    {
        if(typeof selected_value1 != 'undefined')
        {
            var index = options.array_values.indexOf(selected_value1);
            var div = $('#' + draggableDivId)[0];
            var pos = selection_offset - index * options.line_height_px;
            div.style.top = pos + 'px'; 

            //well this depends on the usage whether the programmatically changed value
            //actually changes the value gotten
            value_has_changed = true;
        }
        else
        {
            if(!value_has_changed && options.selected_value == null)
                return null;

            var div = $('#' + draggableDivId)[0];
            var pos = parseInt(div.offsetTop) - 0.5 * options.line_height_px;
            var diff = pos - selection_offset;
            pos = pos - (diff % options.line_height_px);
            var selected_value_index = Math.round(-(pos - selection_offset) / options.line_height_px);
            var selected_value1 = options.array_values[selected_value_index];
            return selected_value1;
        }
    };
    this.selectid=function(selected_value1){
        if(typeof selected_value1 != 'undefined')
        {
            var index = options.array_values.indexOf(selected_value1);
            var div = $('#' + draggableDivId)[0];
            var pos = selection_offset - index * options.line_height_px;
            div.style.top = pos + 'px';

            //well this depends on the usage whether the programmatically changed value
            //actually changes the value gotten
            value_has_changed = true;
        }
        else
        {
            if(!value_has_changed && options.selected_value == null)
                return null;

            var div = $('#' + draggableDivId)[0];
            var pos = parseInt(div.offsetTop) - 0.5 * options.line_height_px;
            var diff = pos - selection_offset;
            pos = pos - (diff % options.line_height_px);
            var selected_value_index = Math.round(-(pos - selection_offset) / options.line_height_px);
            //var selected_value1 = options.array_values[selected_value_index];
            return selected_value_index;
        }

    }
}

/***
 * Add RollerSelector to the jquery object (for people who like the jquery syntax)
 */

/***
 * Method:  "rollerSelector": Creates a roller selector inside the "jQuery selected" element (should be div and ONLY ONE ELEMENT AT A TIME)
 * 
 * Args:
 *
 * "options" object with the following properties:
 *
 * array_values:    values in the list (all values must be unique)
 * selected_value:  selected value
 * line_height_px:  the options.height_px of an item in the list in pixels
 * value_has_changed_callback:  a function, which is called when the selection has changed, gets as an argument the selected value
 * 
 * the following params are not required:
 * 
 * initial_value_can_be_null:   the options.selected_value at the beginning can be null (must be changed by user, to get a value)
 * oheight_px and options.width_px: integers in pixels (not required -> see beginning of function)
 * array_texts: if the values don't want to be shown but texts instead of them
 * show_square_brackets_on_selection:   [ ] characters show the selection (no css needed)
 *
 * Example:
 * 
 * var options = 
 *  {
 *      array_values: ["id of apple","id of orange","id of kiwi","id of pineapple"], 
 *      selected_value: null, 
 *      line_height_px: 35, //px 
 *      value_has_changed_callback: on_roller_selector_2_change, // a function (selected value comes as arg)
 *      initial_value_can_be_null: true, // not required
 *      height_px: 125, //px not required
 *      width_px: 100, //px not required
 *      array_texts: ["apple","orange","kiwi","pineapple"], // not required
 *      selected_value_if_value_null: "id of orange", // not required
 *      show_square_brackets_on_selection: false // not required
 *  }
 *
 * 
 * Returns:
 * the roller selector object (which has val() and val(selected_value) methods)
 */
$.fn.rollerSelector = function rollerSelector(options)
{
    var J_QUERY_DATA_KEY = 'rollerSelector';

    if(this.length != 1)
        throw "rollerSelector can only be applied to a single element at a time. Select only one element at a time to apply the rollerSelector!";

    var element = this;
    //if is created already, return created object
    if (element.data(J_QUERY_DATA_KEY)) 
        return element.data(J_QUERY_DATA_KEY);

    var elem_id = element.attr('id');
    var rs = new RollerSelector(elem_id, options);
    //set jQuery element data
        element.data(J_QUERY_DATA_KEY, rs);
    return rs;
};

当然还有其他的js,比如jquery,jquerytouch.
使用：

很简单：

<div id="roller_selector_2"  >

然后：

//当变化的时候回调
$scope.onRollerSelector2Change=function onRollerSelector2Change(new_value)
      {
         //not very optimally done on every change:
//       $('.a_styled_roller_selector > .roller_selector_glass').css('background-image', 'url(roller_static_top.png)');

//       $("#roller_selector_value_2").html(new_value);
//       $('#roller_selector_2').rollerSelector().val($scope.PayItemList[new_value]);
//       $scope.SelectPayItem=$scope.PayItemList[new_value];
         $scope.SelectPayItem=$scope.PayItemList[new_value];
         $scope.$apply();
//       alert(new_value);

      };
//设置选择器选中的值
      $scope.setRollerSelector2Value=function setRollerSelector2Value(new_value)
      {
         //not very optimally done on every change:
//       $('.a_styled_roller_selector > .roller_selector_glass').css('background-image', 'url(roller_static_top.png)');

         //note, this does not call back on onRollerSelector2Change
         $('#roller_selector_2').rollerSelector().val(new_value);
      };

然后

//设置了一个滑动选择器的配置
$scope.options_2 ={
   array_values: [],
   selected_value: '西单',
   line_height_px: 50, //px
   value_has_changed_callback: $scope.onRollerSelector2Change,
   initial_value_can_be_null: false,
   height_px: 200, //px
   width_px: 300, //px
   // array_texts: ["北京智能水表","北京智能电表","北京智能书店","北京智能水水你"],
   selected_value_if_value_null: "",
   show_square_brackets_on_selection: false
};

//设置默认选中值
$scope.options_2.selected_value=$scope.PayItemList[0].paymentItemName;
$scope.options_2.selected_value_if_value_null=$scope.PayItemList[0].paymentItemName;
//循环动态数据，放到滑动选择器中
for (var i=0;i<$scope.PayItemList.length;i++){
   var a=$scope.PayItemList[i].paymentItemName;
      $scope.options_2.array_values.push($scope.PayItemList[i].paymentItemName);
}
//给div设置滑动选择器
$("#roller_selector_2").rollerSelector($scope.options_2);