语言: 英文中文

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 初始化 的时候设置smartSelectInPopup:true参数。

另外,他也可以通过 "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>

注意,如果你通过设置smartSelectInPopup:true使所有的 Smart select 都以弹层的方式打开,你依然可通过设置 data-open-in="page" 属性来设置以页面方式打开。

自定义图标和图片

你可以自定义Smart Select列表中的图标和图片。我们必须通过在smart select 的 <select>或者<option>上设置 "data-option-icon" 或者 "data-option-image"来实现自定义。如果是在<select>上设置的,则对所有的option都生效;如果是在<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>          

我们可以通过 <optgroup> 来使用分组,可以通过在 select 上设置 "multiple" 属性来使用多选(页面会自动换成checkbox)。

用户选择之后自动关闭

可以设置用户选择之后自动关闭页面。只需要设置 data-back-on-select 属性即可:

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

通过可选的文案来设置值

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