Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS » программирование

Уроки Mootools – Урок 7 – Игра со стилями

proglammer — Sat, 11 Jul 2009 07:06:11 +0000

Основы

Функция .setStyle();

Эта функция позволяет установить свойства стиля элемента. Все что нужно сделать, это добавить .setStyle() через сивмол точки («.») в конец строки с селектором (или к соответствующей переменной), и она изменит свойства стилей одного элемента или целого массива элементов.

//определяем селектор
//добавляем функцию .setStyle
//задаем необходимое свойство стиля и его значение
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');

<div id="body_wrap">
    <div class="class_name"></div>
    <div class="class_name"></div>
    <div class="class_name"></div>
    <div class="class_name"></div>
</div>

.getStyle();

Если понимаешь хоть как-то по английски, тут все понятно: функция получает значение свойства стиля элемента (как-то много родительного падежа ).

//вначале объявляем переменную, в которой будет содержаться значение параметра стиля
var styleValue = $'body_wrap').getStyle('background-color');

Если бы мы прогнали этот код по предыдушим HTML строкам, переменная styleValue получила бы значение ‘#eeeeee’.

Получение и установка нескольких значений стиля

setStyles();

.setStyles();, как скорее всего уже понял народ, хоть немного понимающий английский, позволяет применить несколько значений стиля одновременно к одному элементу или к целому массиву элементов. Синтаксис функции .setStyles(); немного отличается от синтаксиса остальных схожих функций и это сделано лишь для того, чтобы она позволяла работать с несколькими значениями стилей одновременно.

//начинаем мы с того, что создаем селектор, к которому добавляем, как всегда через точку, функцию
//в данном случае .setStyles();
$('body_wrap').setStyles({
    //шаблон, которого нужно придерживаться: 'свойство': 'значение',
    'width': '1000px',
    'height': '1000px',
    //ВАЖНО: после последнего значения запятую ставить НЕ НУЖНО!
    //это важно для кроссбраузерности приложения
    'background-color': '#eeeeee'
});

Примечание: Вообще не обязательно всегда заключать название свойства стиля в единичные кавычки. Они нужны только тогда, когда в названии свойства есть дефис (-), как, например, в свойстве font-size. Но для того, чтобы исключить возникновение проблем по причине не поставленной кавычки, лучше приучить себя к кавычкам. Потом искать долго, если что .

Еще одно примечание: эта функция предоставляет большую гибкость при определении значений свойств (таких как ‘200px’ или ‘#ffffff’). Помимо возможности передачи обычных текстовых строк, можно также передавать числа без кавычек (которые будут интепретированы как пиксели – px – в большинстве случаев) и переменные:

//эта строчка передает переменной firstBackgroundColor значение в формате ТЕКСТ '#eeeeee'
var firstBackgroundColor = '#eeeeee';
//можно задавать в качестве значения переменной другую переменную
//в данном случае переменная backgroundColor получает значение друго переменной - '#eeeeee'
var backgroundColor = firstBackgroundColor;
//эта строчка передает переменной divWidth значение в формате ЧИСЛО 500
var divWidth = 500;
$('body_wrap').setStyles({
    //в данном случае, переменные - это слова без кавычек
    'width': divWidth,
    //числа - это.... это числа без кавычек
    'height': 1000,
    //другая перменная
    'background-color': backgroundColor,
    //строки - это ряд символов, заключенных в 'единичные кавычки'
    'color': 'black'
});

.getStyles;

Эта функция позволяет получать несколько значений свойств стилей за один раз. Она работает немного иначе, чем мы виделли немного выше, а отличается этот метод тем, что он работает с несколькими наборами данных в формате ключа (свойство стиля) и его значения (значение свойства). Такой набор данных называется ОБЪЕКТОМ, а метод .getStyles(); позволяет легко формировать такие объекты, чтобы потом их также легко использовать.

//вначале нужно объявить переменную для нашего объекта
//потом создать селектор
//добавляем метод .getStykes к селектору
//после чего создаем список названий свойств стиля, разделенных через запятую
//все названия нужно заключать в 'единичные кавычки'
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color'); 
//вначале создаем новую переменную, которая будет содержать значение свойства
//передаем в переменную определенное свойство; 
//ключ объекта/массива и будет названием свойства
//название свойства заключаем в [квадратные скобки]
//не забываем про 'единичные кавычки' для ключа объекта/массива
var bgStyle = bodyStyles['background-color'];

Пример

В этом примере мы потренируемся использовать некоторые методы, рассмотренные в этом уроке, чтобы получать информацию о стилях (.getStyles();) и устанавливать свои стили (.setStyles();). Обращайте больше внимания не на манипуляции со свойствами стилей, а на структуру кода. Для того, чтобы отделить наши функции от события domready, мы передаем им несколько переменных, которые установленны в самом событии domready. А делается это примерно так: как видно вначале идет объявление переменных с функциями, но при этом видно, что функциям передаются переменные, которые объявляются позже, уже в событии domready, где функции, собственно и вызываются, но уже после объявленных переменных. Что-то вроде того…

Обратите внимания, что собятия click используют анонимные функции. Это дает нам возможность передавать переменные изнутри domready функциям за его пределами. Это может показаться полным бредом на первый взгляд, но пробежав глазами по коду немного ниже, думаю, должно все проясниться.

//обратите внимание, что эта функция имеет параметр "bgColor"
//эта функция будет использоваться уже внутри собятия domready
var seeBgColor = function(bgColor) {
	alert(bgColor);
}
var seeBorderColor = function(borderColor) {
	alert(borderColor);
}
 
//тут мы используем еще не объявленную переменную playDiv
//но, так как мы объявим переменную уже в событии domready и
//и это произойдет до того, как мы вызовим эту функцию, ошибки не будет
//плюс ко всему, теперь не нужно использовать селектор несколько раз
//очень полезно когда имеешь дело со сложными селекторами
var seeDivWidth = function(playDiv) {
        //снова получаем стиль
        //но в отличии от метода .getStyles();, который используем позже в domready,
        //тут мы получаем текущее значение параметра стиля
        //это обеспечивает точные значение ширины элемента, передаваемые в оповещение alert 
        //даже когда значения изменяются по ходу работы
		//или после того, как событие domready уже имело место
 
	var currentDivWidth = playDiv.getStyle('width');
	alert(currentDivWidth);
}
 
 
var seeDivHeight = function(playDiv) {
	var currentDivHeight = playDiv.getStyle('height');
	alert(currentDivHeight);
}
 
 
var setDivWidth = function(playDiv) {
	playDiv.setStyle('width', '50px');
}
 
var setBgColor = function(playDiv) {
	playDiv.setStyle('background-color', '#fdd1aa');
}
 
var setDivHeight = function(playDiv) {
	playDiv.setStyle('height', '50px');
}
 
//обратите внимание, что этот параметр на этом этапе может называться как угодно
//он примет любое значение (буть то элемент или еще что-либо) 
//при ее запуске из события domready
 
var resetSIZE = function (foo) {
	foo.setStyles({
		'height': 200,
		'width': 200,
        'background-color': '#fdd1aa'
 
	});
}
 
window.addEvent('domready', function() {
        //в этом примере мы часто используем этот селектор, поэтому проще и экономнее сразу
        //присвоить его переменной
	var playDiv = $('playstyles');
 
        //тут мы создаем объект с несколькими свойствами стиля
 
	var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color'); 
 
        //еще значение стиля можно получить обратившись в объекту со свойствами
        //с соответствующим ключем и назначив результат переменной
	var bgColor = bodyStyles['background-color']; 
 
        //тут используется анонимная функция чтобы иметь возможность передать параметр вне события domready
 
	$('bgcolor').addEvent('click', function(){
		seeBgColor(bgColor);
	});
 
 
	$('border_color').addEvent('click', function(){
                //вместо того, чтобы передавать параметр в доступную переменную,
                //его можно вызвать прямо сюда в алерт
		seeBorderColor(bodyStyles['border-bottom-color']);
	});
 
 
	$('div_width').addEvent('click', function(){
		seeDivWidth(playDiv);
	});
 
 
	$('div_height').addEvent('click', function(){
		seeDivHeight(playDiv);
	});
 
 
	$('set_width').addEvent('click', function(){
		setDivWidth(playDiv);
	});
 
 
	$('set_height').addEvent('click', function(){
		setDivHeight(playDiv);
	});
 
   	$('set_BgColor').addEvent('click', function(){
		setBgColor(playDiv);
	});
 
 
	$('reset').addEvent('click', function(){
		resetSIZE(playDiv);
	});
});

А теперь HTML код:

<div id="playstyles"> </div>
    <br />
    <button id="bgcolor">Получить background-color</button><br />
    <button id="border_color">Получить border-bottom-color</button><br />
    <button id="div_width">Получить width</button><br />
    <button id="div_height">Получить height</button><br />
    <button id="set_width">Установить width на 50px</button><br />
    <button id="set_height">Установить height на 50px</button><br />
    <button id="set_BgColor">Поменять background-color</button><br />
    <button id="reset">Сбросить</button>

И небольшой отрезок нужного нам CSS-кода:

#playstyles {
	width: 200px;
	height: 200px;
	background-color: #eeeeee;
	border: 3px solid #dd97a1
}

– смотрим цвет фона
– смотрим цвет границы нижней

– смотрим ширину
– смотрим высоту
– устанавливаем ширину на 50 пикселей
– устанавливаем высоту на 50 пикселей

– меняем цвет фона на ‘#fdd1aa’
* Замечу, что несмотря на то, что после смены габаритов нашего объекта, кнопки, полчающие эти габариты, получают правильные значения (ширина = длина = 50px), кнопка получения цвета фона не прокатывает. По каким-то причинам (по каким, я не разобрался), код возвращает изначально установленный цвет фона объекта. Потому, будьте осторожны, если придется что-то подбное использоваться в ваших проектах!

А что же дальше?…

В 8-м уроке я планирую рассказать о том, как работать с числами, а именно о большинстве методов и функций в Mootools 1.2, предназначенных для работы с числами. Не забудьте подписаться на RSS, чтобы первыми прочитать следующий урок!

Уроки Mootools – Урок 6 – Манипуляции с HTML

proglammer — Sun, 21 Jun 2009 18:09:56 +0000

Управление HTML элементами DOMа с помощью Mootools 1.2

В предыдущих уроках мы рассмотрели возможности выбора элементов DOMа страницы, как создавать массивы, функции, как создавать прослушку событий для определенных элементов DOMа, ну а в этом уроке мы заглянем еще глубже в то, какие возмоности манипулирования элементами HTML скрывает в себе Mootools библиотека 1.2. Я уже, наверное, не раз говорил, насколько мощные возможности скрывает в себе легкая библиотека Mootools 1.2, но хочу еще раз напомнить о том, что с ее помощью можно добавлять новые элементы в вашу страницу, удалять ненужные и изменять их стиль или параметры, и все это «налету».

Основы

.get()

Этот метод позволяет получать доступ к атрибутам элементов. Ипользование метода довольно просто:

//этот код вернет название тега элемента с id "id_name"
$('id_name').get('tag');

<div id="body_wrap">
    <span>Element</span>
</div>

С помощью .get() можно получить не только название HTML тегов, но и такие аттрибуты, как id, name, value, href, src, class (вернет все классы, если элементу присвоенны несколько), с помощью ключевого слова text можно получить текстовое
содержимое элемента, а также многое другое.

.set()

.set() работает также, как и .get(), тоько этот метод устанавливает различные значения, а не получает их, а это очень пригодится при комбинировании с событиями, что позволяет изменять всякие значение уже после того, как загрузится страница.

//этот код установит атрибут href элемента с id #id_name на "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');

<div id="body_wrap">
    
    <a id="id_name" href="http://www.yahoo.com">Search Engine</a>
</div>

.erase()

Метод .erase() позволяет удалить значение атрибута. Он работает также, как и предыдущие два: выбираете элемент, потом выбираете какой атрибут нужно удалить.

//этот код удалит значение атрибута href элемента с ID #id_name
$('id_name').erase('href');

<div id="body_wrap">
    
    <a href="http://www.yahoo.com">Search Engine</a>
</div>

Передвижение

.inject();

Чтобы передвигать элемент по стрнице, можно использовать метод .inject();. Как и все остальные методы, которые мы уже рассмотрели, этот метод очень прост в использовании и предоставляет большие воможности управления пользовательским интерфейсом. Для того, чтоб ыиспользовать .inject();, давайте вначале создадим несколько элементов в переменной:

var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');

Этот код вставляет html код в переменные, что делает более легким их использование в Mootools.

<div id="body_wrap">
    <div id="elemA">A</div>
    <div id="elemB">B</div>
    <div id="elemC">C</div>
</div>

А теперь, чтобы изменить порядок сортировки элементов, можно использовать метод .inject() одним из четырех способов. Можно вставить элемент в:

в конец (bottom) (по умолчанию)
в начало (top)
до элемента (before)
после элемента (after)

Атрибуты bottom и top установят элемент в верхнюю или нижнюю часть выбранного элемента-контейнера. Атрибуты before и after, с другой стороны, установят необходимый элемент до или после другого элемента.

Итак, давайте изменим порядок элементов на A-C-B. Так как нам не нужно вставлять один элемент во внутрь другого, мы будем использовать атрибуты before и after.

//на человеческом языке звучит так:  вставить элемент C перед элементом B
elementC.inject(elementB, 'before');
//На русском:  вставить элемент B после элемента C
elementB.inject(elementC, 'after');

Создание новых элементов

new Element

Конструктор «new Element» можно использовать для того, чтобы создать новый элемент на вашей HTML странице. Процесс очень напоминает написание обычного HTML кода, с тем отличием, что мы исправим синтаксис, чтобы он был совместим с Mootools:

//вначале, вы присваиваете новой переменной значение "new Element"
//в которой и будет содержаться информация о новом элементе (div, a, span и т.д.)
var newElementVar = new Element('div', {
    //тут обозначаются все атрибуты элемента
    'id': 'id_name',
    'text': 'Я новый блок div',
    'styles': {
        //тут можно указать все параметры стиля элемента
        'width': '200px',
        'height': '200px',
        'background-color': '#eee',
        'float': 'left'
    }
});

Смотрите, у нас получился элемент, который можно вставить в какое-либо место, с помощью методов, которые мы рассмотрели чуть чуть ранее. Давайте начнем с такого простого примера HTML:

<div id="body_wrap">
    <div id="content_id">Тут у нас какое-нибудь содержимое</div>
</div>

Теперь конвертируем элемент #content_id в переменную:

var bodyWrapVar = $('body_wrap');

Аналогично тому, что мы рассмотрели немного ранее, мы можем вставлять созданные элементы в код страницы:

//на человеческом языке, звучит так: "вставить сверху bodyWrapVar элемент newElementVar"
newElementVar.inject(bodyWrapVar, 'top');

Таким образом, конечный результат выглядел бы так:

<div id="body_wrap">
    
    <div id="id_name">Новый блок</div>
    <div id="content_id">Какая-то муть</div>
</div>

Пример

Например, давайте создадим форму, которая бы позволяла добавлять новый элемент на страницу. Для начала, сделаем несколько полей input и кнопку button.

<div id="body_wrap">
        ID:  <input id="id_input" name="id" />
        text:  <input id="text_input" name="text" />
        <button id="new_div">create a new div</button>
</div>

А теперь напишем и код JavaScript Mootools, который позволит нам вставлять новые элементы в нашу страницу. Для начала добавим прослушку кнопки на предмет клика и создадим функцию с этим кодом:

var newDiv = function() {
    //в этой функции мы разместим код вставки нового элемента
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Затем нужно определиться с тем, какими переменными мы будем оперировать. Для того, чтобы использовать данные из форм input, нам нужно получить к ним доступ, а этим займется метод .get(); и его параметр value, который отвечает за значение того или иного элемента:

var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');

Теперь эти переменные, idValue и textValue, содержат значения соответствующих полей input. Так как нам нужно взять значение полей input тогда, когда пользователь кликает по кнопке «Создать новый div», нам нужно вставить этот код в функцию newDiv();, определенную немного ранее. Если бы мы брали значения вне функции,
действие бы происходило при загрузке страницы, а не при клике.

var newDiv = function() {
    var idValue = $('id_input').get('value');
 
    var textValue = $('text_input').get('value');
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Ну а дальше нам нужно будет схватить элемент, в который мы хотим вставить новый блок div:

var newDiv = function() {
    var idValue = $('id_input').get('value');
 
    var textValue = $('text_input').get('value');
    var bodyWrapVar = $('newElementContainer');
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Итак, у нас теперь есть значения полей input, тогда можно создавать новый элемент:

var newDiv = function() {
    var idValue = $('id_input').get('value');
 
    var textValue = $('text_input').get('value');
    var bodyWrapVar = $('newElementContainer');
 
 
    var newElementVar = new Element('div', {
        //эта строка устанавливает id элемента на значение поля input
    	'id':	 idValue,
        //эта строка передает значение поля input
        //для создания внутреннего текста блока
    	'html': textValue
    });
};
 
window.addEvent('domready', function() {
    $('new_div').addEvent('click', newDiv);
});

Ну, а теперь нам остается только вставить новый элемент в нашу страницу:

var newDiv = function() {
	//обратите внимание, что идет запрос на элемент с id="newElementContainer",
	//что означает, что такое элемент (в нашем случае, блок DIV),
	//должен быть заблаговременно создан
	var bodyWrapVar = $('newElementContainer');
 
	var idValue = $('id_input').get('value');
	var textValue = $('text_input').get('value');
 
 	var newElementVar = new Element('div', {
    	        'id': idValue,
    	        'text': textValue
	});
    //на русском это звучит так: вставить переменную newElementVar
    //в верхнюю часть внутри элемента bodyWrapVar
 
	newElementVar.inject(bodyWrapVar, 'top');
};
 
var removeDiv = function() {
    //эта строка удаляет внутренний html код
    //(все, что находится внутри тега div)
	$('newElementContainer').erase('html', '');
}
 
window.addEvent('domready', function() {
 
   $('new_div').addEvent('click', newDiv);
   $('remove_div').addEvent('click', removeDiv);
});

ID:

текст:

(а не попробовать ли слово “mootools” для ID? =) )

Уроки Mootools – Урок 2 – Селекторы

proglammer — Mon, 13 Apr 2009 06:45:36 +0000

Если Вы все еще не сделали этого, «ласкаво просимо» пролистать, а лучше почитать, Введение в Mootools, наш первый урок из серии «Курс подготовки юного бойца», в котором мы обсудили как устанавливаются скрипты Mootools и как вызывать скрипты в событии domready.

Подошло время к изучению 2-го урока из нашего «Moo-чебника», в котором мы научимся использовать несколько методов по выбору HTML элементов. В общих чертах, это основа того, для чего обычно и используется библиотека Mootools. В конце концов, для того, чтобы создать интерактивный пользовательский интерфейс из HTML элементов, на них, вначале, нужно «ткнуть пальцем», а потом уже издеваться над ними, применяя различные методы и функции и изменяя их внешний вид и функциональность.

Основы

$();

Функция $ – это основной селектор во всей библиотеке. С помощью этой функции можно по ID выбрать любой элемент DOM-а.

//выбирает элемент с ID 'body_wrap'
$('body_wrap');

<div id="body_wrap">
</div>

.getElement();

.getElement(); дополняет функцию $, позволяя, таким образом, конкретизировать свой выбор. Например, можно выбрать элемент с ID «bodywrap» с помощью функции $, после чего выбрать первый по счету элемент в нем. .getElement(); выбирает только один элемент и возвращает только первый, если были найдены более одного. Если в качестве параметра .getElement(); будет указан класс, функция вернет первый элемент в списке с таким классом, а не массив элементов. Если нужно выбрать несколько элементов, следует использовать функцию .getElements();, описанную ниже.

//выбирает первый якорь, находящийся в элементе с ID 'body_wrap'
$('body_wrap').getElement('a');
//выбирает элемент с ID 'special_anchor', который находится в элементе 'body_wrap'
$('body_wrap').getElement('#special_anchor');
//выбирает первый элемент с классом 'special_anchor_class', который находится в элементе 'body_wrap'
$('body_wrap').getElement('.special_anchor_class');

<div id="body_wrap">
        <a href="#">якорь</a>
        <a href="#">еще один якорь</a>
        <a id="special_anchor" href="#">специальный якорь</a>
        <a class="special_anchor_class" href="#">специальный якорь</a>
        <a class="special_anchor_class" href="#">еще один специальный якорь</a>
</div>

$$();

$$ позволяет быстро выбрать несколько элементов и разместить их в массив (своего рода список, который позволяет вам получать доступ, манипулировать и изменять очередность элементов в этом списке различными способами). Элементы можно выбирать по названию тега (например, div, a, img) или по ID. В одной из статей на сайте mootools более подробно описываются возможности функции $$.

//все div-ы на странице

$$('div');<br />
//выбирает элемент с ID "id_name" и все divы
$$('#id_name', 'div');

<div>
    <div>a div</div>
    <span id="id_name">текст тега</span>
</div>

.getElements();

.getElements(); – это аналог .getElement();, с той разницей, что эта функция возвращает все элементы, соответствующие критериям поиска, помещая их в массив. .getElements(); можно использовать также, как и .getElement();.

//выбирает все  якоря, заключенные в элементе с ID 'body_wrap'
$('body_wrap').getElements('a');
//выбирает все элементы с классов 'special_anchor_class', находящиеся в элементе 'body_wrap'
$('body_wrap').getElements('.special_anchor_class');

<div id="body_wrap">
        <a href="#">якорь</a>
        <a href="#">еще один якорь</a>
        <a class="special_anchor_class" href="#">специальный якорь/a>
        </a><a class="special_anchor_class" href="#">еще один специальный якорь</a>
</div>

Использование операторов

Операторы

В Mootools 1.2 есть поддержка нескольких операторов, которые позволяют еще точнее отфильтровать выбранные элементы. Операторы можно использовать в .getElements();, чтобы включать или исключать определенные результаты поиска. Mootools поддерживает 4 операторы, каждый из которых можно использовать для выбора элемента input по его имени:

= – ровняется

//выбирает элемент input с именем 'phone_number'
$('body_wrap').getElements('input[name=phone_number]');

^= – начинается с

//выбирает элемент input, с именем начинающимся с "phone"
$('body_wrap').getElements('input[name^=phone]');

$= – заканчивается на

//выбирает элемент input с именем заканчивающимся на "number"
$('body_wrap').getElements('input[name$=number]');

!= не ровно (прим. перевод.: и это не удивительно!)

// выбирает элемент input, у которого имя не "address"
	$('body_wrap').getElements('input[name!=address]');

<div id="body_wrap">
    <input name="address" type="text" />
    <input name="phone_number" type="text" /> 
</div>

Для использования операторов нужно вначале определить тип элемента (input), после чего определить атрибут, по которому фильтровать поиск (name), потом установить оператор и текст для поиска.

Селекторы очередности элементов

even

Этот простой селектор следует использовать, когда нужно выбрать элементы под четным номером порядка. Помните, что при его использовании порядковый номер первого элемента 0, поэтому он будет четным.

// выбирает все четные divы
$$('div:even');

<div>Четный</div>
<div>Нечетный</div>
<div>Четный</div>
<div>Нечетый</div>

odd

К этому селектору относится все тоже самое, что и к even, только этот выбирает нечетные элементы.

// выбирает все нечетные divы
$$('div:odd');

<div>Четный</div>
<div>Нечетный</div>
<div>Четный</div>
<div>Нечетый</div>

.getParent();

С помощью селектора .getParent();

можно выбрать родителя какого-либо элемента.

//выбирает родителя элемента с ID 'child_id'
$('child_id').getParent();

<div id="parent_id"> 
    <div id="child_id">Четный</div>
</div>

Примеры

Каждая разработка пользовательского интерфейса, написанного на Mootools, начинается с селекторов. Ниже представлены простые примеры того, как можно использовать селекторы для манипулирования элементами DOM-a.

//установить цвет заднего плана всех элементов span на #eee
$$('span').setStyle('background-color', '#eee');
//установить цвет заднего плана всех нечетных элементов в элементе с ID "body_wrap" на "#eee"
$$('span:odd').setStyle('background-color', '#eee');
//установить задний план всех элементов с классом "middle_spans" на "#eee"
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');

<div id="body_wrap">
    <span>Четный</span>
    <span class="middle_spans">Нечетный</span>
    <span class="middle_spans">Четный</span>
    <span>Нечетный</span>
</div>

Закругляемся…

В Интернете, на специализированных сайтах есть еще полно информации о селекторах в Mootools. И, стоит заметить, намного более познавательная, чем та, представленная мною в данном уроке, т.к. я представил вам лишь ознакомительную часть того, что можно делать с помощью селекторов Mootools. Если у вас есть познания английского, могу посоветовать Вам записи официальной документации Mootools об элементах и о селекторах, а также записи в блоге сайта mootools.net о селекторе $$ и о том, насколько он разнообразен. После окончания нашего курса, я все еще планирую переводить другие интересные статьи с зарубежных сайтов, так что если у кого-либо есть запросы на понимание или просмотр каких-либо интересных материалов на русском языке, можете смело написать мне об этом. Я рассмотрю все предложения!

Ну что ж… На этом пока все. Надеюсь, кому-то пригодится этот урок так же, как он пригодился мне. В следующем уроке мы поговорим о массивах в Mootools, так что е пропадайте!

Начинаем утреннюю зарядку: Уроки Mootools – Урок 1

proglammer — Thu, 09 Apr 2009 08:01:04 +0000

Введение в библиотеку Mootools 1.2

Я с недавних пор с программированием познакомился. Должен сказать, заворожило! Очень интересно и увлекательно. С каждой новой вещью, которую узнаешь, появляется еще больше вещей, которые еще нужно познать.

Итак, я начинающий программист (по крайней мере, хочу себя таковым считать), который просто хочет помочь другим начинающим программистам (или тем, кто себя таковыми хочет считать) при написании своего кода пройти тот же путь, что и я, но только немного быстрее, т.е. без лишних поисков по интернету, форумам и другим онлайн ресурсам. Хочу сделать блог новичка для новичков, и надеюсь меня поддержат в этом начинании.

Я не математик, я филолог и переводчик, но программированием зачарован, можно так сказать. И, видимо, поэтому у меня не особо получается вкусить все прелести написания хороших, интересных программ. Все, что у меня получается, это небольшие дополнения к сайтам (наверное, стоит немного оговориться и сказать, что я увлекаюсь Веб-программированием, но написание обычных настольных программ нахожу не менее интересным), исправление кода под свои нужды и все. Но и это для начала подойдет!

Недавно мне в руки попал блог, который вел мой знакомый программист. Сам с интересом почитал некоторые посты. Но, у человека появились другие задачи, и блог перешел ко мне. Что я в нем буду писать, я уже частично оговорил, но буду стараться вывешивать как просто интересные переводы, файлы, задачи и примеры, так и истории успешно вполненных задач и путь, который я буду проходить в поисках этих решений.

Пожелaйте мне удачи!

С библиотекой Mootools я познакомился недавно. Хоть я и раньше встречал это название, интереса особого она у меня не вызвала (интересно, почему?). Но в последний раз, когда я устанавливал на один из рабочих сайтов утилитку Slimbox (тоже весьма полезная и интересная штука!), которая является младшим и более легковесных братом знаменитой LightBox, меня заинтересовала эта библиотека, особенно, когда я взглянул на ее исходный код: это действительно мощная и очень легкая библиотека, упращающая работу с JavaScript.

Когда я начал искать какие-нибудь учебники по этой библиотеке, ничего, кроме официального учебника не нашел. И, хочу заметить, он представлен не совсем в удобном формате, как мне кажется. (Кстати, в скором будущем планирую сделать PDF файлик, где будет представлен весь учебник, и где поиск по нему будет, намного удобнее, как мне кажется; пока только на английском, но может и переведу, если вдруг люди заинтересуются). В общем, все это я говорю к тому, что нашел хороший, на мой взгляд, 30-дневный курс по Mootools, который не требует от Вас никаких знаний HTML или JavaScript, но приветствует базовые знания CSS. Курс на английском, с блога компании ConsiderOpen.

Итак, начнем!

Введение в библиотеку Mootools 1.2

Mootools 1.2 (My Object Oriented Tools) – это легкая, но мощная библиотека JavaScript, предназначенная для облегчения интерактивного создания веб страниц с помощью JavaScript. В некотором смысле можно сказать, что многие действия, которые умеет Mootools, можно рассматривать как расширения CSS (Cascade Style Sheet – Каскадные таблицы стилей). Например, с помощью CSS можно изменить свойство какого-либо элемента при наведении курсора на него (свойство :hover), тогда как JavaScript распознает даже больше событий, спровоцированных пользователем (клик – «click», наведение курсором – «mouseover», нажатие различных клавиш и т.д.), а библиотека Mootools делает распознавание этих событий настолько простым, что этим просто невозможно не воспользоваться!

Ко всему прочему, у Mootools в запасе есть уйма интересных расширений, которые позволят вам не только изменять «на лету» свойства элементов (таких как свойство CSS :hover), но которые также позволяют вам изменять форму объектов, анимировать их движения и множество других возможностей, о которых мы расскажем в течение нашего курса.

Но все это лишь малая часть того, что можно делать с помощью библиотеки Mootools. В последующих 30 уроках мы копнем поглубже в эту чудесную библиотеку, открывая все новые и новые возможности работы с массивами и функциями, и в конце докопаемся до таких встроенных плагинов как FX.Slide (скольжение) и до массы других интересностей!

Итак, для дальнейшей работы вам понадобится загрузить библиотеку Mootools с официального сайта, после чего ее следует загрузить на ваш удаленный сервер или на локальную машину, в зависимости от того, где и как вы проводите свои учения и эксперименты. Потом в вашем документе, внутри тега head, нужно установить ссылку на местоположение библиотеки, следующим образом:

(в нашем файл библиотеки находится в той же папке, что и сам html файл)

Установка библиотеки Mootools 1.2

А сейчас, когда вы связали исходный код Mootools с вашей веб страницей, нужно определить место, куда вы будете вставлять свой код. Для этого можно выбрать одну из двух возможностей:

Поместить свой код в тег