<article class="component" id="picker" data-url='picker'>
  <h2 class="component-title">picker</h2>

  <p class="component-description">picker是一个JS实现的类似select的组件，他可以代替原生的select组件，并且功能更加强大、样式更加统一。</p>

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

{% highlight html %}
<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>
{% endhighlight %}

  <h3>关闭picker</h3>

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

  <h3 class="component-title">picker参数</h3>

  <p class="component-description">你可以通过设置 <code>toolbarTemplate</code> 参数来自定义工具栏模板。在 <code>cols</code> 参数中可以传入多列值。</p>

{% highlight js %}
$("#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: ['先生', '小姐']
    }
  ]
});
{% endhighlight %}

  <p>所有可用参数如下：</p>

  <table>
    <tr>
      <th>参数名</th>
      <th>默认值</th>
      <th>说明</th>
    </tr>
    <tr>
      <td>toolbarTemplate</td>
      <td>
        &lt;header class="bar bar-nav"&gt;
          &lt;button class="button button-link pull-right close-picker"&gt;确定&lt;/button&gt;
          &lt;h1 class="title"&gt;&lt;/h1&gt;
        &lt;/header&gt;
      </td>
      <td>工具栏的模板，可以自己定义。</td>
    </tr>
    <tr>
      <td>value</td>
      <td>input元素的value属性。<br>多列默认值用空格隔开，如<code>&lt;input value="钱 明 小姐"&gt;</code>。如果任一列默认值本身含空格(如‘ipad mini 2’),那就只能用JS方法调用模式传入<code>value</code>参数</td>
      <td>为 picker 添加默认值，数组里每一项对应每一列默认值，如<code>["钱", "明", "小姐"]</code></td>
    </tr>
    <tr>
      <td>rotateEffect</td>
      <td>false</td>
      <td>是否启用3D效果，启用3D可能会影响性能</td>
    </tr>
    <tr>
      <td>toolbar</td>
      <td>true</td>
      <td>是否显示工具栏</td>
    </tr>
    <tr>
      <td>inputReadOnly</td>
      <td>true</td>
      <td>是否会在input上添加一个 readonly 属性</td>
    </tr>
    <tr>
      <td>cssClass</td>
      <td>undefined</td>
      <td>为 picker 容器增加额外的类，可以用来自定义样式</td>
    </tr>

  </table>

  <h3 class="component-title">picker方法</h3>

  <p class="component-description">你可以通过 <code>$(".picker").picker("method", args1, args2...)</code> 的方式来调用相关的方法。</p>

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

  <p>所有可用方法如下：</p>

  <table>
    <tr>
      <th>方法名</th>
      <th>参数说明</th>
      <th>方法说明</th>
    </tr>
    <tr>
      <td>open</td>
      <td>无</td>
      <td>打开picker</td>
    </tr>

    <tr>
      <td>close</td>
      <td>无</td>
      <td>关闭picker</td>
    </tr>
    <tr>
      <td>setValue</td>
      <td>一个字符串数组，其中每个字符串对应每一列</td>
      <td>设置值</td>
    </tr>

  </table>
</article>

<article class="component" id="datetime-picker" data-url='datetime-picker'>
  <h2 class="component-title">日期时间选择器</h2>

  <p class="component-description">日期时间选择器是一个定制的picker，因此他的用法和picker完全一致。打开picker的默认值是当前时间，可以通过<code>value</code>参数指定</p>
  <p>datetime-picker 定制了 onChange 和 cols 参数，请不要设置这两个参数。</p>

{% highlight html %}
<input type="text" id='datetime-picker'/>
<script>
  $("#datetime-picker").datetimePicker({
    value: ['1985', '12', '04', '9', '34']
  });
</script>
{% endhighlight %}

  <p>如果你只想选择日期，请使用 <a href='#calendar' data-ignore='push'>日历</a></p>
</article>

