移动端滑动选择器 demo

一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. [English documents] 特性原生js移动端选择控件,不依赖任何库可传入普通数组或者json数组可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选

移动端滚动选择器mobileSelect.js

一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. 特性原生js移动端选择控件,不依赖任何库可传入普通数组或者json数组可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选择自动识别是否级联选择成功后,提供自定义回调函数callback() 返回当前选择索引位置.以及选择的数据(数组/json) 每次手势滑动结束后,也提供一个回调函数transitionEnd() 返回当前选择索引位

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

微信小程序组件解读和分析：十四、slider滑动选择器

slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <view class="section section_gap"> <text class="section__title">设置left/r

[Android]竖直滑动选择器WheelView的实现

以下内容为原创,转载请注明: 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3819304.html 公司项目中有这么一个需求,所以需要自己实现下.效果类似android4.0以上原生的DatePicker这种. 这个WheelView控件我已经放在github上了,大家有兴趣可以看看,地址:https://github.com/wangjiegulu/WheelView,欢迎Star或者Fork哦!(建库的时候忘了选ignore了--,所以有些

web移动端滑动插件

1.slip只有6.3k可以说是非常小了,主要是通过css3里面的transform来改变的位置,控制的是父容器,使用也非常简单,具体信息移步slip.js.一个简单的demo如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0

jquery选择器demo

大部分选择器都是基于下面这个简单的页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div,span,p{ width: 140px; height: 140px; margin: 5px; background: #aaa; borde

jQuery选择器之基本过滤选择器Demo

测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

RE：通过移动端滑动手势实现数据加载

背景: 基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看了诸多例子和对于移动端手势知识点梳理的技术博客才做到了对功能的实现.并且也在这个过程中初步了解到了移动端框架Zepto.js._(:з」∠)_ 当然,最后还是选择了尽量用原生来实现这一功能.因为这样才能够对整个功能实现原理理解上更充分些,想尽量少依赖于插件.不过到了数据加载上,因为时间成本等原因最后

移动端滑动删除 swipeDelete

功能比较简单常见,最近整理一下做备份记录.先看看线上整体实际效果下面是swipeDelete 用法 demo 默认参数 var defaults = { distance:80, //滑动距离 units:'px', //默认单位 touchStart:function(){},//触摸开始回调 opened:function(){},//展开后回调 closed:function(){},//关闭后回调 duration:100,//毫秒 deleteBtn:'.swipe-delete-

原生js移动端滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个

纯js实现移动端滑动控件，以上下滑动自取中间位置年龄为例；

<!-- 需求:上下滑动,在一个大的div块里显示5个小的值,滑动过程中自动获取中间位置的值需要注意的是: 1 touchmove会多次被触发: 2 获取中间位置的值可以通过定位得top值来获取 3 以1到99为例,上下滑动时一定注意若取中间值,首尾一定需要切值滑动到中间位置: 当页面显示为 93 94 95 96 97时,在向上滑动时 ,假设在滑动divHeight*5的距离, 这样最后页面显示将只存在98 99 ,取中间值时将为空: 同样显示为 3,4,5,6,7时,在向下滑动滑动时 ,假

js---PC端滑动进度条

这个是PC端的滑动进度条效果: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .progress{position: relative; width:300px;margin:100px a

微信小程序滑动选择器

实现微信小程序滑动选择效果在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange绑定的函数用.detail.value就可以访问到.第一个选择的index值为0,依次递增.range要在page的data中先定义一个数组给它赋值,然后数组的值就会变为选择器中的选项 <picker bindchange="bindPickerChange" value="

js移动端滑动效果

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个

Flexible实现H5移动端适配小demo

前言看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘flexible的解决方案,实现了个简单的demo. 一句话总结 flexible动态获取设备宽度和dpr,为html元素添加两个属性:data-fontsize(设备宽度/10),data-dpr(安卓均为1,ios不同设备为2或3),同时设置meta标签的scale(1/dpr).你只需要为需要适配的元素设置

ssl客户端与服务端通信的demo

服务端程序流程 #include <stdio.h> #include <stdlib.h> #include <errno.h> #include <string.h> #include <sys/types.h> #include <netinet/in.h> #include <sys/socket.h> #include <sys/wait.h> #include <unistd.h> #i

使用Flexible适配移动端html页面 - demo记录

前段时间看了大神的博客文章[使用Flexible实现手淘H5页面的终端适配](地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html),受益良多,写了个小demo,记录一下以防忘记,需要注意几点,如下: 1. 将flexible_css.js,flexible.js文件加载到项目中 <script src="build/flexible_css.debug.js"></script>

js IndexedDB：浏览器端数据库的demo实例

IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中,数据以“键值对”的形式保存,每一个数据都有对应的键名,键名是独一无二的,不能有重复,否则会抛出一个错误. (2)异步. IndexedDB操作时不会锁死浏览器,用户依然可以进行其他操作,这与localStorage形成对比,后者的操作是同步的.异步设计是为了防止大量数据的读写,拖慢网页的表现. (3

h5移动端滑动的细节

1.获取手指滑动的长度: var hasTouch = 'ontouchstart' in window && !isTouchPad, _start:function(e){ var point = hasTouch ? e.touches[0] : e; startY = point.pageY; } _move:function(e){ var point = hasTouch ? e.touches[0] : e; //offsetY就是手指滑动的垂直距离 offsetY = po

移动端滑动选择器 demo

热门专题