mootools
Many of you probably already know this but I like to consider myself a bit of a JavaScript chameleon. If you know that then you probably know I'm a MooTools fanatic that periodically dabbles with jQuery. I'm happy to announce that I was able to join Elijah Manor and Ralph Whitbeck on the jQuery podcast this past week to talk jQuery, MooTools, and web development in general. Head on over to the jQuery blog for more information or iTunes to grab the podcast.
你們中的許多人可能已經知道這一點，但是我想把自己當作JavaScript變色龍。 如果您知道這一點，那麼您可能知道我是MooTools的狂熱者，它定期使用jQuery。 我很高興地宣布，上周我能夠加入Elijah Manor和Ralph Whitbeck的jQuery播客中，討論jQuery，MooTools和一般的Web開發。 請訪問jQuery博客以獲取更多信息，或訪問iTunes以獲得播客 。
As an extension of my podcast appearance, I wanted to share a few code snippets to make your introduction to MooTools or jQuery easier.
作為我播客外觀的擴展，我想分享一些代碼片段，以使您對MooTools或jQuery的介紹更加容易。
Did you know that you can use jQuery and MooTools within the same page? It's easy to!
您是否知道可以在同一頁面中使用jQuery和MooTools？ 很容易！
<script type="text/javascript" src="moo1.2.4.js"></script><script type="text/javascript" src="jquery-1.4.js"></script><script type="text/javascript">window.addEvent('domready',function() { //moo stuff $('p').css('border','1px solid #fc0'); //jquery});</script>
Prefer to use jQuery's selector engine within MooTools? No problem -- here's how:
更喜歡在MooTools中使用jQuery的選擇器引擎？ 沒問題-方法如下：
//just as reader "Ryan" mentioned....Window.$$ = function(selector){ return new Elements(new Sizzle(selector));}
Link nudging is a classy, subtle effect that makes your websites more dynamic.
連結輕推是一種優雅的，微妙的效果，可讓您的網站更加動態。
/* jquery */$.fn.nudge = function(params) { //set default parameters params = $.extend({ amount: 20, duration: 300, property: 'padding', direction: 'left', toCallback: function() {}, fromCallback: function() {} }, params); //For every element meant to nudge... this.each(function() { //variables var $t = $(this); var $p = params; var dir = $p.direction; var prop = $p.property + dir.substring(0,1).toUpperCase() + dir.substring(1,dir.length); var initialValue = $t.css(prop); /* fx */ var go = {}; go[prop] = parseInt($p.amount) + parseInt(initialValue); var bk = {}; bk[prop] = initialValue; //Proceed to nudge on hover $t.hover(function() { $t.stop().animate(go, $p.duration, '', $p.toCallback); }, function() { $t.stop().animate(bk, $p.duration, '', $p.fromCallback); }); }); return this;};/* jquery usages */$(document).ready(function() { /* usage 1 */ $('#nudgeUs li a').nudge(); /* usage 2 */ $('#nudgeUs2 li a').nudge({ property: 'margin', direction: 'left', amount: 30, duration: 400, toCallback: function() { $(this).css('color','#f00'); }, fromCallback: function() { $(this).css('color','#000'); } });});/* mootols link nudge */window.addEvent('domready',function() { $$('#nudges a').addEvents({ 'mouseenter': function() { this.tween('padding-left',20); }, 'mouseleave': function() { this.tween('padding-left',0); } });});
These bookmarklets will allow you to highlight text on a page and search the jQuery or MooTools websites to learn more about the phrase.
這些書籤使您可以突出顯示頁面上的文本，並搜索jQuery或MooTools網站以了解有關該短語的更多信息。
jQuery BookmarkletjQuery書籤 MooTools BookmarkletMooTools書籤
The following MooTools snippet allows you to use jQuery-style syntax for event listening.
以下MooTools片段允許您使用jQuery樣式的語法進行事件偵聽。
//hash the element.natives so we can do stuff with itvar hash = new Hash(Element.NativeEvents);//remove items that need to be replaced, add their replacementshash.erase('mouseover').erase('mouseout').erase('DOMMouseScroll');hash.include('mouseenter',1).include('mouseleave',1);//initialize thisvar eventHash = new Hash({});//for every event type, add to our hashhash.getKeys().each(function(event){ eventHash[event] = function(fn) { this.addEvent(event,fn); return this; }});//make it happenElement.implement(eventHash);
Here are a few other MooTools and jQuery tutorials you may like:
這是您可能喜歡的其他一些MooTools和jQuery教程：
Isn't the JavaScript community great? MooTools FTW!
JavaScript社區不是很好嗎？ MooTools FTW！
翻譯自: https://davidwalsh.name/jquery-podcast
mootools