今日は、Axure のコードを呼び出してブラウザーの日付ピッカーを呼び出し、リピーター テーブルの日付範囲をフィルターする方法を説明します。ブラウザーの日付ピッカーを呼び出す利点は、特定の年の特定の月の曜日 (2 月は 29 日) を含む実際の日付を選択できることです。すべてが実際のものなので、ブラウザーの日付ピッカーのスタイルが異なります。この場合は Google Chrome を使用しており、Google は Axure にも標準で搭載されていますが、他のブラウザにはプラグインがなかったり、Axure をプレビューするのが怖いため、皆さんも Google を使用することをお勧めします。
1.エフェクト表示
1. 実際の日付範囲を選択できます。上下の矢印をクリックして前月または翌月に切り替えたり、年と月をクリックして素早く選択したりできます。
2. 選択内容に応じて開始時刻と終了時刻を自動的に調整します。たとえば、開始時刻を 2023 年 8 月 30 日として選択し、終了イベントを 2023 年 8 月 1 日として選択します。このようにして、開始時刻は 2023 年 8 月 1 日よりも小さくなります。終了時刻を入力すると、自動的に認識され2023年に調整されます。 期間は2023年8月1日から2023年8月30日までです。
3. クエリ ボタンをクリックしてリピーター テーブルをフィルターし、日付範囲内のデータをフィルターで除外します。
【試作プレビュー】
https://axhub.im/ax9/2bcd864c6573fb02/#g=1&p=js 日付ピッカー フィルターのケース
【プロトタイプダウンロード】
方法 1:プロトタイプ共有グループに参加すると、プロトタイプを無料で共有できます。WeChat 522073109 までご連絡ください。
方法 2: https://weidian.com/item.html?itemID=3681949369
2. 制作チュートリアル
1. js を介してブラウザの日付ピッカーを呼び出します
まず、新しい四角形を作成して名前を付け (この場合は code1 という名前)、その中に HTML コードを書き込む必要があります。
<input type="date"> を使用して日付入力ボックスを作成できます。開始日と終了日が 2 つあるため、name="vigo1" などの名前を付ける必要があります。変更する必要がある場合は、スタイルを直接内部に追加することもできます。たとえば、幅 200、高さ 30 は次のように記述できます。 style=”width: 200px; height: 30px;
次に、それを JS で呼び出します。
まず、「data-label」属性が「code1」（上記の四角形に付けた名前）である要素を見つけます。
$('[データラベル=コード1]').each(function()
そして、要素内の <p> タグのテキスト コンテンツを取得します (これは、上記で date と呼ばれたコードです)
varparagraphText = $(this).find('p').text();
最後に、四角形を日付ピッカーであるコードの内容に置き換えます。
$(this).html(paragraphText);
このようにして、プレビューに日付ピッカーが表示されるので、それをコピーします。2 番目の日付ピッカーの名前と名前は最初のものと同じであってはいけないことに注意してください。変更する必要があります。そうでない場合は、衝突するだろう。
2. 日付を選択した後、値を Axure に転送して戻します。
日付ピッカーが表示された後、日付が選択されている場合は、Axure のグローバル変数に日付値を保存する必要があります。そうしないと、リピーターをフィルターできません。ここでは、最初にテキスト ラベルを追加する必要があります。デフォルトでは非表示になっています。 . click1 という名前の処理ロジック
まず、name="vigo1" の要素を選択し、それに "change" イベント ハンドラー関数をバインドします $("input[name='vigo1']").on("change", function()
日付入力ボックスの値が変更されると、click1 関数がトリガーされます。
$(“[data-label='click1']”).trigger(“クリック”);
マウスが click1 要素をクリックしたときの日付セレクターの選択について説明します。
var selectedDate = dateInput.value;
グローバル変数として設定する ここでは、最初にグローバル変数 time1 を追加し、次に選択した日付値をそれに割り当てる必要があります。
$axure.setGlobalVariable(“time1”, selectedDate);
このようにして、日付値をグローバル変数に保存し、Axure のネイティブ インタラクションに戻ります。
2 番目の日付ピッカーも同様に処理されます。メインの名前を同じにすることはできません。基本的にはコピーして貼り付け、名前を変更するだけです。
3. 時間値の処理と比較
次に、Time Value 1 という名前のテキスト ラベルを追加します。これはデフォルトでは非表示であり、イベントの比較にのみ使用されます。
テキスト設定の対話を使用して、グローバル変数に記録されたイベント値を時間値 1 のテキストに設定します。取得されるイベントの形式は yyyy-mm-dd ですが、Axure で時間サイズを比較するには date.parse 関数を使用する必要があり、この関数で必要な日付形式は yyyy/mm/dd です。
したがって、テキストを設定するときに、replace 関数を使用して - 記号を / に置き換えることができます。
次に、date.parse を使用します。この関数は、指定された時刻と 1970 年 1 月 1 日 00:00:00 の間のミリ秒数を計算できます。これは、日付形式の文字を純粋な数値形式に変換するのと同じです。比較することで数値の大きさを時間と比較することができます。
2 番目の日付ピッカーも同じ方法で処理され、コピーして貼り付けて名前を変更するだけです。
4. 時間値の処理と比較
2 つの時間を数値に変換した後、開始時刻を 2023 年 8 月 30 日として選択し、終了イベントを 2023 年 8 月 1 日として選択するなど、開始時刻を終了時刻よりも大きくする人が選択するかどうかを検討しました。実際、彼は 2023 年 8 月 1 日から 2023 年 8 月 30 日までの範囲を選択したいので、それを自動的に調整するインタラクションを作成します。
いくつかのテキスト ラベルを使用して、最初に 2 つの時間長方形の初期の x、y 座標値を記録し、変更された場合は、読み込み時にテキストを設定するインタラクションを使用して、対応する座標値を設定します。
2 番目の日付ピッカーも同じ方法で処理されます
時間を選択した後、条件に従って判断され、時間値 1 が 2 より大きい場合は、モバイル インタラクションを使用して、日付ピッカー 1 をレコード x1y1 の座標値に移動し、日付ピッカー 2 をその座標に移動しますレコード x2y2 の値
それ以外の場合は、日付ピッカー 1 をレコード x2y2 の座標値に移動し、日付ピッカー 2 をレコード x1y1 の座標値に移動します。
そうすると自動的に位置が変わります
5. リピータテーブルの準備
リピータに複数の列がある場合は、テーブル 1 ～ 6 と操作列という名前の四角形をいくつか追加します。
対応する列をリピーターテーブルに追加し、内容を入力します。
axure10 の場合は、リンク インタラクションを使用して、対応する列を対応するコンポーネントに接続するだけですが、axure89 の場合は、リピーターの各項目をロードするときに、テキストを設定するインタラクションを使用して、対応するコンポーネントの値を設定する必要があります表の列を対応するコンポーネントに追加します
次に、長方形を使用してリピーターの外側にヘッダーを作成します。各長方形の幅は、リピーター内の対応する列の長方形と同じです。
フォームが表示されます。
6. リピーターテーブルを日付範囲でフィルタリングします。
クエリボタンを追加し、マウスでクエリボタンをクリックすると、条件に基づいたインタラクションを追加します。
最初のケースは、時間値 1 と時間値 2 の値が両方とも空である場合、つまり、両方に選択された時間があり、時間値 1 が時間値 2 より小さい場合、フィルタリングされたインタラクションを使用して比較します。リピータ テーブルの時間列、この場合はフィルタリングの列 6 です。ここでは、date.prase 関数を使用して 6 列目の時間値を処理し、標準デジタル形式に変換して、それと比較する必要もあります。ここでの条件は、時間値 1 以上、時間値 2 未満である必要があることです。
2 番目のケースは、時間値 1 と時間値 2 の値が両方とも空である場合、つまり、両方に選択された時間があり、時間値 1 が時間値 2 以上である場合です (ここでは、時間値1 は右に進み、終了時刻になります), フィルタリング インタラクションを使用して、リピーター テーブルの時刻列 (この場合は 6 番目の列) をフィルタリングします。ここでは、date.prase 関数も使用して、 6 番目の列を標準デジタル形式に変換し、時間値 1 および 2 と比較します。ここでの条件は、時間値 2 以上、時間値 1 未満である必要があります。
3 番目のケースは、時間値 1 と時間値 2 の値が両方とも空の場合、つまり時間が選択されていない場合、フィルターを削除するインタラクションを使用してフィルターを削除できることです。
4 番目のケースは、時間値 1 が空で、時間値 2 が空ではなく、時間値 1 が時間値 2 の左側にある場合、終了時刻のみが選択されることです。フィルタリング インタラクションを使用して、リピーター テーブルの時刻列 (この場合は 6 番目の列) をフィルタリングします。ここでは、date.prase 関数も使用して 6 番目の列の時刻値を処理し、標準のデジタル形式に変換し、 then 時間 2 と比較すると、ここでの条件は時間値 2 未満です
5 番目のケースは、時間値 1 が空で、時間値 2 が空ではなく、時間値 1 が時間値 2 の右側にある場合です。つまり、終了時刻のみが選択されていますが、終了時刻は右側にあります。 。フィルタリング インタラクションを使用して、リピーター テーブルの時刻列 (この場合は 6 番目の列) をフィルタリングします。ここでは、date.prase 関数も使用して 6 番目の列の時刻値を処理し、標準のデジタル形式に変換し、 then 時間 1 と比較すると、ここでの条件は時間値 1 未満です
6 番目のケースは、時間値 2 が空で、時間値 1 が空ではなく、時間値 1 が時間値 2 の左側にある場合、開始時間のみが選択されることです。フィルタリング インタラクションを使用して、リピーター テーブルの時刻列 (この場合は 6 番目の列) をフィルタリングします。ここでは、date.prase 関数も使用して 6 番目の列の時刻値を処理し、標準のデジタル形式に変換し、 then 時間 1 と比較すると、ここでの条件は時間値 1 以上です
最後の状況は、時間値 2 が空で、時間値 1 が空ではなく、時間値 1 が時間値 2 の右側にある場合です。つまり、終了時間のみが選択されていますが、終了時間は時間とともに記録されます。値1。フィルタリング インタラクションを使用して、リピーター テーブルの時刻列 (この場合は 6 番目の列) をフィルタリングします。ここでは、date.prase 関数も使用して 6 番目の列の時刻値を処理し、標準のデジタル形式に変換し、 then 時間 1 と比較すると、ここでの条件は時間値 1 以下です
このようにして、ブラウザの日付ピッカーを呼び出して、リピーター フォーム プロトタイプ テンプレートをフィルタリングする制作が完了しました。これは、後で使用するのにも非常に便利です。リピーター フォームに対応するデータを入力するだけで、日付が自動的に生成されますインターバルフィルター、インタラクティブエフェクト
以上がこのチュートリアルの全内容です。興味のある方はぜひお試しください。お読みいただきありがとうございました。また次号でお会いしましょう。