2018， 23歲，青春不是用來揮霍的，最好的年紀當然用來提升自己！
阿新 • • 發佈：2018-12-27
從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)
*/ 當然還有其他的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);