時々彼らは戻ってきます...再び

ごく最近、快適なTrackBarスライダーに関する投稿 がユーザーburによってハブに公開されました。 それらがシンプルであり、jQueryと組み合わせて使用​​できる点で気に入っています。 少し後に、時間範囲を決定するスライダーに関する投稿もありましたが、その重さと「重さ」のために非難されました。 次に、TrackBarに基づいてスライダーを作成し、任意の時間範囲を選択するというアイデアを思いつきました。 発明-完了。 そして今、私はhabra-publicityの成果を発表します。



だから：



次のようになりました：





基礎として、jQueryに適応したTrackBarの3番目のバージョンを使用し、それのみをアップグレードしました。必要に応じて、アドオンを元のバージョンに転送することができます。

すぐにリンクを提供してください：

TrackBarの3番目のバージョンとその説明

TrackBarの4番目のバージョンとその議論

更新されたTrackBarのデモ

何が悪かった

最初は、スライダーは1つまたは2つの排他的整数を決定するためにのみ計算されていました。 したがって、その実装上のすべての欠陥は次のとおりです。

1. 整数でのみ動作します
2. サンセリフ
3. 数字ではなくテキストを割り当てることができない

これらすべての欠点の修正には、午後3時ほどかかりました。

新機能

私の夢のスライダーを作成するために、初期の実装を真剣に修正し、新しい変数とイベントを導入する必要がありました。 そのため、スライダーでできることは次のとおりです。

1. 小と大の2種類のセリフを表示する
2. カスタム署名を作成します。
   • 大きなセリフの上
   • スライダー上
   • 左右の境界線上
3. 値にスライダーをドラッグしながら正確に配置する
4. 独自にフォームの独自の非表示入力を作成します（onMoveを記述する必要はありません）
5. その場でオーバーライド：
   • スライダーの位置と変数値
   • 左右の制限
   • セリフ
6. 確立された境界を超える値の間隔を表示するには
7. 値が範囲外の場合、スライダーを非表示にします
8. 上記のすべてを柔軟に構成する
9. バージョン4互換

革新のいくつかはここで見ることができます：



すべてのファイルでアーカイブする

新しい設定の完全なリストと簡単な説明：

追加のパラメーター（パラメーター：デフォルト値）：

showSmallTicks：true-小さなセリフの表示を許可または禁止するフラグ



showBigTicks：true-テキストを割り当てることができる大きなセリフの表示を許可または禁止するフラグ



showBigTicksText：true-大きなセリフの隣のテキストの表示を許可または禁止するフラグ



tickRoundUp：= roundUp = 0-セリフの数、つまり2つの隣接するセリフの間に位置する値の数を担当する変数。 デフォルト値は0で、セリフは表示されません



tickDivider：5-大きいセリフの間の小さいセリフの数を担当する変数（この値より1つ多い）



allowOverrideBorders：false-間隔を維持しながら、範囲が確立された境界を超えることを許可または禁止するフラグ



precisePositioning：false-スライダーの正確な配置を許可または禁止するフラグ



leftInputName：id + 'Left'-左スライダー（デュアルフラグが設定されている場合）またはスライダー全体（デュアルが設定されていない場合）の非表示入力を作成するために使用される変数



rightInputName：id + 'Right'-右スライダーの非表示入力を作成するために使用される変数（デュアルフラグが設定されている場合）



createHiddenInputs：false-非表示入力を作成および管理するかどうかを決定するフラグ

追加のイベント：

onLeftLimitTextSet、onRightLimitTextSet-スライダーの左右の境界にテキストを設定



onLeftSliderTextSet、onRightSliderTextSet-左右のスライダーにテキストを設定



onBigTickText-大きなセリフにテキストを設定すると、セリフが配置される値が送信されます

追加機能：

updateLeftValue（v4）、updateRightValue（v4） -スライダーの左右の値を設定するための関数。これらは3番目のバージョンにはありませんでしたが、4番目に登場し、ここに追加することも決定しました



SetPositionWithNoMove -onMoveイベントを呼び出さずに外部で変更された値に従ってスライダーの位置を設定します（正常に動作するにはupdateLeftValue、updateRightValue関数を入力する必要がありました）



SetPosition-同じこと、onMove（）呼び出しのみ



SetRuler-セリフの再定義



ResetLimits-境界値を上書き



4番目のバージョンで、スライダーの操作がupdateLeftValueとupdateRightValueの呼び出しに制限されていた場合、更新されたTrackBarの操作の原則は次のとおりです。

1. まず、必要な値を直接設定します。例えば
   
   var scaleObj = $.trackbar.getObject("scale");





scaleObj.leftValue = 10;





scaleObj.rightValue = 20;





scaleObj.rightLimit = 100;
   
   
   
   
2. 次に、1つ以上の値アプリケーション関数を呼び出しscaleObj.SetPosition();
   
   
   
   たとえば、 scaleObj.SetPosition();





scaleObj.ResetLimits();
   
   
   
   
   
   

すべての機能を実証するために、元のデモが行われ、少し装飾されました（追加されたパラメーターは青で強調表示されます）。また、7番で、2つのスライダーに基づいて任意の時間範囲の選択を整理する例を追加しました：上の方が範囲のスケールを決定し、下の方がそれを設定します。 その中で、すべての改善が最大限に、最も明白な使用例に使用されています。



元のスライダーを完成させる上で最も興味深いことは、それらにセリフを追加することでした。 それらの実装は異なる可能性がありますが、私は次のアプローチに決めました。

1. 最初に、メインdivが編成されます。このdivでは、スケールが配置され、スライダーのある線の下に表示されます
2. 次に、異なるidのセットが生成され、どのセリフを描画するかが決定されます
3. シャム双子のようにセリフが結合しないように、セリフはそれらの間に挿入されますが、幅は各スライダーに対して個別に計算されます。

この規模の署名は、ほぼ同じ原則に基づいて構築されています。

このアプローチにより、セリフを簡単かつ迅速に作成してcssで制御できますが、重大な欠点が1つあります。すべてのブラウザーが小数値のすべての符号を使用しない、破棄または丸めるということです。 したがって、多数のセリフ（40を超える）を使用すると、右側のセリフがトラックバーを完全にカバーしていないことが明確にわかり（例1を参照）、セリフの位置と実際の値に矛盾があります。 小さな値では、これは完全に見えません。

ブラウザー間の互換性と既知の欠点

最初、すべての開発はセカンドバージョンのFirefoxで行われました。これにより、セリフ用のかなり良いレイアウトをすばやく簡単に作成し、他のブラウザー用にさらに最適化することができました。 それでは、さまざまなブラウザーのスライダーの動作の分析を始めましょう。



Firefox v2.0.0.13

問題は認められず、すべてが意図したとおりに機能します。 時々発生する可能性のある唯一の問題は、セリフとスライダーの右側の値と多数のセリフの不正確な一致ですが、これは上記のとおりです。





IE v7

奇妙なことに、すべてが正常に動作します。Firefoxの場合とほぼ同じですが、スライダーの右側に既に多くの不一致があります。 さらに、ノッチ自体は数ピクセル高くレンダリングされます。





IE v6およびv8b1

外観では、すべてがIE 7に似ていますが、中央部分に透明性はありません。 それほど重要ではありませんが、特にIE 8では不愉快です。おそらく、cssの透明度の値は単純に誤って定義されており、これは何らかの形で将来的に理論的に修正できます。 IE 6では、7番目の例で、小さなテキストが境界を越えて新しい行に移動しました。





Safari 3.1.1

また、すべてにほとんど問題はありませんが、スライダーの端にはすでにセリフのより強力な不足があります。 これは最初の例で顕著であり、スライダーの約10％がスライダーで覆われていないため、Safariでは50個以上のセリフを作成することはお勧めしません。





この時点まで、テストプロセスは喜びでしたが、すべてが常に希望どおりに行われるわけではなく、レーキがどこかに出てきたに違いないという気持ちがゆっくりと忍び寄りました。 そして、彼らはクロールアウトしました...



Opera 9.27

どこから始めればいいのかわかりません。 原則として、セリフをオフにすると、スライダーの動きを描くときのアーティファクトを除いて、すべてがうまくいきます：スライダーの署名の場所に不快な黄色の痕跡があり、さらに、それらはクイックドラッグアンドドロップで常に消えるとは限らず、ストリップにいくつかの値が表示される場合があります Operaのセリフは、作成の原理が小数幅の使用に基づいているため、非常に災難です。 実験により、オペラは整数のパーセント値のみを認識することが示されています。 そして、彼女は500ピクセルの0.8％が4ピクセルであることを気にしません！ ピクセル（最初の例のように）。 まあ、それが丸められても、そうではありません-小数部分は単に破棄され、0％しか残りません。 私が理解しているように、彼女を納得させることは無意味です。したがって、例1と2では、このアプローチのすべてのパーセンテージではなくすべての喜びを観察します。 幅の値はほぼ全体であり、例のNo. 7のように値が1.02％と6.06％であり、それらが特別に選択されなかったため、残りの部分は幅の値がほぼ全体であり、天気の100分の1を遮断しなかったため、このような運命を回避することができましたUFOの陰謀G）。 彼女はまだ著しく遅くなり、役に立たないという事実について（依存関係は次のとおりです。セリフ付きのスライダーが多いほど、遅くなります）。





他のブラウザ

他のブラウザではチェックしませんでした。時間がないので、検証のためだけにインストールしたくないだけです。

今後の予定

正直に言って、私にはわかりません。透視能力の明らかな傾向はありません。 何が起こるかを推測したくありません、時間が経てばわかるでしょう。





UPD：多くの人が、（特にOperaで）速度が低下すると言いますが、これは完全には使えません。 遅くなるのはjavascriptコード自体ではありませんが、ブラウザは多数のセリフ（およびすべてのスライダーから）をレンダリングします。 例7を個別に実行すると、はるかに高速で快適になります。 しかし、これは私たちが取り組む他の問題を取り除くものではありません。