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	インラインピッカー/日時インラインピッカーで値の数を選択できます。同様に、日付には日付、月、年があり、時間には時間、分、秒があります。

S.No	タブの種類と説明
1	単一値のピッカーこれは、リストから任意の値を選択できる強力なコンポーネントです。
2	2つの値と3D回転効果ピッカーでは、3D回転効果に使用できます。
3	従属値指定された要素の値は相互に依存しています。
4	カスタムツールバー 1ページで1つ以上のピッカーを使用してカスタマイズできます。
5	インラインピッカー/日時インラインピッカーで値の数を選択できます。同様に、日付には日付、月、年があり、時間には時間、分、秒があります。