新版本更新:鼠标上下拖动选择内容:http://hiuman.iteye.com/blog/2353563
(如有错敬请指点,以下是我工作中遇到并且解决的问题)
一开始搜这个内容的时候,搜索结果基本都是不沾边的。
很多都是日历选择器,最接近的就是这两种。
一对比之下,自然是选右侧的,简洁大方,美观。
(图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他们的差不多的。