ITを表現する

だけでなく、MooToolsは、多くのそこカルーセル、様々な、私はまだいくつかの良い理由のために、私自身のカルーセルクラスを書くことにした
1。 ページング機能を（カルーセルで特定のスライド/ステップにジャンプできるようにするには）いました。
2。 左ボタンと右ボタン/リンクの配置の自由、どこまで私がお願いしたかった。
3。 スライドステップをより詳細に制御。

私は上記の機能を備えた、新しいカルーセルを作成する管理でした...以下のように...あなたが必要となるすべての変更を示唆してお気軽に！

私の例は次のようになります... [ デモを見る ]

デモを見る | ページングバージョン1.0でダウンロードMooToolsはカルーセル （1991回ダウンロードされる）

1。 カルーセルページング

あなただけで簡単にページングをtrueにMooCarouselのインスタンスを作成しながら最後のparaterが渡されたフラグ（ページングしたい）またはfalse（donotは、ページングを望む）を設定することにより、あなたのカルーセルへのページングを追加することができます。

VAR carousel1 =新しいMooCarousel（ 'carousel1_wrapper'、 'carousel1_items_container'、 'carousel1_moveleft'、 'carousel1_moveright'、c_ns、c_sss、 真の ）;スライドの/ / NS =番号、SSS =スライド·ステップ·サイズ

とofcourseのあなたはそれらのCSSを変更することにより、好きなようにこれらのページングachorsのルック·アンド·フィールを変更することができます。

。carousel_paging {テキストが整列：右;マージン：5pxの10pxの0 0;}
。。carousel_paging現在、carousel_pagingページ{アウトライン：なし;幅：15px、高さ：15px;行の高さ：15px;テキスト整列：センター;表示：ブロック;フロート：左;背景：＃D8D8EB;マージン：0 1pxの0 0;テキスト装飾：なし;}

。carousel_paging：ホバー、carousel_paging現在の{背景：＃4D4D9B;色：＃000000;}。

よく！ 小さな問題は、しかしそこには、ページングアンカーが設定されている場合、それはカルーセルコンポーネントの後に常に生成されるでしょう。 私は同様にそれを動的にしたかったが、それだけの割合を吹き出すためのスクリプトを保つために、私はそれをスキップすることにしました。
しかし、あなたは少しJavascriptを知って、簡単にあなたのニーズを喜ばせるためにMooCarouselクラスのページング生成コードを変更することができます。

2。 左および右のアイコンをカスタマイズする

あなたは、単にCSSで遊んで配置、画像や左ボタンと右ボタンのいずれかdisplatプロパティを変更することができます。 左と右buttomsの配置を変更できるようにすると、右側に私たちのカルーセルクラスに私の実際の理由だった。
idはこれらのボタンのあるこのMooCarouselクラスなので、受け入れて、あなたがしてくださいあれば、実際には、ページ上のどこにこれらのボタンを配置することができます...それは私の例のように、要素の階層構造にする必要はありません。

VAR carousel1 =新しいMooCarousel（ 'carousel1_wrapper'、 'carousel1_items_container'、 'carousel1_moveleft'、 'carousel1_moveright'、c_ns、c_sss、TRUE）;

CSS
。carousel_container_l、carousel_container_r {マージン：50px​​ 0 0 0;位置：相対、幅：23px;高さ：20px;フロート：左;カーソル：ポインタ;}

。carousel_container_r {背景の位置：0-38px;}

。carousel_container_l {背景の位置：0-58px;}

3。 スライドステップをカスタマイズする

私は私のカスタマイズスライドステップを何を意味するか？
ほとんどのカルーセル表示されるウィンドウのに完全にスライドさせます。 したがって、4つの項目を（上記の私のサンプルのように）持っていたと言う、それはすべての4つの項目をスライドします。 このカルーセルコンポーネントを使用すると、スライドの数と、選択したステップサイズを渡します。

VAR carousel1 =新しいMooCarousel（ 'carousel1_wrapper'、 'carousel1_items_container'、 'carousel1_moveleft'、 'carousel1_moveright'、c_ns、c_sss、TRUE）;
スライドのc_ns =数、c_sss =スライド·ステップ·サイズ

また、私の例1で私が項目、各項目の幅は、私のCSSでそれぞれの項目の後に与えている余白の番号を知って、ロジックに基づいて、スライドステップサイズをcalcutedしています。

酒盛りの場合1 / * ... * /

VAR c1_w = 92 / /大酒盛りアイテムの幅

VAR c1_n = 10;比較です。の大酒盛りアイテムの/ /合計数

VAR c1_pp比較です。の大酒盛りアイテムperpageの= 4 / /番号

VAR c1_marginFactor = 51;

VAR c1_sss = c1_w * c1_pp / / SSS =スライド·ステップ·サイズ

VAR c1_ns = parseIntは（（（c1_w * c1_n）/ c1_sss）+ 0.5）/ / nsの数=スライド

c1_sss + = c1_marginFactor / / SSS =スライドステップ·サイズ、51の余白

要件：MooToolsは1.2

デモを見る | ページングバージョン1.0でダウンロードMooToolsはカルーセル （1991回ダウンロードされる）

MooRatingは、単純な（それはMooToolsライブラリの電源を使用するので、もちろんクロスブラウザ）、軽量、優れたMooToolsのベースの評価ソリューションです。 それは、評価のイメージ（私はダウンロードをスターやバー、ハーツを提供していますが、あなた自身の様々な作成だけでそれをドロップすることができます）を選択した通りであるかもしれませんという理由だけで、 "ランク"と呼ばれていません。

それはどのように次のようになりません。

	画像が異なるMooToolsの評価デモを見る
	パーセント値でMooToolsの評価デモを見る
	分数の値を持つMooToolsの評価デモを見る

Mootolsランクスクリプトをダウンロード （718回ダウンロード）

評価データ：整数、小数、またはパーセンテージ
現在のスクリプトが10進数（1.24、3.45など）、またはパーセンテージ（12％、55％など）で、全体の値（1,2,3,4,5）のような評価データを表示するために設計されています。 上記のいずれかの形式でデータを表示する選択がJavaScript内でいくつかのフラグの値を変更するだけで設定できます（moorating.js）
基本的にお好みの形式で値を表示するために、で遊ぶには、2つの電子の二つのフラグがあります...

VAR inpercent = falseは、あなたがパーセント値が表示されるように必要がある場合/ /このフラグがtrueに設定します。
1,2ではなくVAR isFractional = falseを/ /あなたは1.24のように小数の値が必要な場合は、これをtrueに設定し、1.25、4.56 ... 5

私はこのために必要なすべての説明があると思ういけない。 また。 スクリプトは非常に簡単です。 あなたは少しjavascriptingを知っていれば、表示値の任意の並べ替えを取得するスクリプトを変更することができます。 例のための3つの小数点以下の桁が表示されるようにしたい場合...ちょうど以下のようにスクリプトを調整...

（isFractional）の場合{（X <= 5 | | x> = 0の）場合moostartval [i]はinnerHTMLプロパティ= FormatNumberを（X、3）;} / / 2が3に変更されます
他{moostartval [i]のinnerHTMLプロパティ=恐らくMath.round（x）を。

評価値の更新：
私はいつもそれができるだけ早くユーザー率のものとして評価を更新するつもりありませんが私の経験から知っているので、定格値を更新するためのすべてのAJAXのスクリプトを書く気にhaventは。 あなたが定格値としたいものは何でも自由に、それはAJAXを使用して更新するか、それを送信または隠しフォームフィールドの値を設定し、フォーム全体等で提出する

機能updateRating（ID、評価）{
/ /警告（ID + "、" +評価）
/ /は、定格を持つものは何でも
}

"updateRating"と呼ばれるJavaScriptの関数があります。 この関数は、（ページ上の二つ以上評価があるかどうか）を評価にとして識別するために、評価事業部のIDを渡された更新と定格の値は[（ID、評価）updateRating]されました。 私は前述したようにあなたは、あなたがこれらの値を好きに選ぶことができました。

評価画像：星、ハート、バーまたは何もしてください。
上記の種類（星、ハートなど）のいずれかに格付けを変更することは非常に簡単です。 ただ提供されるものに似たイメージを作成し、忘れないでインチをドロップすると、イメージの名前を変更した場合、CSSファイル内の必要な変更を加えません、以下を参照してください。

。moostar {マージン：0px;パディング：0px;オーバーフロー：隠された;幅：84px;高さ：20px;フロート：左; 背景：URL（ 'stars.gif'）繰り返しに-x;}
。moostarスパン{フロート：左;マージン：0px;パディング：0px;表示：ブロック;幅：84px;高さ：20px;テキスト装飾：なし;テキストインデント：-9000px;のz-index：20;}
。moostar CURR { 背景：URL（ 'stars.gif'）25ピクセルを左;}

最も評価のウィジェットは、各スターのイベントの上にマウスをスターとハーフスターの画像を使用しています。 武定格とは、非常に低いオーバーヘッドで必要な視覚効果を達成するための背景画像として単純なスプライト画像を使用しています。

要件：MooToolsは1.2
Mootolsランクスクリプトをダウンロード （718回ダウンロード）

私はMooToolsを使って二重固定されたスライダー（最小値と最大2つのノブ、スライダー）を探していた。 しかし、私はMo​​oToolsのフォーラムにいくつかのよくやった二重固定されたスライダーを発見した、唯一の問題はすべてのこれらのスライダのくぼみは、選択範囲のマーカーを持っているということでした。 ついに！ 私は自分自身を作成することを決めた。 よく！ 私は、元のコードを使用した、以下の私の例のように、視覚的に選択範囲が示されたスライダーの背景を持っているためにそれを変更します。 青色の領域は、選択された値の範囲を示しています。

バージョン2.2デモを見る | ダウンロードMooToolsはダブルスライダのバージョン2.2をピンでとめられた （11747回ダウンロードされる）

あなたは非常に簡単に外観を変更し、必要に応じてslider.cssを変更することにより、範囲のインジケータ（上記の例では青）、スライダーノブ、スライダトラックの感じることができます。

あなたはそれが有用見つけたら私にコメントを削除してください。