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


Основы

Функция .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, чтобы первыми прочитать следующий урок!

, , , , , ,

  1. #1 by нЭЭо on 14.08.2010 - 6:53 pm

    Я только только начал использовать мутулз, потому твои статьи и уроки по этому фреймворку мне очень полезны – дают мне понимание о том, как тут все работает и… начну читать дальше! ;)

  2. #2 by рэппер on 16.08.2010 - 10:51 am

    Привет! читаю уроки с самого начала – мне очень нравится, жаль только, что редко.. я часто ищу пользовательские классы, но они очень редко подходят к моим нуждам, потому хочу научиться создавать свои собственные классы. Надеюсь у тебя будет урок посвященный этой теме.

(никто не узнает)

Код на картинке: