高橋文樹.com » Plugins

Accordion

高橋文樹 — Mon, 03 Nov 2008 11:35:10 +0000

Class: Accordion

Accordionクラスはハンドラがクリックされた時にトグルされる要素のグループを作ります。一つの要素がトグルされて表示されると、別の要素もすべてトグルされて非表示になります。

注意点:

Accordionを使うには、標準準拠モードでページを作成する必要があります。
Accordion要素は、アニメーションを正しく表示するために、パディングとボーダーを取り除かれます。一番よい練習方法は、要素のコンテナとしてアコーディオンを使い、好きなようにスタイリングしてみることです。

Extends:

Fx.Elements

構文:

var myAccordion = new Accordion(togglers, elements[, options]);

引数:

togglers – (配列) 要素の配列。これをクリックすることでトリガーとなり、アコーディオン内の特定のセクションが開きます。
elements – (配列) アニメーションが適用される要素の配列。
options – (オブジェクト, オプション) すべてのFxオプションに加え、以下のものが指定できます。

オプション:

display – (整数: 初期値=0) はじめに表示されている要素のインデックス(アニメーションあり)。
show – (整数: 初期値=0) はじめから表示されている要素のインデックス(アニメーションなし)。
height – (真偽値: 初期値=true) trueにセットされていれば、表示される要素が切り替わるときに高さ変更のアニメーションが加わります。
width – (真偽値: 初期値=false) trueにセットされていれば、表示される要素が切り替わるときに幅変更のアニメーションが加わります。
opacity – (真偽値: 初期値=true) trueにセットされていれば、表示される要素が切り替わるときに透明度変更エフェクトが加わります。
fixedHeight – (真偽値: 初期値=false) trueにセットされると、表示されている要素は固定の高さを持ちます。
fixedWidth – (真偽値: 初期値=false) trueにセットされると、表示されている要素は固定の幅を持ちます。
alwaysHide – (真偽値: 初期値=false) trueにセットされると、すべての要素を閉じることができるようになります。falseならば、必ず1つは開いたままになります。
width – (真偽値: 初期値=false) trueにセットされると、アコーディオンに幅変更のエフェクトが加わります。警告:これを動かすには、CSSマスターである必要があります！

戻り値:

(オブジェクト) 新しいAccordionインスタンス。

イベント:

active

(関数) 要素が表示されるときに発生します。

表記:

onActive(toggler, element)

引数:

toggler – (要素) 表示された要素のトグラー。
element – (要素) 表示された要素。

background

(関数) 要素が非表示になるときに発生します。

Signature:

onBackground(toggler, element)

引数:

toggler – (要素) 表示されていた要素のトグラー。
element – (要素) 表示されていた要素。

例:

var myAccordion = new Accordion($$('.togglers'), $$('.elements'), {

    display: 2,
    alwaysHide: true
});

デモ:

Accordion – http://demos.mootools.net/Accordion

Accordionメソッド: addSection

Accordionインスタンスの指定した位置に、新しいセクションを動的に追加します。

構文:

myAccordion.addSection(toggler, element[, pos]);

引数:

toggler – (要素) アコーディオンのセクションを開くトグラーとなる要素。
element – (要素) トグラーがクリックされたときに開く要素。
pos – (整数, オプション) アコーディオン内にセクションが挿入される位置(初期値は最後)

戻り値:

(オブジェクト) このAccordionインスタンス。

例:

var myAccordion = new Accordion($$('.togglers'), $$('.elements'));
myAccordion.addSection('myToggler1', 'myElement1'); // 最後の部分にセクションを追加します。

myAccordion.addSection('myToggler2', 'myElement2', 0); //先頭にセクションを追加します。

Accordionメソッド: display

指定したセクションを開き、他を非表示にします。外部からアコーディオンを操作するのに役立ちます。

構文:

myAccordion.display(index);

引数:

index – (いろいろ) 表示したいセクションのインデックス。または、要素そのもの。

戻り値:

(オブジェクト) このAccordionインスタンス。

例:

// ティッカー風のアコーディオン。子供は家でやらないように。
var myAccordion = new Accordion('.togglers', '.elements', {
    onComplete: function(){

        this.display.delay(2500, this, (this.previous + 1) % this.togglers.length);
    }

});

Assets

高橋文樹 — Mon, 03 Nov 2008 11:14:23 +0000

Hash: Assets

JavaScript、CSS、画像などを動的に読み込み・管理するためのメソッドを提供します。

Assetsメソッド: javascript

documentのheadにscriptタグを挿入し、srcを指定できます。

構文:

var myScript = Asset.javascript(source[, properties]);

引数:

source – (文字列) 読み込むJavaScriptファイルの場所。
properties – (オブジェクト, オプション) インクルードされるscript要素に適用される追加の属性。

戻り値:

(要素) 新しいscript要素。

例:

var myScript = new Asset.javascript('/scripts/myScript.js', {id: 'myScript'});

Assetsメソッド: css

ページにCSSファイルを挿入します。

構文:

var myCSS = new Asset.css(source[, properties]);

引数:

source – (文字列) CSSファイルへのパス。
properties – (オブジェクト) link要素に追加したい属性。

戻り値:

(要素) 新しいlink要素。

例:

var myCSS = new Asset.css('/css/myStyle.css', {id: 'myStyle', title: 'myStyle'});

Assetsメソッド: image

画像を読み込んでから、img要素を返します。

構文:

var myImage = new Asset.image(source[, properties]);

引数:

source – (文字列) 画像ファイルまでのパス。
properties – (オブジェクト) img要素に追加したい属性。onload、onerror、onabortイベントも指定できます。

戻り値:

(要素) 新しいHTML img要素。

例:

var myImage = new Asset.image('/images/myImage.png', {id: 'myImage', title: 'myImage', onload: myFunction});

注意点:

ページに画像は挿入されません。
警告: 返される要素のload・error・abortにaddEventを使わないで下さい。イベントを添附する場合は、propertiesオプションのonload・onerror・onabortに添附してください。

Assetsメソッド: images

複数の画像を配列(文字列として)をあらかじめ読み込んでから、img要素の配列を返します。ページに挿入はされません。

構文:

var myImages = new Asset.images(source[, options]);

引数:

sources – (いろいろ) 画像ファイルへのパスからなる配列。
options – (オブジェクト, オプション) 以下を参照のこと。

オプション:

onComplete

(関数) すべての画像ファイルが読み込まれてから発生します。

表記:

onComplete()

onProgress

(関数) 一つの画像が読み込まれると発生します。

表記:

onProgress(counter, index)

引数:

counter – (数) 読み込まれた画像の数。
index – (数) 読み込まれた画像のインデックス。

戻り値:

(配列) Elementsコレクション。

例:

var myImages = new Asset.images(['/images/myImage.png', '/images/myImage2.gif'], {

    onComplete: function(){
        alert('All images loaded!');
    }
});

Scroller

高橋文樹 — Mon, 03 Nov 2008 11:02:08 +0000

Class: Scroller

Scrollerはオーバーフローを持ったあらゆる要素(windowを含みます)をスクロールさせるクラスです。マウスカーソルがその要素の指定した領域に達したときに発動します。

マウスの動きを検知するために、startメソッドを呼び出す必要があります。

注意点:

Scrollerを使用するには、標準準拠モードでページを作成する必要があります。

構文:

new Scroller(element[, options]);

Implements:

Events, Options

引数:

element – (要素) スクロールさせる要素。
options – (オブジェクト, オプション) Scrollerインスタンスのオプションオブジェクト。

オプション:

area – (数: 初期値=20) 要素をスクロールさせるのに必要な境界線。
velocity – (数: 初期値=1) Windowスクロールのスピードを調整します。

イベント:

change – (関数) マウスが境界線に到達したら発生します。スクロールオフセットに他の値を設定することができます。

表記:

onChange(x, y);

引数:

x – (数) 現在のマウスのx座標。
y – (数) 現在のマウスのy座標。

例:

var myScroller = new Scroller(window, {
    area: Math.round(window.getWidth() / 5)

});

(function(){
    this.stop();
    this.start();

}).periodical(1000, myScroller);

Scrollerメソッド: start

Scrollerインスタンスがマウスの動きを検知しはじめます。

構文:

myScroller.start();

例:

var myScroller = new Scroller('myElement');
myScroller.start();

Scrollerメソッド: stop

Scrollerインスタンスがマウスの動作を検知するのをやめさせます。

構文:

myScroller.start();

例:

var myElement = $('myElement');
var myScroller = new Scroller(myElement);
myScroller.start();

myElement.addEvent('click', myScroller.stop.bind(myScroller)); //ユーザーがクリックしたら、スクロールを停止します。

No related posts.

Slider

高橋文樹 — Mon, 03 Nov 2008 10:52:20 +0000

Class: Slider

2つの要素(ノブとコンテナ)からスライダーを生成します。

注意点:

Sliderを使うには、標準準拠モードでページを作成する必要があります。

構文:

var mySlider = new Slider(element, knob[, options]);

引数:

element – (要素) スライドさせる要素。
knob – (要素) スライドのハンドラとなるノブ要素。
options – (オブジェクト) Sliderをカスタマイズするオプションオブジェクト。

オプション:

snap – (真偽値: 初期値=false) ノブを一番近い値にスナップさせたい場合にはtrueに設定。
offset – (数: 初期値=0) スライド開始時点のノブの相対的なオフセット。
range – (いろいろ: 初期値=false) 数の配列か、false。スライダーが使用する最大値と最小値。
wheel – (真偽値: 初期値=false) マウスホイールでノブを動かしたい場合はtrue。
steps – (数: 初期値=100) スライダーが動く時のステップ数。
mode – (文字列: 初期値=horizontal) スライドのタイプ。’horizontal’か’vertical’。

注意点:

Rangeオプションは数の配列だけを受け付けます。正負の数を使用できます。

Sliderイベント: change

(関数) スライダーの値が代わったときに発生します。

表記:

onChange(step)

引数:

step – (数) スライダーの現在値。

Sliderイベント: onComplete

(関数) ドラッグを終了したときに発生します。

表記:

onComplete(step)

引数:

step – (文字列) スライダーの現在値を示す文字列。

Sliderイベント: tick

(関数) ノブをドラッグしたときに発生します。このイベントはtickの挙動を上書きできます。

表記:

onTick(pos)

引数:

pos – (数) スライダーの現在値。

注意点:

スライダーはノブの場所をスタイリングするときに’tick’イベントを使うようになっています。

戻り値:

(オブジェクト) 新しいSliderインスタンス。

例:

var mySlider = new Slider('myElement', 'myKnob', {

    range: [-50, 50],
    wheel: true,
    snap: true,
    onStart: function(){

        this.borderFx = this.borderFx || this.element.tween('border').start('#ccc');
    },
    onTick: function(pos){

        this.element.setStyle('border-color', '#f00');
        this.knob.setStyle(this.property, pos);
    },
    onComplete: function(){

        this.element.tween('border').start('#000');
    }

});

Sliderメソッド: set

スライダーを指定した位置に動かします。

構文:

mySlider.set(step);

引数:

step – (数) スライダーの移動する位置。

戻り値:

(オブジェクト) このSliderインスタンス。

例:

var mySlider = new Slider('myElement', 'myKnob');
mySlider.set(0);

var myPeriodical = (function(){
    if(this.step == this.options.steps) $clear(myPeriodical);
        this.set(this.step++);

}).periodical(1000, mySlider);

注意点:

Stepは自動的に0からstepsオプションの値の間に制限されます。

SmoothScroll

高橋文樹 — Mon, 03 Nov 2008 10:40:01 +0000

Class: SmoothScroll

すべてのページ内アンカーに自動的にターゲットし、クリックしたときにスムース・スクロールエフェクトを表示します。

注意点:

SmoothScrollを使うにはページを標準準拠モードで作成する必要があります。

継承:

Fx.Scroll

構文:

var mySmoothScroll = new SmoothScroll([options[, win]]);

引数:

options – (オブジェクト, オプション) すべてのオプションに加え、SmoothScrollはあらかじめ定義してあるリンクコレクションを受け付けるリンクオプションを持っています。
win – (オブジェクト, オプション) SmoothScrollのコンテクスト。

オプション:

links – (いろいろ) SmoothScrollが使用する要素や要素への参照。

戻り値:

(オブジェクト) 新しいSmoothScrollインスタンス。

例:

var mySmoothScroll = new SmoothScroll({

    links: '.smoothAnchors',
    wheelStops: false
});

参考情報:

Fx.Scroll

WordPressのテスト環境と本番環境を同期する時に使えるSQL文

Tips

高橋文樹 — Mon, 03 Nov 2008 10:38:37 +0000

Class: Tips

title属性とhref属性をツールチップとして表示します。

クレジット:

Tip.jsのアイデアはBubble TooltipsとAlessandro Fulcitinitiに因っています。

注意点:

Tipsを使うには、標準準拠モードでページを作成する必要があります。

Implements:

Events, Options

Tipsメソッド: constructor

引数:

elements – (いろいろ: オプション) ツールチップを適用したい要素のコレクション、セレクター、単一の要素。
options – (オブジェクト) Tipsインスタンスをカスタマイズするためのオプション。

オプション:

showDelay – (数: 初期値=100) showイベントが発生するまでの待ち時間。
hideDelay – (数: 初期値=100) hideイベントが発生するまでの待ち時間。
className – (文字列: 初期値=null) ツールチップコンテナが持つクラス名。スタイリングに役立ちます。
- 上記のツールチップコンテナ内に入っているツールチップ要素はクラス名として’tip’を持ちます。
- タイトルのクラス名: tip-title
- テキストのクラス名: tip-text
offsets – (オブジェクト: 初期値= {‘x’: 16, ‘y’: 16}) ツールチップのマウスからの距離。
fixed – (真偽値: 初期値=false) trueにセットされていると、ツールチップはマウスに追従しません。

イベント:

show: ツールチップが表示されたときに発生します。
hide: ツールチップが隠れるときに発生します。

例:

HTML:

"http://mootools.net" title="mootools homepage" class="thisisatooltip" />

JavaScript

var myTips = new Tips('.thisisatooltip');

Tipsイベント: show

(関数) ツールチップが表示するときに発生し、デフォルトではツールチップを表示させます。

表記:

onShow(tip)

引数:

tip – (要素) ツールチップ要素。エフェクトを適用したいときに役立ちます。

例:

myTips.addEvent('show', function(tip){

    tip.fade('in');
});

Tipsイベント: hide

(関数) ツールチップが隠れる時に発生し、デフォルトではツールチップを非表示にします。

表記:

onHide(tip)

引数:

tip – (要素) ツールチップ要素。エフェクトを適用するのに役立ちます。

例:

myTips.addEvent('hide', function(tip){
    tip.fade('out');

});

Tipsメソッド: attach

要素にツールチップを添附します。Tipsインスタンスにたくさんの要素を加えたいときに役立ちます。

構文:

myTips.attach(elements);

引数:

elements – (いろいろ) ツールチップを適用したい要素コレクション、セレクター、単一の要素。

戻り値:

(オブジェクト) Tipsインスタンス。

例:

myTips.attach('a.thisisatip');

Tipsメソッド: detach

要素からツールチップを削除します。Tipsインスタンスから要素を削除したいときに役立ちます。

構文:

myTips.detach(elements);

引数:

elements – (いろいろ) ツールチップを適用したい要素コレクション、セレクター、単一の要素。

戻り値:

(オブジェクト) このTipsインスタンス。

例:

myTips.detach('a.thisisatip');

ツールチップのHTML構造

class="options.className"> //オプションに渡したclassNameがここに適用されています。
    class="tip-top">
 //スタイリングに役立つでしょう。

    class="tip">

        class="tip-title">

        class="tip-text">

    

    class="tip-bottom">
 //ここもスタイリングに役立ちます。

ストレージを利用したツールチップ

Element.Storageを使えばツールチップのタイトルと本文をアサインできます。

例:

HTML:

"tip1" href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />

JavaScript

$('tip1').store('tip:title', 'custom title for tip 1');

$('tip1').store('tip:text', 'custom text for tip 1');

注意点:

ストレージを利用すれば、ツールチップのタイトルや本文に要素やhtmlを入れることができます。

Sortables

高橋文樹 — Mon, 03 Nov 2008 09:52:56 +0000

Class: Sortables

リストをドラッグ&ドロップでソートできるインターフェイスを生成します。

引数:

list – (いろいろ) 必須です。ソートできるようにしたいリスト。
- この引数はElementかElements、セレクターです。単一のリスト(またはID)が渡された場合、リストはその中でのみソートできます。
- 複数のリスト間でソートを可能にするには、配列に複数のリストかリストのIDを渡す、あるいは、セレクターを使用してください。以下の例を参照のこと。
options – (オブジェクト) 下のオプションとイベントを参照のこと。

オプション:

constrain – (真偽値: 初期値=false) 親要素に対してのドラッグを制限するかいなか。
clone – (いろいろ: 初期値=false) ドラッグしている間に要素のコピーをマウスカーソルの下に表示するか否か。コピーとして使われる要素を返す関数としても使えます。関数はmousedownイベント、要素、リストを引数として受け取ります。
handle – (文字列: 初期値=false) それぞれのソートアイテムをソートするためのハンドラを指定するためのセレクター。なにも見つからなければ、ソートアイテム自身が自分のハンドラとなります。
opacity – (整数: 初期値=1) ソートアイテムを内包している要素の透明度。
revert – (いろいろ: 初期値=false) ソートした後、最後に収まった場所にスライドエフェクトを適用するか否か。オブジェクトを渡した場合、それはrevertエフェクトの追加オプションとして使われます。
snap – (整数: 初期値=4) ソートをはじめるために、ソートアイテムをドラッグしなくてはならないピクセル数。

イベント:

start – ソートが開始されたときに発生します。
sort – ソートアイテムがリストの新しい場所に挿入されたときに発生します。
complete – ソートアイテムのドラッグが終了したときに発生します。

例:

var mySortables = new Sortables('list-1', {

    revert: { duration: 500, transition: 'elastic:out' }
});
//新しいSortableインスタンスをID'list-1'に作成し、revertエフェクトオプションを設定します。

var mySortables = new Sortables('#list-1, #list-2', {
    constrain: true,
    clone: false,
    revert: true

});
//新しいSortableインスタンスを'list-1'と'list-2'に生成し、constrainオプションをtrueにセットします。
//これで、ソートアイテムを別のリストにドラッグすることはできません。

var mySortables = new Sortables('#list-1, #list-2, #list-3');

//新しいSortableインスタンスをID'list-1'とID'list-2'と'list-3'に生成します。
(end)

Sortablesメソッド: attach

ソートを可能にするハンドラにマウスイベントリスナーを添附します。

構文:

mySortables.attach();

戻り値:

(オブジェクト) このSortablesインスタンス。

Sortablesメソッド: detach

ハンドラからマウスリスナーイベントを削除し、ソートできなくします。

構文:

mySortables.detach();

戻り値:

(オブジェクト) このSortablesインスタンス。

Sortablesメソッド: addItems

すでに存在するSortablesインスタンスにアイテムを追加します。

構文:

mySortables.addItems(item1[, item2[, item3[, ...]]]);

引数:

items – (いろいろ) Array.flattenが引数に適用されるので、単一の要素、複数の要素、要素の配列、さらにそれらをいくらでも組み合わせたものを、このメソッドに渡せます。

戻り値:

(オブジェクト) このSortablesインスタンス。

例:

var mySortables = new Sortables('#list1, #list2');

var element1 = new Element('div');

var element2 = new Element('div');
var element3 = new Element('div');

$('list1').adopt(element1);
$('list2').adopt(element2, element3);
mySortables.addItems(element1, element2, element3);

注意点:

Sortablesインスタンスが複数のリストを持っているとき、ソートアイテムはリストに自動的に挿入されません。
まず適切なリストに対して要素を挿入し、それからaddItemsメソッドを呼び出してください。

参考情報:

Sortables:removeItems, Sortables:addLists

Sortablesメソッド: removeItems

Sortablesインスタンスから1つ以上のアイテムを削除します。

構文:

mySortables.removeItems(item1[, item2[, item3[, ...]]]);

引数:

items – (いろいろ) Array.flattenが引数に適用されるので、単一の要素、複数の要素、要素の配列、さらにそれらをいくらでも組み合わせたものを、このメソッドに渡せます。

戻り値:

(要素) 削除された要素からなる要素コレクション。

例:

var mySortables = new Sortables('#list1, #list2');

var element1 = $('list1').getFirst();

var element2 = $('list2').getLast();

mySortables.removeItems(element1, element2).destroy(); //要素はリストから取り除かれ、削除されました。

注意点:

ソートアイテムはリストから自動的に削除されず、単にソートができなくなるだけです。
はじめにソートアイテムに対してremoveItemsを適用し、次にリストコンテナから削除してください。

参考情報:

Sortables:addItems, Sortables:removeLists

Sortablesメソッド: addLists

すでに存在するSortablesインスタンスにアイテムを追加し、新しいリストと古いリストの間でソートができるようにします。

構文:

mySortables.addLists(list1[, list2[, list3[, ...]]]);

引数:

lists – (いろいろ) Array.flattenが引数に適用されるので、単一の要素、複数の要素、要素の配列、さらにそれらをいくらでも組み合わせたものを、このメソッドに渡せます。

戻り値:

(オブジェクト) このSortablesインスタンス。

例:

var mySortables = new Sortables('list1');
mySortables.addLists($('list2'));

注意点:

このメソッドをより高度に使えば、1方向ソートのようなことが行えます。

参考情報:

Sortables:removeLists, Sortables:addItems

Sortablesメソッド: removeLists

リスト全体をSortablesインスタンスから取り除き、リスト間でのソートをできなくします。

構文:

mySortables.removeLists(list1[, list2[, list3[, ...]]]);

引数:

lists – (いろいろ) Array.flattenが引数に適用されるので、単一の要素、複数の要素、要素の配列、さらにそれらをいくらでも組み合わせたものを、このメソッドに渡せます。

戻り値:

(要素) 削除されたリストからなる要素コレクション。

例:

var mySortables = new Sortables('#list1, #list2');
mySortables.removeLists($('list2'));

参考情報:

Sortables:addLists, Sortables:removeItems

Sortablesメソッド: serialize

Sortablesインスタンス内のリストアイテムの順番を取得します。
リスト一つに対し、要素の順番を含んだ配列を返します。
複数のリストがある場合、それぞれのリストの順番を配列にまとめて返します。

引数:

index – (いろいろ, オプション) 真偽値falseか整数(シリアライズするリストのインデックス)。すべてのリストをシリアライズする場合は、省略するか、falseを渡します。
modifier – (関数, オプション) Sortablesのデフォルトの出力を上書きする関数。詳しくは以下を参照のこと。

例:

mySortables.serialize(1);
//2番目のリストをシリアライズして返します(配列は0ベースだということに注意...);
//['item_1-1', 'item_1-2', 'item_1-3']

mySortables.serialize();
//すべてのリストをシリアライズして、入れ子の配列にして返します。一つしかない場合は、そのリストの順番だけを返します。

/*[['item_1-1', 'item_1-2', 'item_1-3'],
  ['item_2-1', 'item_2-2', 'item_2-3'],
  ['item_3-1', 'item_3-2', 'item_3-3']]*/

mySortables.serialize(2, function(element, index){
    return element.getProperty('id').replace('item_','') + '=' + index;

}).join('&');
//配列を'&'で結合して、リスト3の要素のIDとその位置を結合した文字列を返します。
//'3-0=0&3-1=1&3-2=2'

【目指せePub出版】Webkitでtext-align:justifyに挑戦する

Hash.Cookie

高橋文樹 — Mon, 03 Nov 2008 09:11:58 +0000

JSON形式を利用して、ハッシュをクッキーとして保存・読み取りできます。

継承:

Hash

構文:

var myHashCookie = new Hash.Cookie(name[, options]);

引数:

name – (文字列) クッキーのキー(名前)。
options – (オブジェクト) すべてのCookieオプションに加え、autoSaveオプションを指定できます。

オプション:

autoSave – (真偽値: 初期値=true) すべての操作時にクッキーを保存するかを決めるオプション。

戻り値:

(オブジェクト) 新しいHash.Cookieインスタンス。

例:

var fruits = new Hash.Cookie('myCookieName', {duration: 3600});
fruits.extend({

    'lemon': 'yellow',
    'apple': 'red'
});
fruits.set('melon', 'green');
fruits.get('lemon'); // yellow

// ... 別のページにて。 ... 値が自動的に読み込まれます。

var fruits = new Hash.Cookie('myCookieName', {duration: 365});
fruits.get('melon'); // green

fruits.erase(); // クッキー削除

注意点:

Hash.Cookieインスタンスでは、すべてのHashメソッドを使うことができます。もしautoSaveオプションがセットされていれば、すべてのメソッドは保存されたクッキーの中に出力されます。
クッキーには4kb(4096バイト)という制限があります。したがって、Hashのサイズには充分に注意してください。
Hash.Cookieで行われたすべてのHashメソッドは、Cookieのサイズを超えない限り、Hashメソッドの戻り値を保存します。超えてしまった場合は、falseを返します。
大きいサイズのクッキーを使う予定があるならば、autoSaveをオフにすることを検討してください。そして、save()のステータスに都度留意するようにしてください。
新しいインスタンスを生成すると、自動的にクッキーからデータを読み取ってHashに変換します。フーッ、クールでしょう？

参考情報:

Hash

クッキーにハッシュを保存します。ハッシュが空ならば、クッキーを削除します。

構文:

myHashCookie.save();

戻り値:

(真偽値) JSON文字列が長すぎる(4kb以上)場合は、falseを返します。それ以外はtrueです。

例:

var login = new Hash.Cookie('userstatus', {autoSave: false});

login.extend({
    'username': 'John',
    'credentials': [4, 7, 9]

});
login.set('last_message', 'User logged in!');

login.save(); // 最後にHashを保存。

クッキーを読み取り、Hashに変換します。

構文:

myHashCookie.load();

戻り値:

(オブジェクト) このHash.Cookieインスタンス。

例:

var myHashCookie = new Hash.Cookie('myCookie');

(function(){
    myHashCookie.load();
    if(!myHashCookie.length) alert('Cookie Monster must of eaten it!');

}).periodical(5000);

注意点:

投票などに役立ちます。

Group

高橋文樹 — Mon, 03 Nov 2008 09:00:08 +0000

Class: Group

このクラスはクラスやイベントをグループ化するためのものです。Groupに添附されたイベント、はグループの要素に添附されたイベントがすべて発生したときに発生します。

構文:

var myGroup = new Group(class[, arrays[, class2[, ... ]]]);

引数:

クラスインスタンスや、クラスインスタンスを含む配列などを幾つでも。

戻り値:

(オブジェクト) 新しいGroupインスタンス。

例:

var xhr1 = new Ajax('data.js', {evalScript: true});

var xhr2 = new Ajax('abstraction.js', {evalScript: true});
var xhr3 = new Ajax('template.js', {evalScript: true});

var group = new Group(xhr1, xhr2, xhr3);
group.addEvent('complete', function(){

    alert('All Scripts loaded');
});

xhr1.request();
xhr2.request();
xhr3.request();

Groupメソッド: addEvent

クラスインスタンスのイベント集合に対してイベントを添附します。

構文:

myGroup.addEvent(type, fn);

引数:

type – (文字列) 添附するイベント名(e.g. ‘complete’)。
fn – (関数) 全てのインスタンスのイベントが発生したときに実行するコールバック関数。

戻り値:

(オブジェクト) このGroupインスタンス。

例:

var myElements = $('myForm').getElements('input, textarea, select');
myElements.addEvent('click', function(){

    alert('an individual click');
});

var myGroup = new Group(myElements);
myGroup.addEvent('click', function(){

    alert('all form elements clicked');
});

参考情報:

Color

高橋文樹 — Mon, 03 Nov 2008 08:50:19 +0000

Class: Color

新しいColorクラスを生成します。カラーを指定するメソッドを持った配列です。

構文:

var myColor = new Color(color[, type]);

引数:

color – (いろいろ) 色を表現する文字列か配列。
type – (文字列, オプション) 作りたい色のタイプを表す文字列。

Color:

カラー値には3つの典型的な形式があります:文字列、RGB、HSBです。文字列の表記に関しては、Element:setStyleを見てください。

例:

文字列による表記:

'#fff'

RGBとHSBの表記:

[255, 255, 255]
//または:
[255, 255, 255, 1] //(不透明度)

戻り値:

(配列) 新しいColorインスタンス。

例:

var black = new Color('#000');

var purple = new Color([255,0,255]);

注意点:

HSBカラー値を使うには、第2引数を指定する必要があります。

Colorメソッド: mix

Colorを使って2色以上を混ぜ合わせます。

構文:

var myMix = myColor.mix(color[, color2[, color3[, ...][, alpha]);

引数:

color – (いろいろ) Colorを使って混ぜたい色を1色以上。16進数かRGB表記にすること。
alpha – (数, オプション) 最後の引数がリテラル数ならば、混ぜる色の総量として扱われます。

戻り値:

(配列) 新しいColorインスタンス。

例:

// 黒に白10%、紫10%を混ぜます。
var darkpurple = new Color('#000').mix('#fff', [255, 0, 255], 10);

$('myDiv').setStyle('background-color', darkpurple);

Colorメソッド: invert

色を反転させます。

構文:

var myInvert = myColor.invert();

戻り値:

(配列) 新しいColorインスタンス。

例:

var white = new Color('#fff');

var black = white.invert();

Colorメソッド: setHue

Colorの色相を修正して、新しいインスタンスを返します。

構文:

var hue = myColor.setHue(value);

引数:

value – (数) セットする色相。

戻り値:

(配列) 新しいColorインスタンス。

例:

var myColor = new Color('#f00');

var myElement = $('myElement');

(function(){
    myElement.setStyle('color', myColor.setHue(myColor.hsb[0]++)));

}).periodical(250);

Colorメソッド: setSaturation

Colorの彩度を変更して、新しいインスタンスを返します。

構文:

var saturate = myColor.setSaturation(percent);

引数:

percent – (数) セットする彩度のパーセンテージ。

戻り値:

(配列) 新しいColorインスタンス。

例:

var myColor = new Color('#f00');
$('myElement').addEvent('mouseenter', function(){

    this.setStyle('background-color', myColor.setSaturation(myColor.hsb[1]++));

});

Colorメソッド: setBrightness

Colorの明度を変更して、新しいインスタンスを返します。

構文:

var brighten = myColor.setBrightness(percent);

引数:

percent – (数) セットする明度のパーセンテージ。

戻り値:

(配列) 当たらしColorインスタンス。

例:

var myColor = new Color('#000');
$('myElement').addEvent('mouseenter', function(){

    this.setStyle('background-color', myColor.setBrightness(myColor.hsb[2]++));

});

Function: $RGB

新しいRGBカラーを生成するショートハンド関数。

構文:

var myColor = $RGB(r, g, b);

引数:

r – (数) 0から255の赤の値。
g – (数) 0から255の緑の値。
b – (数) 0から255の青の値。

戻り値:

(配列) 新しいColorインスタンス。

例:

var myColor = $RGB($random(0,255), $random(0,255), $random(0,255));

Function: $HSB

新しいHSBカラーを生成するショートハンド関数。

構文:

var myColor = $HSB(h, s, b);

引数:

h – (数) 0から359の色相。
s – (数) 0から100の彩度。
b – (数) 0から100の明度。

戻り値:

(配列) 新しいColorインスタンス。

例:

var myColor = $HSB(50, 50, 100);

Native: Array

Arrayのプロパティを含みます。

参考情報:

MDC Array

Arrayメソッド: rgbToHsb

RGB配列をHSB配列に変換します。

構文:

var myHSB = myRGBArray.rgbToHsb();

戻り値:

(配列) HSB値を持つ配列。

例:

var myHSB = [255, 0, 0].rgbToHsb(); //戻り値 [0, 100, 100].

Arrayメソッド: hsbToRgb

HSB配列をRGB配列に変換します。

構文:

var myHSB = myRGBArray.hsbToRgb();

戻り値:

(配列) RGB値を持つ配列。

例:

var myRGB = [0, 100, 100].hsbToRgb(); //myRGB = [255, 0, 0]

No related posts.