picker（拖拽上下拉动的选项）

[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他们的差不多的。