Framework7-ピッカー

説明

ピッカーはiOSネイティブピッカーのように見え、リストから任意の値を選択できる強力なコンポーネントであり、カスタムオーバーレイピッカーの作成にも使用されます。Pickerは、インラインコンポーネントまたはオーバーレイとして使用できます。オーバーレイピッカーは、タブレット(iPad)では自動的にポップオーバーに変換されます。

次のアプリのメソッドを使用して、JavaScriptメソッドを作成および初期化できます-

myApp.picker(parameters)

ここで、パラメータは、オブジェクトを必要な初期化ピッカーインスタンスに使用され、必要な方法でされています。

ピッカーパラメーター

次の表は、ピッカーで使用可能なパラメーターを示しています-

S.No パラメータと説明 タイプ デフォルト
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

完了/閉じるツールバーボタンに使用されます。

ストリング 「完了」
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>
ストリング -

特定のピッカーパラメーター

次の表に、使用可能な特定のピッカーパラメーターを示します。

S.No パラメータと説明 タイプ デフォルト
1

rotateEffect

ピッカーで3D回転効果を有効にします。

ブール値 false
2

momentumRatio

すばやくタッチして動かした後にピッカーを放すと、勢いが増します。

7
3

updateValuesOnMomentum

勢いの間にピッカーと入力値を更新するために使用されます。

ブール値 false
4

updateValuesOnTouchmove

タッチ移動中にピッカーと入力値を更新するために使用されます。

ブール値 true
5

value

配列には初​​期値があり、各配列項目は関連する列の値を表します。

アレイ -
6

formatValue

この関数は入力値をフォーマットするために使用され、新しい/フォーマットされた文字列値を返す必要があります。displayValuesは、関連する列のアレイです。

関数(p、値、displayValues) -
7

cols

すべての配列項目は、列パラメーターを持つオブジェクトを表します。

アレイ -

ピッカーパラメータのコールバック

次の表は、ピッカーで使用できるコールバック関数のリストを示しています。

S.No コールバックと説明 タイプ デフォルト
1

onChange

コールバック関数は、ピッカー値が変更され、valuesとdisplayValuesが関連する列の配列である場合に実行されます。

関数(p、値、displayValues) -
2

onOpen

コールバック関数は、ピッカーが開かれるたびに実行されます。

関数(p) -
3

onClose

コールバック関数は、ピッカーが閉じられるたびに実行されます。

関数(p) -

列パラメーター

Pickerの構成時に、colsパラメーターを渡す必要があります。これは配列として表され、各アイテムは列パラメーターを持つオブジェクトです-

S.No パラメータと説明 タイプ デフォルト
1

values

文字列列の値は配列で指定できます。

アレイ -
2

displayValues

文字列列の値を持つ配列があり、指定されていない場合は、valuesパラメーターの値が表示されます。

アレイ -
3

cssClass

CSSクラスの列HTMLコンテナのセットに使用される名前。

ストリング -
4

textAlign

列値のテキスト配置を設定するために使用され、「左」、「中央」、「右」のいずれかになります。

ストリング -
5

width

デフォルトでは、幅は自動的に計算されます。pxである必要がある従属列を使用して、ピッカーの列幅を修正する必要がある場合。

-
6

divider

視覚的な仕切りである必要がある列に使用され、値はありません。

ブール値 false
7

content

これは、列の内容でdivider-column (divider:true)を指定するために使用されます。

ストリング -

列のコールバックパラメータ

S.No コールバックと説明 タイプ デフォルト
1

onChange

その時点で列の値が変更されるたびに、コールバック関数が実行されます。値とdisplayValueは、現在の列表す値とdisplayValueを

関数(p、値、displayValue) -

ピッカーのプロパティ

Picker変数には、次の表に示す多くのプロパティがあります。

S.No プロパティと説明
1

myPicker.params

渡されたパラメータはオブジェクトで初期化できます。

2

myPicker.value

各列で選択された値は、アイテムの配列で表されます。

3

myPicker.displayValue

各列で選択された表示値は、アイテムの配列で表されます。

4

myPicker.opened

ピッカーを開くと、真の値に設定されます。

5

myPicker.inline

ピッカーがインラインの場合、真の値に設定されます。

6

myPicker.cols

Picker列には、独自のメソッドとプロパティがあります。

7

myPicker.container

Dom7インスタンスはHTMLコンテナに使用されます。

ピッカーメソッド

ピッカー変数には、次の表に示す便利なメソッドがあります。

S.No 方法と説明
1

myPicker.setValue(values, duration)

新しいピッカー値を設定するために使用します。値は配列内にあり、各項目は各列のを表します。期間-ミリ秒単位の遷移期間です。

2

myPicker.open()

ピッカーを開くために使用します。

3

myPicker.close()

ピッカーを閉じるために使用します。

4

myPicker.destroy()

Pickerインスタンスを破棄し、すべてのイベントを削除するために使用します。

列のプロパティ

myPicker.cols配列の各列にも、次の表に示す独自の便利なプロパティがあります。

//Get first column
var col = myPicker.cols[0];
S.No プロパティと説明
1

col.container

列HTMLコンテナを使用してインスタンスを作成できます。

2

col.items

列アイテムのHTML要素を使用してインスタンスを作成できます。

3

col.value

現在の列の値を選択するために使用されます。

4

col.displayValue

表示の現在の列値を選択するために使用されます。

5

col.activeIndex

選択されている/アクティブなアイテムである現在のインデックス番号を指定します。

カラムメソッド

有用なカラムメソッドを次の表に示します。

S.No 方法と説明
1

col.setValue(value, duration)

現在の列に新しい値を設定するために使用されます。値が新しい値でなければならない、そして持続時間は、ミリ秒で所定の遷移期間です。

2

col.replaceValues(values, displayValues)

列の値とdisplayValuesを新しいものに置き換えるために使用されます。

PickerをインラインPickerとして初期化するたびに、HTMLコンテナからPickerのインスタンスにアクセスするために使用されます。

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

次の表に示すように、さまざまなタイプのピッカーがあります。

S.No タブの種類と説明
1 単一値のピッカー

これは、リストから任意の値を選択できる強力なコンポーネントです。

2 2つの値と3D回転効果

ピッカーでは、3D回転効果に使用できます。

3 従属値

指定された要素の値は相互に依存しています。

4 カスタムツールバー

1ページで1つ以上のピッカーを使用してカスタマイズできます。

5 インラインピッカー/日時

インラインピッカーで値の数を選択できます。同様に、日付には日付、月、年があり、時間には時間、分、秒があります。