Framework7-picker

Framework7-ピッカー

説明

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

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

myApp.picker(parameters)

_parameters_は必須オブジェクトであり、ピッカーインスタンスの初期化に使用され、必須メソッドです。

ピッカーパラメータ

次の表は、ピッカーで利用可能なパラメータを指定します-

S.No	Parameters & Description	Type	Default
1	container インラインピッカーのピッカーHTMLを生成するために使用されるCSSセレクターまたはHTMLElementを含む文字列。	string or HTMLElement	-
2	input CSSセレクターまたはHTMLElementを使用して文字列と共に配置された関連する入力要素。	string or HTMLElement	-
3	scrollToInput ピッカーが開かれるたびに、入力のビューポート（ページコンテンツ）をスクロールするために使用されます。	boolean	true
4	inputReadOnly 指定された入力で「読み取り専用」属性を設定するために使用されます。	boolean	true
5	convertToPopover iPadのような大画面でピッカーモーダルをポップオーバーに変換するために使用されます。	boolean	true
6	onlyOnPopover 有効にすると、Popoverでピッカーを開くことができます。	boolean	true
7	cssClass モーダルを選択するには、追加のCSSクラス名を使用できます。	string	-
8	closeByOutsideClick メソッドを有効にしてピッカーまたは入力要素の外側をクリックして、ピッカーを閉じることができます。	boolean	false
9	toolbar ピッカーモーダルツールバーを有効にするために使用されます。	boolean	true
10	toolbarCloseText 完了/閉じるツールバーボタンに使用されます。	string	'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>	string	-

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

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

S.No

パラメータと説明

Type

デフォルト

1

*rotateEffect*

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

ブール値

偽

2

*momentumRatio*

高速タッチと移動後にピッカーを離すと、より勢いが増します。

数

7

3

*updateValuesOnMomentum*

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

ブール値

偽

4

*updateValuesOnTouchmove*

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

ブール値

true

5

値

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

アレイ

-

6

*formatValue*

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

関数（p、値、displayValues）

-

7

*cols*

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

アレイ

-

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

次の表は、ピッカーで利用可能なコールバック関数のリストを示しています-

S.No	Callbacks & Description	Type	Default
1	onChange コールバック関数は、ピッカーの値が変更され、_valuesとdisplayValues_が関連列の配列である場合に実行されます。	function (p, values, displayValues)	-
2	onOpen ピッカーが開かれるたびにコールバック関数が実行されます。	function (p)	-
3	onClose コールバック関数は、ピッカーが閉じられるたびに実行されます。	function (p)	-

列パラメーター

Pickerの設定の時点で、_cols_パラメーターを渡す必要があります。 それは、各項目が列パラメータを持つオブジェクトである配列として表されます-

S.No

パラメータと説明

Type

デフォルト

1

値

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

アレイ

-

2

*displayValues*

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

アレイ

-

3

*cssClass*

列HTMLコンテナーに設定するために使用される_CSSクラス_名。

ひも

-

4

*textAlign*

列値のテキスト配置を設定するために使用され、_ "left"、 "center"、または "right" _になります。

ひも

-

5

幅

デフォルトでは、幅は自動的に計算されます。 _px_にあるべき依存列を持つピッカーで列幅を修正する必要がある場合。

数

-

6

ディバイダー

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

ブール値

偽

7

• コンテンツ *

列のコンテンツで指定されたdivider-column _（divider：true）_に使用されます。

ひも

-

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

S.No	Callbacks & Description	Type	Default
1	onChange* その時点で列の値が変更されるたびに、コールバック関数が実行されます。 _valueおよびdisplayValue_は、現在の列_valueおよびdisplayValue_を表します。	function (p, value, displayValue)	-

ピッカーのプロパティ

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

S.No	Properties & Description
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コンテナに使用されます。

ピッカーメソッド

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

S.No	Methods & Description
1	myPicker.setValue(values, duration) 新しいピッカー値を設定するために使用します。 値は配列にあり、各項目は各列の_value_を表します。 duration-ミリ秒単位の移行期間です。
2	myPicker.open() ピッカーを開くために使用します。
3	myPicker.close() ピッカーを閉じるために使用します。
4	myPicker.destroy() Pickerインスタンスを破棄し、すべてのイベントを削除するために使用します。

列のプロパティ

_myPicker.cols_配列の各列には、次の表に示す独自の便利なプロパティもあります-

//Get first column
var col = myPicker.cols[0];

S.No	Properties & Description
1	col.container 列HTMLコンテナを使用してインスタンスを作成できます。
2	col.items 列項目のHTML要素を持つインスタンスを作成できます。
3	col.value 現在の列の値を選択するために使用されます。
4	col.displayValue 表示の現在の列値を選択するために使用されます。
5	col.activeIndex 現在のインデックス番号を指定します。これは、選択/アクティブなアイテムです。

列メソッド

便利な列メソッドは、次の表に記載されています-

S.No	Methods & Description
1	col.setValue(value, duration) 現在の列に新しい値を設定するために使用されます。 _value_は新しい値である必要があり、_duration_はミリ秒単位で指定される遷移期間です。
2	col.replaceValues(values, displayValues) 列の値とdisplayValuesを新しい値に置き換えるために使用されます。

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

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

次の表に指定されているピッカーにはさまざまなタイプがあります-

S.No	Tabs Types & Description
1	Picker With Single Value リストから任意の値を選択できる強力なコンポーネントです。
2	Two Values and 3D-Rotate Effect ピッカーでは、3D回転効果に使用できます。
3	Dependent Values 指定された要素の値は互いに依存しています。
4	Custom Toolbar 単一のページで1つ以上のピッカーを使用してカスタマイズできます。
5	Inline Picker/Date-time インラインピッカーで値の数を選択できます。日付には_date、month、year_があり、timeには_hours、minutes、seconds._があります。