MooTools

MooTools Core 1.3 リリース!新機能・変更点まとめ

2010/10/12 MooTools No comments

まだ私も良く分かってないので調べながらメモっていくつもりで。

1.3がでたので1.2で書いたプラグインもバージョンうpしなきゃ!と思っても慌てる必要はnothing!
下位互換機能がついたCore(width Compatibilityなやつ)を選べば共存出来る。

Slick

セレクタエンジンSlickはMooToolsのファミリープロジェクト。だってお。
1.3でCoreに内臓されてCSSのセレクタを使用したDOM操作がパワーアップ。

Create Element

1.2.xで要素を作るときのソース:

new Element("div", {"id": "mootools", "class": "moo cow","title":"Sample", "text":"MooTools!"});

Slickで書くとこうなる:

new Element("div#mootools.moo.cow[title=Sample]");

Result:

<div id="mootools" title="Sample" class="moo cow">MooTools?</div>

ZenCodingみたいな感じだけど作れる要素は1つだけです。
1行で済むのは楽っちゃ楽だけどOOPライクな前者の方が見やすくて好きだな。

(さらに…)

[MooTools] DataTree Plugin

2010/10/06 MooTools No comments

左から右への水平方向にツリー形式で並べるクラスです。
初期は定義リストだけど使う要素は何でもいい。

DataTree ScreenShot

View Demo

(さらに…)

[MooTools] border-radiusの簡単なIE対策

2010/08/27 MooTools No comments , ,

角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、
もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。

new IERadius($("main"));

角丸にしたい対象を指定すると、その要素内に次のようなspanが自動作成される。

<span class="radiusFix main-tLeft" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; left: 0px;"></span>
<span class="radiusFix main-tRight" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; right: 0px;"></span>
<span class="radiusFix main-bLeft" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; left: 0px;"></span>
<span class="radiusFix main-bRight" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; right: 0px;"></span>

コーナーだけの画像を作って、
radius_sprite

スタイルシートで背景指定する。

html {
	background-color:#113A57;
}
#main {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
#main{
	background-color:#fff;
}

.radiusFix {
	background:url(../images/radius_sprite.png) no-repeat left top;
}

.main-tLeft{background-position:0px 0;}
.main-tRight{background-position:-5px 0;}
.main-bRight{background-position:-15px 0;}
.main-bLeft{background-position:-20px 0;}

指定した親要素にはposition:relativeが付与される。
positionを使うのでIE6でCSSのバグが発生する事がある。(floatが中にある要素に使った場合など)

左:使用後 右:使用前
radius_sprite_after

(さらに…)

[HTML5API] Web Workersで手抜きツール作ってみた

2010/06/22 MooTools No comments

マイコミジャーナルにあるHTML5 APIのWeb Workersについての解説見て作ってみたものを、
最近サービス開始されたjsdo.itにうpしてみたよ。
jsdo.itはまだ開始まもなく、研究に余念の無い変態ユーザーの密度が計り知れない強さなので必見だと思う 😀

とりあえずWeb Workersっていうのが使ってみたかったんだけど、負荷の軽減具合を試すようなサンプルじゃ面白くないので、
ライブラリファイルにあるHTMLソースを組み合わせてベースになるソースを組む手抜きツールを作ってみた。
連想配列として設定済みの値を並べるだけでも量が増えればそれなりに重くなると思うし。

HTMLSourceBuilder

読み込んでるワーカーファイルライブラリファイルを編集すれば出力をカスタマイズできる。

(さらに…)

[MooTools] Fx.SmoothScroll – not add the address bar URL’s hash

2010/06/18 MooTools No comments ,

Dojo触ってて思い出した事を解決。

MooTools MoreのFx.SmoothScrollはスクロールが終了した時にアドレスバーのURLにハッシュ(#top など)を追加しますが、
少しカスタマイズすればこれを追加しないように変更することが出来ます。

以下は未圧縮ソースです。

var SmoothScroll = Fx.SmoothScroll = new Class({

	Extends: Fx.Scroll,

	initialize: function(options, context){
		context = context || document;
		this.doc = context.getDocument();
		var win = context.getWindow();
		this.parent(this.doc, options);
		this.links = $$(this.options.links || this.doc.links);
		this.hash = this.options.hash; // Add this line
		var location = win.location.href.match(/^[^#]*/)[0] + '#';
		this.links.each(function(link){
			if (link.href.indexOf(location) != 0) {return;}
			var anchor = link.href.substr(location.length);
			if (anchor) this.useLink(link, anchor);
		}, this);
		if (!Browser.Engine.webkit419 && this.hash) { // Add the "&& this.hash"
			this.addEvent('complete', function(){
				win.location.hash = this.anchor;
			}, true);
		}
	},

	useLink: function(link, anchor){
		var el;
		link.addEvent('click', function(event){
			if (el !== false && !el) el = document.id(anchor) || this.doc.getElement('a[name=' + anchor + ']');
			if (el) {
				event.preventDefault();
				this.anchor = anchor;
				this.toElement(el).chain(function(){
					this.fireEvent('scrolledTo', [link, el]);
				}.bind(this));
				link.blur();
			}
		}.bind(this));
	}
});

変更箇所はコメントをつけた2箇所だけ。
この修正によりhashオプションで表示/非表示の切り替えが出来るようになります。

new SmoothScroll({hash:true}); //the hash appear on the address bar 

ハッシュが全く必要ないという場合は以下をコメントアウトしてもいいです。

win.location.hash = this.anchor;

圧縮ソース:

var SmoothScroll=Fx.SmoothScroll=new Class({Extends:Fx.Scroll,initialize:function(b,c){c=c||document;this.doc=c.getDocument();var d=c.getWindow();
this.parent(this.doc,b);this.links=$$(this.options.links||this.doc.links);this.hash=this.options.hash;var a=d.location.href.match(/^[^#]*/)[0]+"#";this.links.each(function(f){if(f.href.indexOf(a)!=0){return;
}var e=f.href.substr(a.length);if(e){this.useLink(f,e);}},this);if(!Browser.Engine.webkit419&&this.hash){this.addEvent("complete",function(){d.location.hash=this.anchor;
},true);}},useLink:function(c,a){var b;c.addEvent("click",function(d){if(b!==false&&!b){b=document.id(a)||this.doc.getElement("a[name="+a+"]");}if(b){d.preventDefault();
this.anchor=a;this.toElement(b).chain(function(){this.fireEvent("scrolledTo",[c,b]);}.bind(this));c.blur();}}.bind(this));}});