下拉框 / Select

优质

小牛编辑

134浏览

2023-12-01

各种大小的下拉框

<div class="row">
  <div class="field-label">mini</div>
  <div class="select-size" data-skin="mini"></div>
</div>

<div class="row">
  <div class="field-label">tiny</div>
  <div class="select-size" data-skin="tiny"></div>
</div>

<div class="row">
  <div class="field-label">small</div>
  <div class="select-size" data-skin="small"></div>
</div>

<div class="row">
  <div class="field-label">large</div>
  <div class="select-size" data-skin="large"></div>
</div>

<div class="row">
  <div class="field-label">big</div>
  <div class="select-size" data-skin="big"></div>
</div>

<div class="row">
  <div class="field-label">huge</div>
  <div class="select-size" data-skin="huge"></div>
</div>

<div class="row">
  <div class="field-label">massive</div>
  <div class="select-size" data-skin="massive"></div>
</div>

require(['moye/Select'], function (Select) {

  var datasource = [
    {value: 0, name: '不限'},
    {value: 1, name: '中关村、上地'},
    {value: 2, name: '公主坟商圈'},
    {value: 3, name: '劲松潘家园'},
    {value: 4, name: '亚运村'},
    {value: 5, name: '北京南站商圈超长'}
  ];

  $('.select-size').each(function () {

    new Select({
      main: this,
      datasource: datasource,
      skin: [this.getAttribute('data-skin')]
    }).render();

  });

});

鼠标hover触发展开

<div>筛选：<div id="hover" class="ui-select"></div></div>

require(['moye/Select'], function (Select) {

  new Select({
    main: document.getElementById('hover'),
    mode: 'over',
    datasource: [
      {value: 0, name: '不限'},
      {value: 1, name: '中关村、上地'},
      {value: 2, name: '公主坟商圈'},
      {value: 3, name: '劲松潘家园'},
      {value: 4, name: '亚运村'},
      {value: 5, name: '北京南站商圈超长'}
    ]
  }).render();

});