Framework7 - 選擇器

上一頁
下一頁

描述

選擇器看起來像 iOS 原生選擇器，它是一個功能強大的元件，允許您從列表中選擇任何值，也可用於建立自定義覆蓋層選擇器。您可以將選擇器用作內聯元件或覆蓋層。覆蓋層選擇器將在平板電腦（iPad）上自動轉換為彈出視窗。

使用以下 App 的方法，您可以建立並初始化 JavaScript 方法 -

myApp.picker(parameters)

其中引數是必需的物件，用於初始化選擇器例項，並且它是一個必需的方法。

選擇器引數

下表指定了選擇器中可用的引數 -

序號 引數 & 描述 型別 預設值
1

container

用於為內聯選擇器生成選擇器 HTML 的 CSS 選擇器字串或 HTMLElement。

 字串或 HTMLElement -
2

input

使用 CSS 選擇器字串或 HTMLElement 放在一起的相關輸入元素。

 字串或 HTMLElement -
3

scrollToInput

每當選擇器開啟時，它用於滾動輸入的視口（頁面內容）。

 布林值 true
4

inputReadOnly

用於在指定的輸入上設定“只讀”屬性。

 布林值 true
5

convertToPopover

它用於在 iPad 等大螢幕上將選擇器模態轉換為彈出視窗。

 布林值 true
6

onlyOnPopover

您可以透過啟用它在彈出視窗中開啟選擇器。

 布林值 true
7

cssClass

對於選擇器模態，您可以使用其他 CSS 類名。

 字串 -
8

closeByOutsideClick

您可以透過啟用該方法，透過點選選擇器或輸入元素外部來關閉選擇器。

 布林值 false
9

toolbar

它用於啟用選擇器模態工具欄。

 布林值 true
10

toolbarCloseText

用於“完成/關閉”工具欄按鈕。

 字串 'Done'
11

toolbarTemplate

它是工具欄 HTML 模板，預設情況下它是帶有以下模板的 HTML 字串 -

<div class = "toolbar">
  <div class = "toolbar-inner">
    <div class = "left"></div>
    <div class = "right">
      <a href = "#" class = "link close-picker">
         {{closeText}}
      </a>
    </div>
  </div>
</div>
字串 -

特定選擇器引數

下表列出了可用的特定選擇器引數 -

序號 引數 & 描述 型別 預設值
1

rotateEffect

它在選擇器中啟用 3D 旋轉效果。

 布林值 false
2

momentumRatio

當您在快速觸控和移動後釋放選擇器時，它會產生更多的動量。

 數字 7
3

updateValuesOnMomentum

用於在動量期間更新選擇器和輸入值。

 布林值 false
4

updateValuesOnTouchmove

用於在觸控移動期間更新選擇器和輸入值。

 布林值 true
5

value

該陣列具有其初始值，並且每個陣列項都表示相關列的值。

 陣列 -
6

formatValue

該函式用於格式化輸入值，它應該返回新的/格式化的字串值。值和顯示值是相關列的陣列。

 function (p, values, displayValues) -
7

cols

每個陣列項都表示一個帶有列引數的物件。

 陣列 -

選擇器引數回撥

下表顯示了選擇器中可用的回撥函式列表 -

序號 回撥 & 描述 型別 預設值
1

onChange

每當選擇器值更改時，回撥函式將被執行，並且值和顯示值是相關列的陣列。

 function (p, values, displayValues) -
2

onOpen

每當選擇器開啟時，回撥函式將被執行。

 function (p) -
3

onClose

每當選擇器關閉時，回撥函式將被執行。

 function (p) -

列引數

在配置選擇器時，我們需要傳遞cols引數。它表示為陣列，其中每個專案都是帶有列引數的物件 -

序號 引數 & 描述 型別 預設值
1

values

您可以使用陣列指定字串列值。

 陣列 -
2

displayValues

它包含帶有字串列值的陣列，它將顯示來自values引數的值，當它未指定時。

 陣列 -
3

cssClass

用於在列 HTML 容器上設定的CSS 類名稱。

 字串 -
4

textAlign

它用於設定列值的文字對齊方式，可以是“left”，“center”或“right”。

 字串 -
5

width

預設情況下，寬度會自動計算。如果您需要在具有依賴列的選擇器中修復列寬度，則應以px為單位。

 數字 -
6

divider

它用於應為視覺分隔符的列，它沒有任何值。

 布林值 false
7

content

它用於使用列的內容指定分隔符列(divider:true)。

 字串 -

列回撥引數

序號 回撥 & 描述 型別 預設值
1

onChange

每當列值發生變化時，回撥函式都會執行。value 和 displayValue分別表示當前列的value 和 displayValue。

 function (p, value, displayValue) -

選擇器屬性

Picker 變數有很多屬性，如下表所示 -

序號 屬性 & 描述
1

myPicker.params

您可以使用物件初始化傳遞的引數。
2

myPicker.value

每列的選擇值由專案陣列表示。
3

myPicker.displayValue

每列的選擇顯示值由專案陣列表示。
4

myPicker.opened

當選擇器開啟時，它設定為true值。
5

myPicker.inline

當選擇器為內聯時，它設定為true值。
6

myPicker.cols

選擇器列具有其自身的方法和屬性。
7

myPicker.container

Dom7 例項用於 HTML 容器。

選擇器方法

選擇器變數有一些有用的方法，如下表所示 -

序號 方法 & 描述
1

myPicker.setValue(values, duration)

用於設定新的選擇器值。值位於陣列中，其中每個專案都表示每列的value。duration - 它是以毫秒為單位的過渡持續時間。
2

myPicker.open()

用於開啟選擇器。
3

myPicker.close()

用於關閉選擇器。
4

myPicker.destroy()

用於銷燬選擇器例項並刪除所有事件。

列屬性

myPicker.cols陣列中的每個列也具有其自身的有用屬性，如下表所示 -

//Get first column
var col = myPicker.cols[0];
序號 屬性 & 描述
1

col.container

您可以使用列 HTML 容器建立一個例項。
2

col.items

您可以使用列專案 HTML 元素建立一個例項。
3

col.value

用於選擇當前列的值。
4

col.displayValue

用於選擇當前列的顯示值。
5

col.activeIndex

給出當前索引號，即選定的/活動的專案。

列方法

有用的列方法如下表所示 -

序號 方法 & 描述
1

col.setValue(value, duration)

用於為當前列設定新值。value必須是新值，duration是以毫秒為單位的過渡持續時間。
2

col.replaceValues(values, displayValues)

用於將列值和顯示值替換為新的值。

每當您將選擇器初始化為內聯選擇器時，它用於從其 HTML 容器訪問選擇器的例項。

var myPicker = $$('.picker-inline')[0].f7Picker;

選擇器有不同型別，如下表所示 -

序號 選項卡型別 & 描述
1 帶單個值的選擇器

它是一個功能強大的元件，允許您從列表中選擇任何值。
2 兩個值和 3D 旋轉效果

在選擇器中，您可以使用 3D 旋轉效果。
3 依賴值

值取決於指定元素的彼此。
4 自定義工具欄

您可以在單個頁面上使用一個或多個選擇器進行自定義。
5 內聯選擇器 / 日期時間

您可以在內聯選擇器中選擇多個值。例如，日期有日期、月份、年份，時間有小時、分鐘、秒。
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.