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 constsvar DEFAULT_INDICATOR_PADDING = 0; //emvar DEFAULT_WIDTH = 120; //pxvar DEFAULT_HEIGHT = 4; //rows//"validation" before setting defaultsif(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 controlvar selection_offset = 0.5 * (options.height_px - options.line_height_px);//offset depending on the selected item at startvar 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 requiredheight_px: options.line_height_px * DEFAULT_HEIGHT, //px not requiredwidth_px: DEFAULT_WIDTH, //px not requiredarray_texts: options.array_values, // not requiredselected_value_if_value_null: options.array_values[0], // not requiredshow_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"});//这里构造htmlvar str_html = "<div id='"+draggableDivId+"' class='roller_selector_roller' " +"style='position:absolute;text-align:center;width: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 othervar 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;width:100%;'>" +"<div style='margin-left:auto;margin-right:auto;width:"+ (max_value_str_length + DEFAULT_INDICATOR_PADDING * 2) + "em;" +"position:relative;height:"+options.line_height_px+"px;max-width:"+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;width:" + 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 uijquery_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 gottenvalue_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 gottenvalue_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 objectif (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 dataelement.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, //pxvalue_has_changed_callback: $scope.onRollerSelector2Change,initial_value_can_be_null: false,height_px: 200, //pxwidth_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);

JavaScript 仿ios滑动选择器相关推荐

Android仿IOS滑动关机-自定义view系列（6）
Android仿IOS滑动关机-自定义view系列功能简介 GIf演示主要实现步骤-具体内容看github项目里的代码 Android技术生活交流更多其他页面-自定义View-实用功能合集:点击 ...
android仿苹果滑动,Android 仿Ios 滑动返回上一目录
IMG_0026.JPGSwipeBackLayout是一个在Android平台上实现了Activity滑动返回的库. 实现了左,右,上,下四种手势返回的功能,在ios里滑动返回是系统自带可以配置的功 ...
android仿ios滑动解锁,Android自定义绘制：Shader - 模仿iOS滑动解锁
拖动进度条的时候,文字上有一坨类似光照的东西,闪闪的飘过去,类似 iOS 系统的 "滑动来解锁", 通过这篇文章介绍的 Shader ,可以很轻松的实现这种效果- 一.Shade ...
android 高仿ios时间选择器,仿ios时间选择
再mui得picker的基础上修改为类似ios选择时间的插件. muipicker exapmple地址把里面数据换成下面的数据就可以了. (function($, doc) { $.init(); ...
[纪录]仿IOS滚轮效果(竖直滑动选择器)
今天想做一个类似这样的一个效果,可是UI的模板是参考IOS做的,于是就各种百度各种搜,最后让我找到了一个仿IOS滚轮的一个Demo,稍微研究了一下,发上来,大家一起学习,以后也方便我查看,就不用再去百 ...
Android仿ios二级菜单侧滑,仿IOS的列表项滑动菜单——ListItemMenu
一个简单的仿IOS的列表项滑动菜单(也不知道怎么描述比较好). 顺手做出来的小东西,就分享给大家了. 仿iOS列表项滑动菜单: 1.滑动出现菜单,越界阻尼效果: 2.删除列表项效果. GitHub地址 ...
android 仿照ios 图片选择,GitHub - wildma/PictureSelector: Android 图片选择器（仿 IOS 图片选择控件）...
PictureSelector Android 图片选择器(仿 IOS 图片选择控件) 效果图功能特点支持通过拍照获取图片支持通过相册获取图片支持图片是否裁剪两种场景支持仿 IOS 底部弹出 ...
uni-app、H5+ 仿IOS 实现安卓手势拖拽右滑关闭当前页面并返回上级页面 + 阴影效果（侧滑返回）
背景在我们日常开发中,经常会效仿某些流行APP渲染动画效果,用来满足自己开发或公司开发的日常需要,学习一下新的东西还是好的,本案例是仿IOS 手势拖拽右滑关闭当前页面并返回主页的一个案例预览效 ...
android rebound平移,Android 仿 IOS 拖拽回弹之进阶 ReboundFrameLayout
Android 仿 IOS 拖拽回弹之进阶 ReboundFrameLayout 前言 IOS 拖拽回弹给用户的体验不得不赞然后 Android 原生的 API 各种不支持, 于是乎出现的很多仿 IO ...

JavaScript 仿ios滑动选择器

JavaScript 仿ios滑动选择器相关推荐

最新文章

热门文章