返回介绍

Picker选择器

发布于 2017-06-13 13:18:48 字数 3453 浏览 2258 评论 0 收藏 0

picker是一个JS实现的类似select的组件,他可以代替原生的select组件,并且功能更加强大、样式更加统一,picker 需要初始化才能使用,你可以在一个 input 元素上初始化picker,当用户点击input的时候会弹出picker的弹层

<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>

关闭 Picker

在任何元素上加上一个 .close-picker 类,点击它就会关闭 Picker,你也可以通过调用 $(".picker").picker("close") 或者 $.closeModal(".picker-modal.modal-in") 来关闭。

Picker参数

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

$("#picker-name").picker({
  toolbarTemplate: '<header class="bar bar-nav">\
  <button class="button button-link pull-right close-picker">确定</button>\
  <h1 class="title">请选择称呼</h1>\
  </header>',
  cols: [
    {
      textAlign: 'center',
      values: ['赵', '钱', '孙', '李', '周', '吴', '郑', '王']
      //如果你希望显示文案和实际值不同,可以在这里加一个displayValues: [.....]
    },
    {
      textAlign: 'center',
      values: ['杰伦', '磊', '明', '小鹏', '燕姿', '菲菲', 'Baby']
    },
    {
      textAlign: 'center',
      values: ['先生', '小姐']
    }
  ]
});

所有可用参数如下:

参数名默认值说明
toolbarTemplate<header class="bar bar-nav"> <button class="button button-link pull-right close-picker">确定</button> <h1 class="title"></h1> </header>工具栏的模板,可以自己定义。
valueinput元素的value属性。
多列默认值用空格隔开,如<input value="钱 明 小姐">。如果任一列默认值本身含空格(如‘ipad mini 2’),那就只能用JS方法调用模式传入value参数
为 picker 添加默认值,数组里每一项对应每一列默认值,如["钱", "明", "小姐"]
rotateEffectfalse是否启用3D效果,启用3D可能会影响性能
toolbartrue是否显示工具栏
inputReadOnlytrue是否会在input上添加一个 readonly 属性
cssClassundefined为 picker 容器增加额外的类,可以用来自定义样式
onOpenundefined自定义 picker 打开时的触发动作
onCloseundefined自定义 picker 关闭时的触发动作
formatValueundefined自定义方法,用来控制如何显示picker的选中值,formatValue: function (picker, value, displayValue){},value, displayValue为数组,长度等于cols长度

Picker方法

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

$("#picker-name").picker("open");
$("#picker-name").picker("close");
$("#picker-name").picker("setValue", ["2012", "12", "12"]);

所有可用方法如下:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。