JS-TrackBar、ランナーの4番目のバージョン

少し前に、この作品が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番目のバージョン






All Articles