[b]新版本更新:鼠标上下拖动选择内容:http://hiuman.iteye.com/blog/2353563[/b]
(如有错敬请指点,以下是我工作中遇到并且解决的问题)
一开始搜这个内容的时候,搜索结果基本都是不沾边的。
很多都是日历选择器,最接近的就是这两种。
一对比之下,自然是选右侧的,简洁大方,美观。
(图1是17素材里面找到的,图2好像是博客园)
然而,看了一眼它引入的js,就找到它的官网,搜mobiscroll即可。这个网站里面有很多很好的例子,有各式各样的选择。
恕我愚昧,我不会将这个插件和我的网页结合在一起,我就放弃了。(倒腾了一天T.T)
= = = = = = = = = = = = = = = = 代 码 = = = = = = = = = = = = = = = =
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
还找到过jqueryMobile的swipe,看到效果还可以,以为可以上下拖动/滑动的,百度+倒腾了好久才发现不可以,心塞塞的。
还有什么jqueryUI的Draggable,这仅仅是拖动啊喂。等等等等....反正转了很多弯掉进很多坑。
后来想着搜拖动和拖拽不行,那就搜日历选择器吧。然后就有各式各样出名网站的日历选择器的插件……
想着去加的群里问问,结果问到的结果是:很简单啊,js做就好了。.....不就一个轮播吗。....
想到轮播的拖拉就搜了Swiper,这个也是不错的插件。我没试这个插件,不知道能不能上下拖动的。
( 什么gui,依旧帮不上忙)然后跑去问后台的大神,他说:这个打不了,那是andri原生的控件效果,网页模仿起来超难的,你让你们的大神想办法吧,这个像模仿手机那种滑动选择东西的控件很难弄的。
快要放弃了的时候,我打算去找日历选择器的共同点,就是都是叫datepicker。(无奈脸)
然后就干脆搜picker了。发现了framework7,(看了它的样式,一脸找到宝藏的幸福脸),然后看着看着发现了MSUI(SUI),它是基于framework7写的,就跑进去看了。
因为framework7要写ios,android两种才可以。(两个效果差不多)
= = = = = = = = = = = = = = 看 这 里 = = = = = = = = = = = = = =
SUI是淘宝团队开发的。效果还不错。就用这个了。效果图:
(引入的文件略,一共五个,不知道怎么写的可以看它网站的 [ 开始使用 ] )
代码比较简单:
<input type="text" id='picker'/>
<script>
$("#picker").picker({
toolbarTemplate: '<header class="bar bar-nav">\
<button class="button button-link pull-left">按钮</button>\
<button class="button button-link pull-right close-picker">确定</button>\
<h1 class="title">标题</h1>\
</header>',
cols: [
{
textAlign: 'center',
values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
}
]
});
</script>
最后:
还找到了类似效果的,比如MUI的picker,Dcloud的。这个跟SUI他们的差不多的。
- 大小: 47.5 KB
- 大小: 4.5 KB
- 大小: 5.6 KB
- 大小: 9.4 KB
分享到:
相关推荐
对应的picker问题修复后的文件
daterangepicker是一个好用的时间范围选择插件,基于jquery,本内容是daterangepicker的中文示例
selectpicker下拉框插件
swift 语言 选项卡时间picker、uipicker、webview、imageview
ImagePicker
<title>Picker by ustbhuangyi , initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <h1 class="project-name">Picker <h2 class="project-tagline">h5 picker inspired by ios ...
使用vue开发移动端横向滚动的picker组件,不依赖任何框架和库,使用原生JS编写,组件代码约300行,代码难度一般。
微信小程序picker组件,省市二级联动及其修改时进行回显,此文件只提供参考,希望给需要的朋友带来帮助。
city-picker 城市选择插件
可以修改选中的字体的颜色、内容等,也可以修改选中的两条线的颜色,具体样式可以看这里:http://blog.csdn.net/the_path/article/details/38334899
实现可以多选的Picker效果。用户可以在Picker中选择多个选项。 注意:请在Mac下解压使用
自定义numberpicker,可以自己照着改样式
jQuery Date Range Picker
bootstrap 时间插件daterangepicker 4.0+ 添加清除按钮,input获取焦点不默认当前时间,失去焦点和关闭控件不设置默认时间。轻度改版源码。
uni-app picker选择器
picker-view时间选择器/年、月、日,闰年、天数、大月、小月 自定义picker-view年月日选择器 picker选择器picker-view选择器(案例)
微信小程序 - 自定义picker 封装成插件 可以自定义多级数据picker 最多四级 最少一级 自定义二级数据联动 自定义三级数据联动 自定义四级数据联动 封装成插件 全局使用
jquery ui datetime picker jquery ui datetime picker
Android的一个NumberPicker demo。风格简约, 用以拾取可包含两位小数的数字,可用于app的金钱输入等。
vue-picker 一个基于vue2.0的picker组件