智慧選單

智慧型選取器讓您能輕鬆地將一般的表單選取器轉換成具有分組單選按鈕或核取方塊輸入項的動態頁面。您可以在許多原生 iOS 應用程式中看到這項功能

智慧型選取器版面

智慧型選取器版面非常簡單。它是一個眾所周知的 列表檢視 連結，內含 <select>，以及 item-link 上的附加 smart-select 類別

<div class="list">
  <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>

自訂選項圖示

我們可以使用 <option> 元素上的 data-option-icon 屬性來指定智慧型選取器頁面的列表檢視（選項）圖示

• data-option-icon - 如果它只是一個字串，則會建立一個具有此類別的圖示。如果它是 f7:icon_name 格式，則會建立一個 F7-Icons 圖示。如果它是 md:icon_name 格式，則會建立一個 Material Icons 圖示
• data-option-icon-ios - 與 data-option-icon 相同，但僅在 iOS 主題啟用時套用
• data-option-icon-md - 與 data-option-icon 相同，但僅在 MD 主題啟用時套用

例如

• <option data-option-icon="my-icon"> 將產生 <i class="icon my-icon"></i> 列表項目圖示
• <option data-option-icon="f7:house_fill"> 將產生 <i class="icon f7-icons">house_fill</i> 列表項目圖示
• <option data-option-icon="material:home"> 將產生 <i class="icon material-icons">home</i> 列表項目圖示
• <option data-option-icon-ios="f7:house" data-option-icon-md="material:home"> 將產生
  • <i class="icon f7-icons">house</i> - 當 iOS 主題啟用時
  • <i class="icon material-icons">home</i> - 當 MD 主題啟用時

自訂選項色彩和圖片

我們也可以指定智慧型選取器頁面的列表檢視元素圖片或色彩。我們需要在智慧型選取器 <select>（設定所有選項的預設圖片）或 <option>（設定單一選項的圖片或圖示）上使用附加的 data-option-image 屬性。

對於單一選項，我們也可以使用 data-option-color 和 data-option-class 屬性來新增特定選項色彩或 css 類別，以進行額外的樣式設定

<li>
  <a href="#" class="item-link smart-select">
    <select name="fruits">
      <option value="apple" selected data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-1.jpg">Apple</option>
      <option value="pineapple" data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-2.jpg">Pineapple</option>
      <option value="pear" data-option-color="orange" data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-3.jpg">Pear</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
      </div>
    </div>
  </a>
</li>

多重選取和 <optgroup>

我們也可以使用多重選取和群組選項，方法是使用 <optgroup>。因此，如果我們將 multiple 屬性新增到我們的選取，則智慧選取頁面上的單選按鈕將自動轉換為核取方塊

<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>
        ...
      </optgroup>
      <optgroup label="German">
        <option value="audi" selected>Audi</option>
        <option value="bmw">BMW</option>
        ...
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        ...
      </optgroup>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>

多重選取和 maxlength

使用多重選取，我們也可以使用 maxlength 屬性來限制可能選取的項目數量

<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>
        ...
      </optgroup>
      <optgroup label="German">
        <option value="audi">Audi</option>
        <option value="bmw">BMW</option>
        ...
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        ...
      </optgroup>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>

不同的顯示值

在選項上使用 data-display-as 屬性，我們可以用不同的方式顯示選取的值

<li>
  <a href="#" class="item-link smart-select">
    <select name="days">
      <option value="monday" selected data-display-as="Mon">Monday</option>
      <option value="tuesday" data-display-as="Tue">Tuesday</option>
      <option value="wednesday" data-display-as="Wed">Wednesday</option>
      <option value="thursday" data-display-as="Thu">Thursday</option>
      <option value="friday" data-display-as="Fri">Friday</option>
      <option value="saturday" data-display-as="Sat">Saturday</option>
      <option value="sunday" data-display-as="Sun">Sunday</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Day</div>
      </div>
    </div>
  </a>
</li>

智慧選取應用程式方法

讓我們來看看相關的應用程式方法，以使用智慧選取

智慧選取參數

現在讓我們來看看建立智慧選取所需的可用參數清單

<div class="block searchbar-not-found">{{appendSearchbarNotFound}}</div>

<div class="block searchbar-not-found">Nothing found</div>

var smartSelect = app.smartSelect.create({
  ...
  on: {
    opened: function () {
      console.log('Smart select opened')
    }
  }
})

var app = new Framework7({
  smartSelect: {
    pageTitle: 'Select Option',
    openIn: 'popup',
  }
});

智慧選單方法和屬性

因此，要建立智慧選單，我們必須呼叫

var smartSelect = app.smartSelect.create({ /* parameters */ })

之後，我們會取得其初始化的執行個體（例如上面範例中的 `smartSelect` 變數），其中包含有用的方法和屬性

智慧選取事件

智慧選取會在智慧選取元素上觸發下列 DOM 事件，以及在應用程式和智慧選取實例上觸發事件

DOM 事件

應用程式和智慧選取實例事件

智慧選取實例會在自身實例和應用程式實例上發出事件。應用程式實例事件名稱相同，但前面加上 smartSelect。

智慧選取自動初始化

如果您不需要使用智慧選取 API，而且您的智慧選取在頁面內部，並在頁面初始化時顯示在 DOM 中，則只要新增額外的 smart-select-init 類別，即可自動初始化

<li>
  <!-- Add smart-select-init class -->
  <a href="#" class="item-link smart-select smart-select-init">
    <!-- select -->
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
        <div class="item-after">Apple</div>
      </div>
    </div>
  </a>
</li>

在這種情況下，如果您需要存取已建立的智慧選取實例，可以使用 app.smartSelect.get 應用程式方法

var smartSelect = app.smartSelect.get('.smart-select');

使用自動初始化時，您可能需要傳遞額外的參數。在這種情況下，您可以透過智慧選取元素上的 data- 屬性傳遞所有額外的參數

<li>
  <!-- Pass parameters as kebab-case data attributes -->
  <a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="true" data-page-back-link-text="Go back">
    <!-- select -->
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
        <div class="item-after">Apple</div>
      </div>
    </div>
  </a>
</li>

CSS 變數

以下是相關 CSS 變數 (CSS 自訂屬性) 的清單。

:root {
  /*
  --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
  --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
  */
}

範例

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Smart Select</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
    </div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <a class="item-link smart-select smart-select-init">
            <select name="fruits">
              <option value="apple" selected>Apple</option>
              <option value="pineapple">Pineapple</option>
              <option value="pear">Pear</option>
              <option value="orange">Orange</option>
              <option value="melon">Melon</option>
              <option value="peach">Peach</option>
              <option value="banana">Banana</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Fruit</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="popup" data-searchbar="true"
            data-searchbar-placeholder="Search car">
            <select name="car" multiple>
              <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>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="sheet">
            <select name="mac-windows">
              <option value="mac" selected>Mac</option>
              <option value="windows">Windows</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Mac or Windows</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="popover">
            <select name="superhero" multiple>
              <option value="Batman" selected>Batman</option>
              <option value="Superman">Superman</option>
              <option value="Hulk">Hulk</option>
              <option value="Spiderman">Spiderman</option>
              <option value="Ironman">Ironman</option>
              <option value="Thor">Thor</option>
              <option value="Wonder Woman">Wonder Woman</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Super Hero</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>