移动端安卓和IOS开发框架Framework7教程-Smart Select

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

Smart Select 布局

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

1. <div class="list-block">
2.   <ul>
3.     <!-- Smart select item -->
4.     <li>
5.       <!-- Additional "smart-select" class -->
6.       <a href="#" class="item-link smart-select">
7.         <!-- select -->
8.         <select name="fruits">
9.           <option value="apple" selected>Apple</option>
10.           <option value="pineapple">Pineapple</option>
11.           ...
12.         </select>
13.         <div class="item-content">
14.           <div class="item-inner">
15.             <!-- Select label -->
16.             <div class="item-title">Fruit</div>
17.             <!-- Selected value, not required -->
18.             <div class="item-after">Apple</div>
19.           </div>
20.         </div>
21.       </a>
22.     </li>
23.     <!-- Another smart selects or list view elements -->
24.     ...
25.   </ul>
26. </div>

复制

实例预览

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

带有搜索栏的Smart Select

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

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

1. <div class="list-block">
2.   <ul>
3.     <!-- Smart select item -->
4.     <li>
5.       <a href="#" class="item-link smart-select" data-searchbar="true" data-searchbar-placeholder="Search fruits">
6.         ... same Smart select Fruits structure as in previous example ...
7.       </a>
8.     </li>
9.     <li>
10.       <a href="#" class="item-link smart-select" data-searchbar="true" data-searchbar-placeholder="Search cars">
11.         ... same Smart select Cars structure as in previous example ...
12.       </a>
13.     </li>
14.   </ul>
15. </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" 来设置

1. <div class="list-block">
2.   <ul>
3.     <!-- Smart select item -->
4.     <li>
5.       <a href="#" class="item-link smart-select" data-page-title="Awesome Fruits" data-back-text="Go back">
6.         ... same Smart select Fruits structure as in previous example ...
7.       </a>
8.     </li>
9.     <li>
10.       <a href="#" class="item-link smart-select" data-page-title="Super Cars" data-back-text="Go back">
11.         ... same Smart select Cars structure as in previous example ...
12.       </a>
13.     </li>
14.   </ul>
15. </div>

复制

 实例预览

在弹层中打开

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

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

1. <div class="list-block">
2.   <ul>
3.     <li>
4.       <!-- Smart select, will be opened in Popup -->
5.       <a href="#" class="item-link smart-select" data-open-in="popup">
6.         ... same Smart select Fruits structure as in previous example ...
7.       </a>
8.     </li>
9.     <li>
10.       <!-- Smart select, will be opened in Popup with custom "Close" text -->
11.       <a href="#" class="item-link smart-select" data-open-in="popup" data-popup-close-text="Close Cars">
12.         ... same Smart select Cars structure as in previous example ...
13.       </a>
14.     </li>
15.   </ul>
16. </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

1. <a href="#" class="item-link smart-select">
2.   <select name="fruits">
3.     <option value="apple" selected data-option-image="http://lorempixel.com/29/29/">Apple</option>
4.     <option value="pineapple" data-option-image="http://lorempixel.com/29/29/?2">Pineapple</option>
5.     <option value="pear" data-option-color="orange" data-option-image="http://lorempixel.com/29/29/?3">Pear</option>
6.     ...
7.   </select>
8.   <div class="item-content">
9.     <div class="item-inner">
10.       <div class="item-title">Fruit</div>
11.     </div>
12.   </div>
13. </a>

复制

 实例预览

多选和分组

1. <div class="list-block">
2.   <ul>
3.     <li><a href="#" class="item-link smart-select">
4.         <!-- "multiple" attribute for multiple select-->
5.         <select name="car" multiple>
6.           <!-- options grouped within "optgroup" tag-->
7.           <optgroup label="Japanese">
8.             <option value="honda" selected>Honda</option>
9.             <option value="lexus">Lexus</option>
10.             <option value="mazda">Mazda</option>
11.             <option value="nissan">Nissan</option>
12.             <option value="toyota">Toyota</option>
13.           </optgroup>
14.           <optgroup label="German">
15.             <option value="audi" selected>Audi</option>
16.             <option value="bmw">BMW</option>
17.             <option value="mercedes">Mercedes</option>
18.             <option value="vw">Volkswagen</option>
19.             <option value="volvo">Volvo</option>
20.           </optgroup>
21.           <optgroup label="American">
22.             <option value="cadillac">Cadillac</option>
23.             <option value="chrysler">Chrysler</option>
24.             <option value="dodge">Dodge</option>
25.             <option value="ford" selected>Ford</option>
26.           </optgroup>
27.         </select>
28.         <div class="item-content">
29.           <div class="item-inner">
30.             <div class="item-title">Car</div>
31.           </div>
32.         </div></a></li>
33.   </ul>
34. </div>

复制

 实例预览

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

用户选择之后自动关闭

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

1. <div class="list-block">
2.   <ul>
3.     <!-- data-back-on-select="true" to close page automatically -->
4.     <li><a href="#" class="item-link smart-select" data-back-on-select="true">
5.         <select name="car" multiple>
6.           ...
7.         </select>
8.         <div class="item-content">
9.           <div class="item-inner">
10.             <div class="item-title">Car</div>
11.           </div>
12.         </div></a></li>
13.   </ul>
14. </div>

复制

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

Smart Select 结合 虚拟列表

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

1. <div class="list-block">
2.     <ul>
3.         <li>
4.             <!-- data-virtual-list="true" attribute to enable virtual list  -->
5.             <a href="#" class="item-link smart-select" data-virtual-list="true">
6.                 <select name="numbers">
7.                     <option value="1">1</option>
8.                     <option value="2">2</option>
9.                     ...
10.                     <option value="100000">100000</option>
11.                 </select>
12.                 <div class="item-content">
13.                     <div class="item-inner">
14.                         <div class="item-title">Numbers</div>
15.                     </div>
16.                 </div>
17.             </a>
18.         </li>
19.     </ul>
20. </div>

复制

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

1. <div class="list-block">
2.     <ul>
3.         <li>
4.             <!-- data-virtual-list-height="55" attribute to set virtual list single item height to 55px -->
5.             <a href="#" class="item-link smart-select" data-virtual-list="true" data-virtual-list-height="55">
6.                 <select name="numbers">
7.                     <option value="1">1</option>
8.                     <option value="2">2</option>
9.                     ...
10.                     <option value="100000">100000</option>
11.                 </select>
12.                 <div class="item-content">
13.                     <div class="item-inner">
14.                         <div class="item-title">Numbers</div>
15.                     </div>
16.                 </div>
17.             </a>
18.         </li>
19.     </ul>
20. </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 页面或者弹层中表单和导航栏的主题。

1. <div class="list-block">
2.     <ul>
3.         <li>
4.             <!-- data-navbar-theme="red" to set red color theme for navbar -->
5.             <!-- data-form-theme="green" to set green color theme for form -->
6.             <a href="#" class="item-link smart-select" data-navbar-theme="red" data-form-theme="green">
7.                 <select name="car">
8.                     ...
9.                 </select>
10.                 <div class="item-content">
11.                     <div class="item-inner">
12.                         <div class="item-title">Car</div>
13.                     </div>
14.                 </div>
15.             </a>
16.         </li>
17.     </ul>
18. </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":

1. <div class="list-block">
2.   <ul>
3.     <li>
4.       <a href="#" class="item-link smart-select">
5.         <!-- select -->
6.         <select name="fruits">
7.           <option value="apple">Apple</option>
8.           <option value="pineapple">Pineapple</option>
9.           ...
10.         </select>
11.         <div class="item-content">
12.           <div class="item-inner">
13.             <div class="item-title">Fruit</div>
14.             <!-- Additional "smart-select-value" class to set selected option depending on this text value -->
15.             <div class="item-after smart-select-value">Apple</div>
16.           </div>
17.         </div>
18.       </a>
19.     </li>
20.   </ul>
21. </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:

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

复制