picker

picker是一个JS实现的类似select的组件,他可以代替原生的select组件,并且功能更加强大、样式更加统一。

picker 需要初始化才能使用,你可以在一个 input 元素上初始化picker,当用户点击input的时候会弹出picker的弹层

{% highlight html %} {% endhighlight %}

关闭picker

在任何元素上加上一个 .close-picker 类,点击它就会关闭 picker。

你也可以通过调用 $(".picker").picker("close") 或者 $.closeModal(".picker-modal.modal-in") 来关闭。

picker参数

你可以通过设置 toolbarTemplate 参数来自定义工具栏模板。在 cols 参数中可以传入多列值。

{% highlight js %} $("#picker-name").picker({ toolbarTemplate: '
\ \

请选择称呼

\
', cols: [ { textAlign: 'center', values: ['赵', '钱', '孙', '李', '周', '吴', '郑', '王'] //如果你希望显示文案和实际值不同,可以在这里加一个displayValues: [.....] }, { textAlign: 'center', values: ['杰伦', '磊', '明', '小鹏', '燕姿', '菲菲', 'Baby'] }, { textAlign: 'center', values: ['先生', '小姐'] } ] }); {% endhighlight %}

所有可用参数如下:

参数名 默认值 说明
toolbarTemplate <header class="bar bar-nav"> <button class="button button-link pull-right close-picker">确定</button> <h1 class="title"></h1> </header> 工具栏的模板,可以自己定义。
rotateEffect false 是否启用3D效果,启用3D可能会影响性能
toolbar true 是否显示工具栏
inputReadOnly true 是否会在input上添加一个 readonly 属性
cssClass undefined 为 picker 容器增加额外的类,可以用来自定义样式

picker方法

你可以通过 $(".picker").picker("method", args1, args2...) 的方式来调用相关的方法。

{% highlight js %} $("#picker-name").picker("open"); $("#picker-name").picker("close"); $("#picker-name").picker("setValue", ["2012", "12", "12"]); {% endhighlight %}

所有可用方法如下:

方法名 参数说明 方法说明
open 打开picker
close 关闭picker
setValue 一个字符串数组,其中每个字符串对应每一列 设置值

日期时间选择器

日期时间选择器是一个定制的picker,因此他的用法和picker完全一致。

datetime-picker 定制了 onChange 和 cols 参数,请不要设置这两个参数。

{% highlight html %} {% endhighlight %}

如果你只想选择日期,请使用 日历