サイトはUmi.CMSを実行しており、必要な製品カタログが作成され、商品のすべてのプロパティが入力されています。 レイアウトをクロスフォームして、機能させる必要があります。 後者には問題はなく、フィルタリングに必要なツールがUmiにあります。 しかし
スライダーをレイアウトおよびプログラミングして範囲を定期的に選択すると、多くの問題が発生します。
適切な範囲選択フォームは、次の条件を満たす必要があります。
1）範囲の制限は、プロジェクト管理者が管理する必要があります。 価格は上昇しており、すべてが変化しています。
2）ドラッグ時にスライダーを横切るとき、範囲は制御可能なままでなければなりません。
3）スライダーは、値を入力するためにテキストフィールドと対話する必要があります。
Adobe Flashは、範囲スライダーアニメーションを実装するための適切なツールとして選択されています。これは、欠落しているインターフェイス要素を描画する絶好の機会を提供します。 そして、ActionScript、特にパッケージの機能
外部クラスを使用すると、フォームの通常の操作を整理するために、スライダーを予測どおりに移動させ、JavaScriptのデータの転送を整理したり、その逆を行うことができます。
そのため、価格帯に基づいて実用的なフィルタリング形式を作成するには、次の3つの手順を実行する必要があります。
1）アニメーションスライダーを使用してswfファイルを準備します。
スライダー選択フォームのインターフェースは、次のコンポーネントで構成されます。
-スライダーのクリップ：左右。 クリップを準備するとき、範囲の共通セクションでそれらを横断するとき、左のスライダーが右のスライダーの形を取り、その逆も同様であることを考慮することをお勧めします。これにより、フォームの認識の整合性が保持されます。 左右のスライダー用に2つのクリップを作成し、異なるフレームに反対の形状を作成するか、1つのクリップを表示してみます。
-スライダーが配置されている行を切り取ります。選択した範囲を表示するメインの下とメイン。
-管理パネルで指定された範囲境界を表示するテキストフィールド。
-背景クリップ。 どれでも。
必要なすべてのコンポーネントを作成して配置した後、ActionScriptクラスを使用してファイルを準備し、その作業を整理します。 スライダーを目的の範囲内で移動するには、いくつかのデータを取得する必要があります。
範囲の最小値と最大値、ユーザーが選択した最小値と最大値（ユーザーがまだ何も選択していない場合、範囲の境界に等しい）、選択ステータス-ユーザーが範囲を選択したかどうかを示すだけです。
このデータにより、ActionScript外部クラスのパッケージを取得できます。 ExternalInterfaceクラスを使用すると、フォームページ上のswfファイルとJavaScriptコード間でデータを交換するために必要なメソッドを登録できます。 例えば
if (ExternalInterface.available) { ExternalInterface.addCallback("getDiapasonData", getDiapasonData); ExternalInterface.addCallback("setDiapasonValue", setDiapasonValue); }
ここで、ExternalInterfaceが使用可能な場合、2つのメソッドが登録されます。
getDiapasonData-スライダーの正しい操作に必要なデータの取得と一次処理を行います。 Javascriptがswfファイルへの転送に必要なパラメーターを生成した後、1回実行されます。
private function getDiapasonData(begin_diapason:Number, next_diapason:Number, price_status:Number = 0, min_price:Number = 0, max_price:Number = 0):void { // .. , .. // price_status , , // , , if (price_status > 0) { // var all_summ:Number = next_diapason - begin_diapason; var start_relation:Number = min_price / all_summ; var end_relation:Number = max_price / all_summ; // 276 - var line_x:Number = (276 * (min_price - begin_diapason)) / (next_diapason - begin_diapason); var line_x_width:Number = (276 * (max_price - begin_diapason)) / (next_diapason - begin_diapason) - line_x; var next_x:Number = line_x + line_x_width; // .. } }
setDiapasonValue-将来使用するためにJavaScript関数から特定の範囲値を渡す役割を果たします。 範囲のテキスト値がHTMLフォームに入力されるたびに実行されます。
private function setDiapasonValue(temp_min_price:int, temp_max_price:int):void { // if(temp_min_price < temp_max_price) { // var temp_relation:Number = (end_diapason - start_diapason) / 276; var temp_x_start:int = 0; if(temp_min_price < start_diapason) { temp_min_price = start_diapason; } temp_x_start = (temp_min_price - start_diapason) / temp_relation; var temp_x_end:int = 0; if(temp_max_price > end_diapason) { temp_max_price = end_diapason; } if(temp_max_price < start_diapason) { temp_max_price = start_diapason; } temp_x_end = (temp_max_price - start_diapason) / temp_relation; // .. } }
JavaScript関数から渡されるパラメーターは、ActionScriptメソッドの本格的なパラメーターになり、スライダーアニメーションのプログラミングに適しています。
ActionScriptからJavaScript関数への値のポストバックを実行するには、ExternalInterfaceクラスの呼び出しメソッドを使用します。このメソッドには、必要なJavaScript関数の名前とパラメーターが渡されます。
たとえば、次のメソッドは、各スライダーの値をActionScriptから対応するJavaScript関数に渡すのに役立ちます。 価格は、100ルーブルに丸めたスライダーの位置に応じて計算されます。
private function setStartDiapason():void { var relation:Number = line_mc.x / 276; var current_diapason:Number = Math.round((start_diapason + Math.round((end_diapason - start_diapason) * relation)) / 100) * 100; ExternalInterface.call("setStartDiapason", current_diapason); } private function setEndDiapason():void { var relation:Number = (line_mc.x + line_mc.width) / 276; var current_diapason:Number = Math.round((start_diapason + Math.round((end_diapason - start_diapason) * relation)) / 100) * 100; ExternalInterface.call("setEndDiapason", current_diapason); }
2）Umi.CMS管理パネルでの範囲フォームのパラメーターの準備とそれらのXSLTテンプレートのセットアップ。
価格範囲フォームのすべての機能を確保するには、サイト管理者に境界を個別に設定する機能（最低価格と最高価格）を提供する必要があります。
価格は時間とともに変化し、広範囲の境界を指定すると、アニメーションの計算の精度が低下します。 さらに、特定の商品グループでは、価格帯はかなり計算可能です。
ユーザープロパティをUmi.CMSに保存するには、「一般的なサイトパラメーター」などの特別なデータタイプのページを作成することをお勧めします。 このページでは、価格帯プロパティグループを作成し、その中に数値タイプの2つのプロパティを配置できます。
最低価格レベル（minimalnyj_uroven_cen）と最高価格レベル（maksimalnyj_uroven_cen）。 システムによって生成されたこれらのプロパティの識別子を記憶するか、より読みやすいものに変更して記憶します。
その後、ページの構造ツリーで「一般的なサイトパラメータ」ページを作成または検索し、これらのプロパティの値を示します。
XSLTテンプレートで、価格帯の値を選択し、変数に保存します。
<xsl:variable name="minPriceValue" select="$commonParams//property[@name = 'minimalnyj_uroven_cen']/value" /> <xsl:variable name="maxPriceValue" select="$commonParams//property[@name = 'maksimalnyj_uroven_cen']/value" />
ここで、commonParamsは、[一般的なサイト設定]ページのプロパティに関する情報を格納する変数です。
次のJavaScriptコードをXSLTテンプレートに直接配置します
<script type="text/javascript"> // , min_price_product = parseFloat('<xsl:value-of select="$minPriceValue" />'); max_price_product = parseFloat('<xsl:value-of select="$maxPriceValue" />') + 100; start_diapason_price = min_price_product; end_diapason_price = max_price_product - 100; if(start_diapason_price > 0) { current_start_diapason_price = start_diapason_price; } else { current_start_diapason_price = min_price_product; start_diapason_price = min_price_product; } if(end_diapason_price > 0) { current_end_diapason_price = end_diapason_price; } else { current_end_diapason_price = max_price_product; end_diapason_price = max_price_product; } // , <xsl:if test="$min_price !='' or $max_price !=''"> price_status = 1; min_price = parseFloat('<xsl:value-of select="$min_price" />'); max_price = parseFloat('<xsl:value-of select="$max_price" />'); </xsl:if> </script>
ここでは、価格帯が管理パネルから選択され、必要な変数がスライダーのアニメーションでswfファイルに転送するために準備されます。
XSLTテンプレートで直接JavaScriptコードを生成するのは、XSLTルールに従って追加の処理を行わないとJavaScriptの一部を記述できないため、快適な体験ではありません。
Umi.CMSテンプレートエンジンは、テンプレートの構文がクリーンであることを熱心に監視しますが、これは管理パネルから変数値を取得する最も簡単な方法です。
さらに、これらの変数はテンプレートでさらに使用され、現在の問題とは関係のない他の問題を解決します。
3）JavaScriptコードを準備して、フォームとスライダー間の相互作用を整理します。
ActionScriptと通信するための関数を準備する必要があります。 別のJavaScriptファイルに配置できます。 また、必要な変数の初期化と、ページのロード後にスライダーの位置を最初に設定するための関数の起動もあります。
後者の目的のために、事前に接続する必要があるjQueryライブラリが使用されます。また、ブラウザ間の互換性はすべてのブラウザで認識されないため、bodyタグにonLoadイベントハンドラを割り当てることで初期化関数の呼び出しを補足できます。
JavaScriptとActionScriptの相互作用を整理するために特別なライブラリは必要ありません。 すべてがすでにそこにあり、言語自体で直接使用する準備ができています。
必要なJavaScript関数のリストは次のようになります。
// ActionScript function setStartDiapason(start_diapason) { current_start_diapason_price = start_diapason; document.filter_form.min_price.value = current_start_diapason_price; } // ActionScript function setEndDiapason(end_diapason) { current_end_diapason_price = end_diapason; document.filter_form.max_price.value = current_end_diapason_price; }
これらの関数によって設定された値は、その後、指定された価格帯の製品を選択するために使用されます。
// swf- jQuery(document).ready(function(){ if(document.diapason) { document.diapason.getDiapasonData(start_diapason_price, end_diapason_price, price_status, min_price, max_price); } }); // : <body onLoad="setDiapasonPrice();"> // swf- function setDiapasonPrice() { if(document.diapason) { document.diapason.getDiapasonData(start_diapason_price, end_diapason_price, price_status, min_price, max_price); } }; // swf- function setDiapasonValue() { var temp_min_price = parseInt(document.filter_form.min_price.value); var temp_max_price = parseInt(document.filter_form.max_price.value); if(temp_min_price <= temp_max_price) { document.diapason.setDiapasonValue(temp_min_price, temp_max_price); } }
これらの手順を完了すると、サイト訪問者は製品フィルタリングフォームを受け取り、swfファイルのスライダーまたは通常のテキスト入力フィールドを使用して価格帯を設定できます。
このスキームによれば、Umi.CMSは、JavaScriptコードを仲介として使用してFlashムービーと対話できます。