میتوانید به صفحه http://mootools.net/more بروید  و با انتخاب هر کدام از چک باکس ها (هم ردیف موارد زیر در این صفحه قرار گرفته است)

و  فشردن دکمه دانلود آنها را بصورت یکپارچه در یک فایل جاوا اسکریپت واحد دریافت نمایید

برای راحتی کار شما ما ترجمه فارسی انتخاب های آن صفحه را اینجا برایتان قرار داده ایم

در پست بعدی روش نصب آن را نیز به شما آموزش خواهیم داد

توجه داشته باشید که دانلود آخرین نسخه از فریم ورک موتولزبرای شما مفیدتر است

در این جدول منظور از فشردگی کد موتولز  این نمی باشد که برای استفاده از آن بایدموتولز دانلود شده را از حالت کمپرس خارج نمایید

مطظالب تکمیلی در قسمت مربوط به نصب موتولزآورده میشود

Advanced Download

در این وضعیت شما میتوانید نسخه قابل دریافت موتولزرا بر اساس نیاز خودتان سفارشی نمایید 

یک نویگریشن ساده با موتولز

در اینجا قصد داریم یک نوی گریشن ساده را با موتولز بسازیم

معمول است که اجزایی از این دست را با لیست ها بسازند یعنی ترکیب ul و l

در اینجا نیز ما ابتدا نوی گریشن خود را با لیست می سازیم

<ul id="nav">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link 2</a></li>

  <li><a href="#">Link 3</a></li>
</ul>

حال برای شکیل شدن (و استفاده در موتولز ) استایل زیر را برای آن در نظر میگیریم

#nav a {
  padding:12px;
  line-height:50px;

  background:#f0f0f0;
  color:#666;
  text-decoration:none;

}
#nav a:hover {
  color:#000;
  background:none;

}
#nav {
  text-align:center;
  list-style:none;

  margin:0;
  padding:0;
}
#nav li {

  display:inline;
  vertical-align:middle;
  font-size:12px;

}

و سرانجام می ماند کد موتولز نوشته شده که بصورت زیر نوشته میشود

window.addEvent('load', function ()
{
  $('nav').getChildren().each(function(el){

    var effect = el.effect('font-size',
    {
      duration: 400,

      transition: Fx.Transitions.Expo.easeOut,
      wait: false

    });
    el.orgSize = el.getStyle('font-size').toInt();

    el.addEvents(
    {
      'mouseover': function ()

      {
        effect.start(el.orgSize * 2);
      },

      'mouseout': function ()
      {
        effect.start(el.orgSize);

      }
    });
  });
});

نمونه انجام شده این مثال ساده را میتوانید در آدرس زیر ببینید

 a simple mootool navigationl

دیگر نباید بنویسید:

$('message').removeClass('error').removeClass('alert').addClass('alert');

$('message').setProperty('class', 'alert');

در کدنویسی (مخصوصا در موتولز) همیشه باید ساده نویسی و کوتاه نویسی کد را سرلوحه کار خود قرار بدهیم والا کدهای تمیزی نخواهیم داشت

دیگر نباید بنویسید:

$('my_ul').getChildren().getFirst();

$$('#my_ul li a');

مثلا در یک نویگریشن در بین چند لینک ما قصد انتخاب یکی از لینک ها داریم

بهترین انتخاب بکار بردن کلاس خاص برای هر لینک است تا مجبور به انتخاب گروهی عناصر نباشیم

دیگر نباید بنویسید:

new Ajax('my_action.php', {
  "data": $('my_form').toQueryString()

});

$('my_form').send();

میتوان دسترسی به آجاکس در موتولز با ساده ترین و کوتاهترین کد ممکن انجام داد

دیگر نباید بنویسید:

new Element('a').setStyle('color', '#fff').setProperty('href', 'new_href').addEvent('click', doSomething);

new Element('a', {
  "href": 'new_href',

  "styles": {
    "color": '#fff';
  },

  "events": {
    "click": doSomething
  }
});

ملاحظه میشود که در تعریف شی در موتولز مقدار دهی کلاس تماما میتواند در یک جا باشد

دیگر نباید بنویسید:

$('foo').setStyles({
  "backgroundColor": '#f00',
  "color": '#fff'

}).setProperty('href', 'new_href').setEvents({
  "mouseover": doSomething,

  "mouseout": doSomethingElse
});

$('foo').set({
  "styles": {
    "backgroundColor": '#f00',

    "color": '#fff'
  },
  "properties": {
    "href": 'new_href'

  },
  "events": {
    "mouseover": doSomething,

    "mouseout": doSomethingElse
  }
});

ملاحظه میشود که به جای استفاده از دو تابع مجزا  از set برای قابل فهم کردن کد استفاده شده است

دیگر نباید بنویسید:

$$('div.collapsed').each(function(el){
  el.addEvent('click', expand);

});

$$('div.collapsed').addEvent('click', expand);

شما ملزم به انتخاب تمام عناصر یک گروه نیستید اگر متد مشترک داشته باشند

دیگر نباید بنویسید:

$$('div.hidden').each(function(el){
  el.removeClass('hidden');

})

$$('div.hidden').removeClass('hidden');

دیگر نباید بنویسید:

$$('input.date').addEvent('focus', onFocus);
$$('input.date').addEvent('blur', onBlur);

$$('input.date').addEvents({
  'focus': onFocus,
  'blur': onBlur

});

دیگر نباید بنویسید:

$('myContainer').onclick = doSomeMagic;

$('myContainer').addEvent('click', doSomeMagic);

دیگر نباید بنویسید:

new Ajax('blah.php', {
  method: 'post',

  async: true,
  encoding: 'UTF-8',
  headers: {'contentType': 'application/x-www-form-urlencoded'}

});

 new Ajax('blah.php');

بعبارتی نیازی به مقدار دهی موارد پیش فرض نیست

دیگر نباید بنویسید:

new Ajax('ninja.php?weapon1=foo&weapon2=bar');

new Ajax('ninja.php', {
  data: {
    weapon1: 'foo',

    weapon2: 'bar'
  }
});

هر چند شخصا روش اول  را برای مواردی که مقادیر استاتیک هستند ترجیح میدهم

اما در هر صورت روش دوم کد تمیزتری به ما می دهد

دیگر نباید بنویسید:

$('coolestWidgetEver').innerHTML = 'some nifty content';

$('coolestWidgetEver').setHTML('some nifty content');

اینجا نیز مانند پروتوتایپ با این تفاوت که به جای update از setHTML استفاده میشود

دیگر نباید بنویسید:

$('footer').style.height = '100px';

$('footer').style.background = '#ffc';

$('footer').setStyles({
  height: '100px',
  background: '#ffc'

});

در ضمن به s  اضافی در انتهای setstyles  دقت شود

دیگر نباید بنویسید:

var foo = document.getElementById('bar').value;

var foo = $('bar').value;

var foo = $('bar').getValue();

همانطور که ملاحظه میشود موتولز روش کوتاهی برای گرفتن مقادیر ندارد  اما برای این منظور معماری خاص خود را دارد

دیگر نباید بنویسید:

document.getElementById('foo');

$('foo');

این روش بصورت استاندارد برای اکثر  فریم ورکهای جاوا اسکریپت در آمده که شروع آن با پروتوتایب بود

آموزش موتولز::توابع اصلی:بررسی وجود مقدار

توضیح

عمل کرد این تابع مشابه isset در زبان php  است

و مقداری که بر می گرداند میتواند صفر باشد یا یک

$chk(item);

درصورت وجود مقدار معتبر برای پامتر تابع (حتی صفر) مقدار بازگشتی درست true است و الا نادرست یا false است

پارامترها:

میتواند ترکیبی (مثل آرایه یا شیئ) و یا منفرد (مثل عدد یا عبارت) باشد

function myFunction(arg){
    if($chk(arg)) alert('مقدار وارد شده میتواند صفر یا هر چیز دیگری باشد');
    else alert('مقداری وارد نشده یا در صورت ورود یکی از مقادیر  null, undefined, false,است ""');
}

آموزش موتولز::توابع اصلی:بررسی وجود مقدار

توضیح

عمل کرد این تابع مشابه isset در زبان php  است

و مقداری که بر می گرداند میتواند صفر باشد یا یک

$chk(item);

درصورت وجود مقدار معتبر برای پامتر تابع (حتی صفر) مقدار بازگشتی درست true است و الا نادرست یا false است

پارامترها:

میتواند ترکیبی (مثل آرایه یا شیئ) و یا منفرد (مثل عدد یا عبارت) باشد

function myFunction(arg){
    if($chk(arg)) alert('مقدار وارد شده میتواند صفر یا هر چیز دیگری باشد');
    else alert('مقداری وارد نشده یا در صورت ورود یکی از مقادیر  null, undefined, false,است ""');
}