Picker选择器 - SUI 移动开发UI库

返回介绍

Picker选择器

发布于 2017-06-13 字数3942 浏览 1479 评论 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> 工具栏的模板,可以自己定义。
value input元素的value属性。
多列默认值用空格隔开,如<input value="钱 明 小姐">。如果任一列默认值本身含空格(如‘ipad mini 2’),那就只能用JS方法调用模式传入value参数
为 picker 添加默认值,数组里每一项对应每一列默认值,如["钱", "明", "小姐"]
rotateEffect false 是否启用3D效果,启用3D可能会影响性能
toolbar true 是否显示工具栏
inputReadOnly true 是否会在input上添加一个 readonly 属性
cssClass undefined 为 picker 容器增加额外的类,可以用来自定义样式
onOpen undefined 自定义 picker 打开时的触发动作
onClose undefined 自定义 picker 关闭时的触发动作
formatValue undefined 自定义方法,用来控制如何显示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 一个字符串数组,其中每个字符串对应每一列 设置值

发布评论

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

目前还没有任何评论,快来抢沙发吧!