语言: 英文中文

Smart Select

Smart Select 可以自动帮你把原生的select变成一个由 分组单选按钮 构成的动态页面。在很多iOs native应用中你可以看到这种特性。

Smart Select 布局

Smart Select 布局非常简单,只需要在 列表 中插入 <select>,并且给 item-link 加上 "smart-select" class即可。

<div class="list-block">
  <ul>
    <!-- Smart select item -->
    <li>
      <!-- Additional "smart-select" class -->
      <a href="#" class="item-link smart-select">
        <!-- select -->
        <select name="fruits">
          <option value="apple" selected>Apple</option>
          <option value="pineapple">Pineapple</option>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <!-- Select label -->
            <div class="item-title">Fruit</div>
            <!-- Selected value, not required -->
            <div class="item-after">Apple</div>
          </div>
        </div>
      </a>
    </li>
    <!-- Another smart selects or list view elements -->
    ...
  </ul>
</div>

注意,smart select 只有在 初始化 之后的View中才可用。

带有搜索栏的Smart Select

Smart select 可以结合 搜索栏 使用。如果你希望所有的 Smart Select 都带有搜索栏,你可以在初始化 的时候传入一个 smartSelectSearchbar: true 参数。

也可以通过 "data-" 属性来启用搜索栏:

<div class="list-block">
  <ul>
    <!-- Smart select item -->
    <li>
      <a href="#" class="item-link smart-select" data-searchbar="true" data-searchbar-placeholder="Search fruits">
        ... same Smart select Fruits structure as in previous example ...
      </a>
    </li>
    <li>
      <a href="#" class="item-link smart-select" data-searchbar="true" data-searchbar-placeholder="Search cars">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
  </ul>
</div>

其中

  • data-searchbar - 对当前的Smart Select启用搜索栏(或者可以通过全局的 smartSelectSearchbar 参数来启用
  • data-searchbar-placeholder - 搜索栏输入框的占位符,可选。默认是 "Search"
  • data-searchbar-cancel - 取消按钮的文案,可选。 默认是 "cancel"

自定义页面的title和返回按钮的文案

默认情况下,Smart Select 页面的标题总是和被点击条目的 "item-title" 文案一直,返回按钮的文案总是和 "smartSelectBackText" 中设置的文案一直。

有时候你需要自定义文案,可以通过在 Smart Select 链接上使用 "data-page-title" 和 "data-back-text" 来设置

<div class="list-block">
  <ul>
    <!-- Smart select item -->
    <li>
      <a href="#" class="item-link smart-select" data-page-title="Awesome Fruits" data-back-text="Go back">
        ... same Smart select Fruits structure as in previous example ...
      </a>
    </li>
    <li>
      <a href="#" class="item-link smart-select" data-page-title="Super Cars" data-back-text="Go back">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
  </ul>
</div>

在弹层中打开

Smart select 可以在弹层中打开,而不是新页面。如果你希望所有的Smart select 都在弹层中打开,那么你可以在 App 初始化 的时候设置smartSelectOpenIn: 'popup'参数。

另外,他也可以通过 "data-open-in" 属性来配置:

<div class="list-block">
  <ul>
    <li>
      <!-- Smart select, will be opened in Popup -->
      <a href="#" class="item-link smart-select" data-open-in="popup">
        ... same Smart select Fruits structure as in previous example ...
      </a>
    </li>
    <li>
      <!-- Smart select, will be opened in Popup with custom "Close" text -->
      <a href="#" class="item-link smart-select" data-open-in="popup" data-popup-close-text="Close Cars">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
  </ul>
</div>

Note, if you set all Smart select as popups using App smartSelectOpenIn:'popup', you may still open it as page using data-open-in="page" attribute

Open in Picker

It is possible to open Smart select as picker modal, not as page. If you want to open all Smart selects in picker modal you may just enable it by passing smartSelectOpenIn:'picker' parameter on App initialization.

Otherwise it can be configured via data-open-in attribute:

<div class="list-block">
  <ul>
    <li>
      <!-- Smart select, will be opened in Picker -->
      <a href="#" class="item-link smart-select" data-open-in="picker">
        ... same Smart select Fruits structure as in previous example ...
      </a>
    </li>
    <li>
      <!-- Smart select, will be opened in Picker with custom close text -->
      <a href="#" class="item-link smart-select" data-open-in="picker" data-picker-close-text="Close Cars">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
    <li>
      <!-- Smart select, will be opened in Picker with custom height -->
      <a href="#" class="item-link smart-select" data-open-in="picker" data-picker-height="400px">
        ... same Smart select Cars structure as in previous example ...
      </a>
    </li>
  </ul>
</div>

You can specify custom Smart select picker height using data-picker-height attribute

If you set all Smart select as picker modal using App smartSelectOpenIn:'picker', you may still open it as page using data-open-in="page" attribute

Custom icons, colors and images

You can also specify Smart Select page' list view element custom icon, image or color. We need to use additional data-option-icon, data-option-image attributes on smart select <select> (to set default image for all options) or on <option> to set image or icon on single option.

For single option we may also use data-option-color and data-option-class attributes to add specific option color or css class for additional styling

<a href="#" class="item-link smart-select">
  <select name="fruits">
    <option value="apple" selected data-option-image="http://lorempixel.com/29/29/">Apple</option>
    <option value="pineapple" data-option-image="http://lorempixel.com/29/29/?2">Pineapple</option>
    <option value="pear" data-option-color="orange" data-option-image="http://lorempixel.com/29/29/?3">Pear</option>
    ...
  </select>
  <div class="item-content">
    <div class="item-inner">
      <div class="item-title">Fruit</div>
    </div>
  </div>
</a>

多选和分组

<div class="list-block">
  <ul>
    <li><a href="#" class="item-link smart-select">
        <!-- "multiple" attribute for multiple select-->
        <select name="car" multiple>
          <!-- options grouped within "optgroup" tag-->
          <optgroup label="Japanese">
            <option value="honda" selected>Honda</option>
            <option value="lexus">Lexus</option>
            <option value="mazda">Mazda</option>
            <option value="nissan">Nissan</option>
            <option value="toyota">Toyota</option>
          </optgroup>
          <optgroup label="German">
            <option value="audi" selected>Audi</option>
            <option value="bmw">BMW</option>
            <option value="mercedes">Mercedes</option>
            <option value="vw">Volkswagen</option>
            <option value="volvo">Volvo</option>
          </optgroup>
          <optgroup label="American">
            <option value="cadillac">Cadillac</option>
            <option value="chrysler">Chrysler</option>
            <option value="dodge">Dodge</option>
            <option value="ford" selected>Ford</option>
          </optgroup>
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Car</div>
          </div>
        </div></a></li>
  </ul>
</div>          

We can also use multiple select and group options using <optgroup>. So if we add "multiple" attribute to our select then radio buttons on smart select page will be automatically converted to checkboxes:

Multiple Select and maxlength

With multiple select we can also use maxlength attribute to limit number of possible selected items:

<div class="list-block">
  <ul>
    <li><a href="#" class="item-link smart-select">
        <!-- "maxlength" attribute to limit number of possible selected items -->
        <!-- we won't allow to select more than 3 items -->
        <select name="car" multiple maxlength="3">
          <optgroup label="Japanese">
            <option value="honda" selected>Honda</option>
            <option value="lexus">Lexus</option>
            <option value="mazda">Mazda</option>
            <option value="nissan">Nissan</option>
            <option value="toyota">Toyota</option>
          </optgroup>
          <optgroup label="German">
            <option value="audi">Audi</option>
            <option value="bmw">BMW</option>
            <option value="mercedes">Mercedes</option>
            <option value="vw">Volkswagen</option>
            <option value="volvo">Volvo</option>
          </optgroup>
          <optgroup label="American">
            <option value="cadillac">Cadillac</option>
            <option value="chrysler">Chrysler</option>
            <option value="dodge">Dodge</option>
            <option value="ford">Ford</option>
          </optgroup>
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Car</div>
          </div>
        </div></a></li>
  </ul>
</div>

Close Smart Select On User Select

It is possible to close Smart Select page automatically after user selects any option. We need to add special data-back-on-select attribute to make it work:

<div class="list-block">
  <ul>
    <!-- data-back-on-select="true" to close page automatically -->
    <li><a href="#" class="item-link smart-select" data-back-on-select="true">
        <select name="car" multiple>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Car</div>
          </div>
        </div></a></li>
  </ul>
</div> 

你可以在 初始化 的时候设置 smartSelectBackOnSelect 来使所有的Smart Select 都能点击之后自动关闭。

Smart Select 结合 虚拟列表

如果你的 smart select 有大量的数据(成百上千),你可以对其启用虚拟列表。这种情况下,我们只需要添加在smart select 上 data-virtual-list 属性即可:

<div class="list-block">
    <ul>
        <li>
            <!-- data-virtual-list="true" attribute to enable virtual list  -->
            <a href="#" class="item-link smart-select" data-virtual-list="true">
                <select name="numbers">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    ...
                    <option value="100000">100000</option>
                </select>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Numbers</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

如果你需要指定虚拟列表中条目的高度,你可以直接添加一个 data-virtual-list-height 属性:

<div class="list-block">
    <ul>
        <li>
            <!-- data-virtual-list-height="55" attribute to set virtual list single item height to 55px -->
            <a href="#" class="item-link smart-select" data-virtual-list="true" data-virtual-list-height="55">
                <select name="numbers">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    ...
                    <option value="100000">100000</option>
                </select>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Numbers</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

Smart Select 颜色主题

You can also specify form and navbar color themes on smart select page or in smart select popup using data-form-theme and data-navbar-theme attributes:

你可以通过 data-form-themedata-navbar-theme 属性来设置 smart select 页面或者弹层中表单和导航栏的主题。

<div class="list-block">
    <ul>
        <li>
            <!-- data-navbar-theme="red" to set red color theme for navbar -->
            <!-- data-form-theme="green" to set green color theme for form -->
            <a href="#" class="item-link smart-select" data-navbar-theme="red" data-form-theme="green">
                <select name="car">
                    ...
                </select>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title">Car</div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

Set Smart Select Value By Option Text

It is possible to set smart select (and its select) value depending on selected option value. For this case we need to add additional "smart-select-value" class to "item-after":

<div class="list-block">
  <ul>
    <li>
      <a href="#" class="item-link smart-select">
        <!-- select -->
        <select name="fruits">
          <option value="apple">Apple</option>
          <option value="pineapple">Pineapple</option>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title">Fruit</div>
            <!-- Additional "smart-select-value" class to set selected option depending on this text value -->
            <div class="item-after smart-select-value">Apple</div>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div> 

After that <option> with "Apple" text value will be set as selected.

通过 JavaScript 打开 smart select

也可以通过 JavaScript 来打开 smart select。我们需要使用这些相关的App方法:

myApp.smartSelectOpen(smartSelect) - 打开指定的 smart select

  • smartSelect - HTMLElement or string (with CSS Selector) of required ".smart-select". Required.

Add Options Dynamically

It is possible to add Smart Select options later dynamically, if it is even already opened. We need to use appropriate App method:

myApp.smartSelectAddOption(select, optionHTML, index) - add option to select at specified index

  • select - HTMLElement or string (with CSS Selector) of Smart Select's <select> or <optgroup>. Required.
  • optionHTML - string with HTML of option to add. Required.
  • index - number index number for new option. If not specified, then option will be added to the end

For example:

// Append option
myApp.smartSelectAddOption('.smart-select select', '<option value="apple">Apple</option>');
 
// Add new option as first selected option
myApp.smartSelectAddOption('.smart-select select', '<option value="apple" selected>Apple</option>', 0);
 
// Append new option to second <optgroup>
myApp.smartSelectAddOption($$('.smart-select select optigroup').eq(1), '<option value="apple">Apple</option>', 0);