Vista de selector de estilo de iOS en Vanilla JavaScript-mobileSelect. js

Vista prévia

Descripción

mobileSelect. js es una biblioteca nativa de JavaScript que le permite crear una ventana emergente de selección en cascada para los campos de entrada de un selector de iOS.

Funcionamiento

Descargue e inserte los siguientes archivos JS & CSS en su documento HTML.

<link rel="stylesheet" href="mobileSelect.css">
<script src="mobileSelect.js"></script>

Cree un campo de entrada que abra una vista de selector deslizándose desde la parte inferior de la ventana del navegador cuando se desencadene.

<input type="text" id="trigger1" placeholder="Single Selection">

Prepare los datos para el selector. En este ejemplo, vamos a crear un selector de semana para la aplicación Web.

var weekdayArr=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

Cree un nuevo objeto MobileSelect con algunas opciones y listo.

var mobileSelect1 = new MobileSelect({


trigger: '#trigger1',


wheels: [



{data: weekdayArr}


],
});

Permitir que el selector Seleccione varios objetos de datos:

var weekdayArr=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var timeArr = ['08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00'];
var numArr=['1','2','3','4','5'];

var mobileSelect1 = new MobileSelect({


trigger: '#trigger1',


wheels: [



{data: weekdayArr},



{data: timeArr},



{data: numArr}


],
});

También admite datasets en cascada como se muestra a continuación:

var mobileSelect1 = new MobileSelect({


trigger: '#trigger1',


title: 'Selector',


cascade: true,


wheels: [{



data:[{




id:'1',




value:'Value 1',




childs:[





{id:'1',value:'Sub Value 1'},





{id:'2',value:'Sub Value 2'},





{id:'3',value:'Sub Value 3'},





{id:'4',value:'Sub Value 4'},





{id:'5',value:'Sub Value 5'}



]},





{id:'2',value:'Value 2'},





{id:'3',value:'Value 3'},





{id:'4',value:'Value 4'},





{id:'5',value:'Value 5'},





{id:'6',value:'Value 6'}



]}

],
});

Funciones de devolución de llamada.

var mobileSelect1 = new MobileSelect({



// parameters: indexArr, data


callback:function(indexArr, data){



console.log(data);


},



limit:function(indexArr, data){



console.log(data);


}

});

Métodos de la API:

// set the title
mobileSelect1.setTitle(string)

// update the picker
updateWheel(sliderIndex, data)

// re-position the picker
locatePostion(sliderIndex, posIndex)

Registro de cambios

09/22/2018

• actualizar