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-theme 和 data-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);