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;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 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;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 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);JavaScript 仿ios滑动选择器的更多相关文章
- vue 2 仿IOS 滚轮选择器 从入门到精通 （一）
大家好,由于最近从事的是微信公众号和APP内嵌 H5开发,避免不了开发一些和native相同的操作功能,就如接下来说的 仿IOS滚轮选择器. 先来个截图: 接下来具体介绍如何实现的.能力有限避免不了错 ...
- android中列表的滑动删除仿ios滑动删除
大家是不是觉得ios列表的滑动删除效果很酷炫?不用羡慕android也可以实现相同的效果 并且可以自定义效果,比如左滑删除,置顶,收藏,分享等等 其实就是自定义listview重写listview方法 ...
- Android-PickerView【仿iOS的PickerView控件，并封装了时间选择和选项选择这两种选择器】使用
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本文主要演示Android-PickerView的选项选择器.时间选择器的简单运用.由于每一个版本略有不用,所以实际使用方式以git ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- Android 高级UI设计笔记06：仿微信图片选择器（转载）
仿微信图片选择器: 一.项目整体分析: 1. Android加载图片的3个目标: (1)尽可能的去避免内存溢出. a. 根据图片的显示大小去压缩图片 b. 使用缓存对我们图片进行管理(LruCache ...
- Android仿IOS回弹效果 ScrollView回弹 总结
Android仿IOS回弹效果 ScrollView回弹 总结 应项目中的需求 须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些 发现总 ...
- 在uwp仿IOS的页面切换效果
有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...
- 微信小程序组件解读和分析：十四、slider滑动选择器
slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...
- 自己定义控件：onDraw 方法实现仿 iOS 的开关效果
概述 本文主要解说怎样在 Android 下实现高仿 iOS 的开关按钮,并不是是在 Android 自带的 ToggleButton 上改动,而是使用 API 提供的 onDraw.onMeasur ...
随机推荐
- selenium学习备忘
在做web项目的自动化端到端测试时主要使用的是Selenium WebDriver来驱动浏览器.Selenium WebDriver的优点是支持的语言多,支持的浏览器多.主流的浏览器Chrome.Fi ...
- 关于BaseServlet
BaseServlet 是项目中所有servlet的父类,作用是为了让一个servlet可以同时处理多个请求,因为我们之前比如说完成对于商品的增删改查的时候,每一个需求就要创建一个servlet,这样 ...
- 实现vmare虚拟机系统随主机开机自动启动
服务器主机上的虚拟机每次开机要手动启动是很麻烦的事,so,在网上找到一方法让虚拟机随主机开机自动运行:挺方便的,记录下来: 1.操作环境 主机:windows 2003 虚拟机:centos6 2.下 ...
- 笨办法学Python（二十二）
习题 22: 到现在你学到了哪些东西? 这节以及下一节的习题中不会有任何代码,所以也不会有习题答案或者加分习题.其实这节习题可以说是一个巨型的加分习题.我将让你完成一个表格,让你回顾你到现在学到的所有 ...
- 二叉索引树，LA2191，LA5902，LA4329
利用了二进制,二分的思想的一个很巧妙的数据结构,一个lowbit(x):二进制表示下的最右边的一个1开始对应的数值. 那么如果一个节点的为x左孩子,父亲节点就是 x + lowbit(x),如果是右孩 ...
- vuejs非父子组件传值
当父组件要给孙子,或者孙子与孙子要传值的时候怎么传,一层一层传太麻烦了,vuejs提供了一中模式叫发布订阅模式(观察者模式,bus,总线)来处理非父子组件间的传值 <div id='root'& ...
- CentOS下用rinetd做端口转发
windows下的端口转发一般用的是自带的nat和porttunnel.portmap linux下端口转发映射的程序叫rinetd,启动方法rinetd -c /etc/rinetd.conf , ...
- jquery控制display属性为none或block
代码如下: //隐藏 $("#id").css('display','none'); //显示 $("#id").css('display','block'); ...
- PRmakefile文件
Ubuntu下的makefile: # /******************************************************************************* ...
- HTTP 之缓存
这是一篇知识性的文档,主要目的是为了让Web缓存相关概念更容易被开发者理解并应用于实际的应用环境中.为了简要起见,某些实现方面的细节被简化或省略了.如果你更关心细节实现则完全不必耐心看完本文,后面参考 ...