ラベル mootools の投稿を表示しています。 すべての投稿を表示
ラベル mootools の投稿を表示しています。 すべての投稿を表示

2013/06/25

[mootools] audioの再生終了イベントを使えるようにする

audioタグの再生が終わった時点で、ボタンの表示を変える処理をした。
//通常なら
var audio = $('audio-element')
audio.addEvent('ended', function(){
 //再生終了時の処理
});
ただaddEventしただけだと効かない。
//イベントを有効にする必要がある
Element.NativeEvents.ended = 2
clickとかchangeなんかの一般的なイベントはなにもしなくても使えるんだけど、html5なんかの新しいイベントはデフォルトでは無効になっている。
ちょっと面倒。

自分独自のイベントも登録できる。
//イベントを有効にする必要がある
Element.NativeEvents.unko = 2;
elem.fireEvent('unko');
参考:[mootools] cssでのアニメーションtransitionEndがイベント登録できない

 そろそろMooToolsの限界を感じつつある…

2013/02/12

[MooTools] アニメーション中にIE7でエラーが起きる


IE7はサポート対象外だったこともあり、大した調査はしていないが、一応報告
MooToolsのTweenでtransitionをback:outにしていたら、恐らくアニメーションで変更する値の計算部分でエラーが起きたらしく、アニメーションの途中でいきなり止まってしまう問題があった。
起きていたのはIE7だけ。
今回はtransitionの種類を変更するだけで良かったので、原因は調べてない。
もし理由が判明しないけどtweenあたりでエラーが出る場合は試してみては。

2013/01/30

[MooTools] MooTools1.4でもスクロールバーがカスタマイズできるプラグイン


MooTools1.4ではスクロールバーをカスタマイズできる系のプラグインはなかった(はず)
jQueryのjScrollPaneっていう有名なプラグインを羨ましげな目で見てたけど、もう大丈夫。

Scrollbars for MooTools 1.4

アニメーションとかはまだなくて、IEだと普通のスクロールバーが出るっぽいけど…
それでもありがたい。

自分でカスタマイズして、その機能を追加してもらうのもいいかもな。

他にはこんなのもあった
ScrollerBar
やっぱりスクロール時のアニメーションしなーい。

2012/08/06

[MooTools] delegateしているイベントをfireEventで呼び出したい

fireEventってのはイベントを実行させる関数。ある要素に登録されたイベントを他の要素からも使いたいって時なんかに使う
$('elem').addEvent('click', function(){
 //イベント処理
})
$('elem2').addEvent('click', function(){
 //#elemのclickイベントが実行される
 $('elem').fireEvent('click');
})

deletegateしている場合
//delegateでイベント登録
$('elem').addEvent('click:relay(.child)', function(event, target){
 //イベント処理
 //targetに何かしたりして
});

$('elem2').addEvent('click', function(event){
 //targetになる要素を取得する
 var target =  $('elem').getElement('.child'); //elem要素の中の.child要素を取得する
 //2番目の引数でイベント登録時の引数、event, targetを渡す
 $('elem').fireEvent('click:relay(.child)', [event, target]);
});

2012/08/03

[MooTools] storeで保存した値はどこまで取得できるのん?

MooToolsのstoreはjQueryでいうdataみたいなやつで、好きな名前で何かを格納できる。
んで、それは元の要素に格納されてるのか、それとも今回使っている変数にだけ格納かわからなかったので調べてみた。

結果は…格納出来てた 良かった良かった オブジェクトを格納した変数は参照だから当たり前なのか?

2012/07/25

[MooTools] 今日覚えた機能のメモ


今さら覚えてどうすんのという疑問を無視して、メモメモ
※各コードは公式のドキュメントのものです

Array.invoke(メソッド名[, 引数, 引数....])
配列の中の各要素に引数として渡したメソッド名を実行させる
var foo = [4, 8, 15, 16, 23, 42];
var bar = foo.invoke('limit', 10, 30);  //bar is now [10, 10, 15, 16, 23, 30]

Array.include(art)
引数で渡したものを配列に追加する。
すでに入っていた場合は何もしない
['Cow', 'Pig', 'Dog'].include('Cat'); // returns ['Cow', 'Pig', 'Dog', 'Cat']
['Cow', 'Pig', 'Dog'].include('Dog'); // returns ['Cow', 'Pig', 'Dog']

Function.bind
function myFunction(){
    // Note that 'this' here refers to window, not an element.
    // the function must be bound to the element we want to manipulate.
    this.setStyle('color', 'red');
};
var myBoundFunction = myFunction.bind(myElement);
myBoundFunction(); // makes myElement's text red


tween.start(***).start(****).start(****)
アニメーションを連続して実行する

2012/07/24

[MooTools]mootoolsを使うのに参考になるページまとめ


もはや虫の息なんじゃないの?と不安になりながらもなぜかMooTools使ってます。
自分以外の人がコードを触るような場合は、舌打ちされそうなのでjQueryにしてます。

jQueryに比べてぐっとすくない参考ページのまとめ

MooTools公式ドキュメント
http://mootools.net/docs/core

高橋文樹さんという方が翻訳されたドキュメントの日本語版
http://takahashifumiki.com/web/mootools/152/
※バージョン1.2の頃のドキュメントのようなので、ちょっと古いです。

WebTecNote
http://tenderfeel.xsrv.jp/category/mootools/
日本の方。数少ない日本語のチュートリアルがある

sharedhat
http://sharedhat.com/
http://mootips.org/
MooToolsのプラグインなんかを作ったりしてる方

straightline
http://straightline.jp/
数少ない、仕事でバンバンMooTools使ってる方
解説なんかはないけど、コードを見て参考に。

Make your MooTools Code Shorter, Faster, and Stronger(※英語)
意訳:テメーの股間のMooToolsをもっと強くしてやるぜ!
http://net.tutsplus.com/tutorials/javascript-ajax/make-your-mootools-code-shorter-faster-and-stronger/
nettutsの2年前の記事。
画像も表示されなくなってるからなかったコトにされてるのかも。
具体的に複数のClassをImplementしてるサンプルは初めて見た

2012/07/17

[MooTools] Fxにあるlinkオプションの挙動

MooToolsのFxにはlinkってオプションがあるんだけど、よくわかってなかった。 英語力あれば簡単だったんだろうけど。

linkオプションにはignore, cancel, chainの3種類あって、アニメーション中にイベントが起きた際の処理方法を決める
ignore -> 無視
cancel -> 進行中の動作を止めて、新しく始動
chain -> 進行中の動作が終わった後に始動
って感じでした

2012/06/07

[Mootools] ウィンドウのスクーロール量を取得する

ライブラリを使わずにスクロール量を取得しようとして、ブラウザ間の違いに苦しんだりするのでメモ
//縦のスクロール量
window.getScrollTop()
//横のスクロール量
window.getScrollLeft()
参考:
縦のスクロール量を取得する
横のスクロール量を取得する

2012/03/27

[mootools] cssでのアニメーションtransitionEndがイベント登録できない



mootoolsだとcssのtransition終了時のイベントが登録できなかった。
//イベントを登録できない
$(id).addEvent('webkitTransitionEnd', function(){
 //-webtkit-transition終了時のイベント
});

//対処法addEventListnerで登録する
$(id).addEventListner('webkitTransitionEnd', function(){
 //-webtkit-transition終了時のイベント
});
うーん、なんでだろう。


--add [2012/8/8]

登録方法わかった!
Element.NativeEventsに登録すると使えるようになる!

Element.NativeEvents.webkitTransitionEnd= 2;

参考:
[MooTools] カスタムイベントを実装する方法
公式ドキュメント

2012/03/01

[mootools] 位置・座標取得まとめ

//要素までスクロールする距離を返す
elem.getScroll();

//要素のオフセットを返す
elem.getPosition();
//引数に要素を渡すと渡した要素からの相対的な距離が返ってくる

//要素の座標を返す
elem.getCoordinates();
//引数に要素を渡すと渡した要素からの相対的な距離が返ってくる

2011/12/21

[Mootools] 要素の高さ、幅を取得する


いつも忘れてしまうのでメモ
Mootoolsで高さなどのサイズを取得する方法
elem.getSize().y //高さ
elem.getSize().x //幅

2011/11/18

MooToolsでAjaxする方法

MooToolsでAjaxをするにはRequestを使う。
//まずは設定
var req = new Request({ 
 url: "/sample/dir" ,
 onSuccess: function(res){
  //成功時
 },
 onFailure: function(xhr){
  //失敗時
 }
});

//通信開始
req.send();

■画像、JavaScrip、cssを動的に読み込む
JavaScript、css、画像などを動的に読み込みたい場合はAssetsというのもある。
これはmootools-coreには入っていないのでmoreを別途入れないと使えない
こっちはXMLHttpRequestで通信するのではなくて、エレメントを作ってる
//取得するだけなのでnewしない。
//image要素が返ってくる
var myImage = Asset.image(画像へのパス);

//script要素が返ってくる
var myJs = Asset.javascript(ファイルへのパス);

//link要素が返ってくる
var myJs = Asset.css(ファイルへのパス);


参考:
MooTools基礎文法最速マスター
Assetsメソッド: javascript

2011/10/07

[MooTools] 親要素・子要素・兄弟要素 取得方法まとめ

MooToolsでの要素取得方法

var $elem = $(id);




■親要素

1つだけ。条件が指定されていたら、さかのぼって条件に合う要素を取ってくる
$elem.getParent(条件);

全部取得 。条件が指定されていたら、さかのぼって条件に合う要素を取ってくる 
$elem.getParents(条件);




■子要素

1つだけ取得
$elem.getElement(条件);

IDで指定

$elem.getElementById(id)

複数取得
$elem.getElements(条件);


直下の子要素のみ
$elem.getChildren(条件);

最初の子要素
$elem.getFirst(条件);


最後の子要素
$elem.getLast(条件);



■兄弟要素

すぐ次の要素
$elem.getPrevious(条件);

後ろにある兄弟要素すべて
$elem.getAllPrevious(条件);

すぐ前の要素
$elem.getNext(条件);


前にあるもの兄弟要素すべて
$elem.getAllNext(条件);

参考:
MooTools ドキュメント日本語訳

2011/05/19

mootoolsでアニメーション開始時、終了時に処理をする

mootoolsのアニメーション、tweenやmorphのアニメーションの始まる直前やアニメーションが終わった直後になにか処理を動かしたりするにはonStart, onCompleteを使う。

var tw = new Fx.tween(id, {
  duration: 100,
  onStart: function(){
    //アニメーション開始直前の処理
  },
  onComplete: function(){
    //アニメーション終了直後時の処理
  }
});

参考
[mootools]スクロールに追随させる - mooFollow.js