推广 热搜: 公司  快速  中国  上海  未来    企业  政策  教师  系统 

ios连点器软件源 ios连点器插件

   日期:2025-01-03     作者:vsctk0    caijiyuan   评论:0    移动:http://keair.bhha.com.cn/mobile/news/5070.html
核心提示:https://github.com/zhoushengmufc/iosselect/iosselect是个什么东西?移动端浏览器对于select的展示样式是不一致的,ios下是类


https://github.com/zhoushengmufc/iosselect/

iosselect是个什么东西?

移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示。

特点
0依赖,只需引用一个js和css即可
样式可自己定制,也可使用默认样式
一个页面同时实例化多个组件
jquery zepto angular vue react均适用
支持最多6级级联
支持设置高度和高度单位
适用于android和iOS设备(PC端支持IE9+,不过PC端上滑动体验不太实用)

iosselect 项目地址:

文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect

iosselect能做什么?

移动端开发中,经常遇到选择器功能,常见的时间选择,日期选择,地区选择,单列选择。iosselect完美实现一个组件实现各种选择器的功能。

可做:

一级级联,例如银行选择

二级级联,例如三国杀将领组合选

三级级联,例如省市区选择

日期选择器 三级联动,通过方法获取数据,并且有加载中效果

日期时间选择器,共五级,通过方法获取数据

iosselect的优势

点击下载文件到项目目录中,在HTML文件中插入以下代码,并按需调整路径。

options
type: object
其余选项,含以下几个属性:

options.container
default: ‘’
type: string
实例化后的对象包裹元素,可选项

options.callback
default: undefined
type: function
选择完毕后的回调函数,必选项 options.callback(selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj, selectSixObj) selectNumberObj为每级对应选中项,包含对应数据的所有字段及dom对象

options.fallback
default: undefined
type: function
选择取消后的回调函数,可选项

options.maskCallback
default: undefined
type: function

点击背景层关闭组件时触发的方法,可选项

options.title
default: ‘’
type: string
显示标题,可选项

options.sureText
default: ‘确定’
type: string
设置确定按钮文字,可选项

options.closeText
default: ‘取消’
type: string
设置取消按钮文字,可选项

options.itemHeight
default: 35
type: number
每一项的高度,可选项

options.itemShowCount
default: 7
type: number
组件展示的项数,可选项,可选3,5,7,9,不过不是3,5,7,9则展示7项

options.headerHeight
default: 44
type: number
组件标题栏高度,可选项

options.cssUnit
default: ‘px’
type: string
元素css尺寸单位,可选项,可选px或者rem

options.addClassName
default: ‘’
type: string
组件额外类名,用于自定义样式,可选项

options.relation
default: [0, 0, 0, 0, 0]
type: …Array
[oneTwoRelation, twoThreeRelation, threeFourRelation, fourFiveRelation, fiveSixRelation] 可选项。如果数据是数组(非方法),各级选项之间通过parentId关联时,需要设置;如果是通过方法获取数据,不需要该参数。

options.relation.oneTwoRelation
default: 0
type: number
第一列和第二列是否通过parentId关联,可选项

options.relation.twoThreeRelation
default: 0
type: number
第二列和第三列是否通过parentId关联,可选项

options.relation.threeFourRelation
default: 0
type: number
第三列和第四列是否通过parentId关联,可选项

options.relation.fourFiveRelation
default: 0
type: number
第四列和第五列是否通过parentId关联,可选项

options.relation.fiveSixRelation
default: 0
type: number
第五列和第六列是否通过parentId关联,可选项

options.oneLevelId
type: string
实例展示时,第一级数据默认选中值,可选项,默认为第一级数据第一项id

options.twoLevelId
type: string
实例展示时,第二级数据默认选中值,可选项,默认为第二级数据第一项id

options.threeLevelId
type: string
实例展示时,第三级数据默认选中值,可选项,默认为第三级数据第一项id

options.fourLevelId
type: string
实例展示时,第四级数据默认选中值,可选项,默认为第四级数据第一项id

options.fiveLevelId
type: string
实例展示时,第五级数据默认选中值,可选项,默认为第五级数据第一项id

options.sixLevelId
type: string
实例展示时,第6级数据默认选中值,可选项,默认为第6级数据第一项id

options.showLoading
default: false
type: boolean
实例展示时,在数据加载之前下拉菜单是否显示加载中的效果,建议ajax获取数据时设置为true

options.showAnimate
default: false
type: boolean
是否显示入场动画和退场动画,如需自定义动画效果,请覆写.fadeInUp .layer和.fadeOutDown .layer的css3动画。PS:动画时间为0.5秒。

本文地址:http://keair.bhha.com.cn/news/5070.html    康宝晨 http://keair.bhha.com.cn/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

 
 
更多>同类最新资讯
0相关评论

文章列表
相关文章
最新动态
推荐图文
最新资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备2023022329号