少し前に、この作品がHabréで公開されました：
「もう一度、トラックバーについて」では、そのようなスライダーを作成するための簡単なスクリプトについて説明しています。
ユーザーからのフィードバックのおかげで、スクリプトの最初のバージョンの機能が大幅に拡張されました。 新しい機能を説明する記事を更新しながら、v3.0に成長しました。 ただし、一部の変更は「後で」延期されました。 コードへのより深刻な介入を要求しました。 そして、待望の「then」が登場し、JS-TrackBarの4番目のバージョンが登場しました。
TrackBar v4.0-31Kbをアーカイブします 。
新品について
メインのデモファイルは、特別なものでは満足できません。 すべての新機能は
特別なデモに含まれています。
新しいバージョンで実装されているものを見てみましょう。
下位互換性
些細なことですが、
メインデモには以前の3番目のバージョンと同じjs-codeが含まれています。 つまり、以前のバージョンのスクリプトで動作するトラックバーがページにある場合、4番目を安全にダウンロードしてインストールでき、何も変わりません。
更新された初期化
以前のバージョンでは、初期化スクリプトをHTMLコードの適切なセクションに配置する必要があり、引数は1つだけでした。
trackbar.getObject('one').init({
/* */
});多くの場合、この方法は不便です。 プロジェクトテンプレートを変更する必要があります。 この欠点を修正するために、4番目のバージョンでは
.init()メソッドの機能を拡張し、2番目の引数としてHTML要素の識別子を取得できるようになりました。
trackbar.getObject('one').init(
{
/* */
},
"elementId"
);したがって、初期化コードは、HTMLコードを変更せずに、たとえばjsファイル内のどこでも呼び出すことができます。
トラックバー同期
すぐに
特別なデモに注目します。 2つの新しいメソッドを使用して、トラックバーをonMoveコールバック関数に直接リンクできるようになりました。
*
updateLeftValue-設定したい左スライダーの値を引数として受け取り、それに応じてトラックバーの状態を変更します。
*
updateRightValue-前のものと似ていますが、右スライダー用です。
たとえば、特別なデモの最初のスライダーの初期化コードを考えてみましょう。
trackbar.getObject('one').init(
{
onMove : function() {
trackbar.getObject('two').updateLeftValue(this.leftValue);
},
dual : false, // two intervals
width : 300, // px
// leftLimit : 0, // unit of value
leftValue : 0, // unit of value
rightLimit : 255, // unit of value
rightValue : 0, // unit of value
hehe : ":-)"
},
"oneId"
);このコードでは、識別子が「1」のトラックバーが作成され、onMove関数には次の意味のコードが含まれています。 同様の対称性の場合、バインドは2番目のトラックバーに実装されます。
trackbar.getObject('two').init(
{
onMove : function() {
trackbar.getObject('one').updateLeftValue(this.leftValue);
},
dual : false, // two intervals
width : 300, // px
// leftLimit : 0, // unit of value
leftValue : 0, // unit of value
rightLimit : 255, // unit of value
rightValue : 0, // unit of value
hehe : ":-)"
},
"twoId"
);考慮される例では、任意の単純な通信オプションについて説明しています。 たとえば
、新しいデモにある他の2つの接続されたトラックバー
に示すように。 任意のモーション式をコールバック関数に適用して、依存関係を非線形にしたり、3つ以上のトラックバー間で依存させることができます。 すべては、プロジェクトのニーズとインターフェイスデザイナーの想像力に依存します;-)
計画について
JS-TrackBarプロジェクトの開発は、おそらくこれで終わりではありません。 新しいバージョンでは計画されています：
*垂直方向のスライダーの外観。
* rusおよびengに関する詳細なドキュメント。
*コメントに書いた機能:-)
jQueryについて
アーカイブには、jQueryライブラリと互換性のあるスクリプトのバージョンがまだ含まれています。 ただし、下位互換性は達成されていないため、使用する際は注意してください。 なぜなら スクリプトの作成者はjQueryを実際に使用せず、「必要に応じて」このバージョンのスクリプトを変更しました。これを思い出させてください。
Crosspost
JS-TrackBar、ランナー c
webew.ruの 4番目のバージョン