Методы для работы с CSS-стилями jQuery
В jQuery имеется три категории методов: одни манипулируют с элементами, подходящими по шаблону; вторые возвращают значения элемента, а третьи изменяют сами элементы.
Сегодня рассмотрим методы, которые используются для CSS-стилей.
Итак, чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом:
.css(name,value)
Пример:$("div").css("border", "1px solid blue"); |
Данная инструкция обведет div синей рамкой.
В качестве параметров здесь используются названия и значения, применимые в CSS: background, border, font-style, color и т.д.
Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:
.css({properties})
Пример:
$("div").css({ border:"1px solid blue", fontWeight:"bolder", backgroundColor:"red" }); |
Данная инструкция обведет div синей рамкой, сделает фон красным, а текст - жирным.
Обратите внимание, что для сложносоставных свойств CSS вроде font-weight и background-color используются иэ эквиваленты из JS: fontWeight, backgroundColor и т.д.
Перечислим другие методы для работы со стилями:
.addClass(class)
Пример:$("p:last").addClass("main"); |
Данная инструкция добавит класс main к последнему элементу параграфа.
.removeClass(class)
Пример:$("p:even").removeClass("main"); |
Данная инструкция удалит класс main из всех четных параграфов.
.toggleClass(class)
Пример:$("p").toggleClass("main"); |
Данная инструкция удалит класс main из всех параграфов, если он присутствует. И добавит этот класс, если он отсутствует.
.offset()
Пример:var offDiv=$("div").offset(); |
Данная инструкция позволяет получить отступы слева и сверху для элемента. Чтобы получить значения конкретного свойства, нужно использовать следующие свойства: offset.left для отступа слева и offset.top - для отступа сверху.
.height(value)
Пример:
$("div").height(); $("div").height(200); |
Данная инструкция позволяет получить (первая строка) и задать (вторая строка) высоту элемента.
.width(value)
Пример:$("div").width(); $("div").width(200); |
Данная инструкция позволяет получить (первая строка) и задать (вторая строка) ширину элемента.
Еще пример:var widDiv=$("div").width(); $("div.fir").width(300); |
Первая строка запишет в переменную widDiv значение ширины первого div-а. Вторая инструкция задаст div-ам класса fir ширину в 300 пикселов.
Это очень интересная особенность методов jQuery: они используются, как для задания параметров (когда принимаются 2 аргумента), так и для получения значений этих параметров (если передается один аргумент).
Давайте, используя полученные знания сделаем меню с вкладками, вот такого вида (пощелкайте по вкладкам):
Эффекты jQuery
Вкладка 1
Вкладка 2
Вкладка 3
Вкладка 4
|
Итак, html-код:
<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="cascade.css"> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div> <div class="vkl" id="vkladka1" onClick="chang('#vkladka1');"> Вкладка 1 </div> <div class="vkl" id="vkladka2" onClick="chang('#vkladka2');"> Вкладка 2 </div> <div class="vkl" id="vkladka3" onClick="chang('#vkladka3');"> Вкладка 3 </div> <div class="vkl" id="vkladka4" onClick="chang('#vkladka4');"> Вкладка 4 </div> </div> <div style="clear: both"></div> <div id="content"></div> <div style="clear: both"></div> </body> </html> |
Как видно, все вкладки имеют единый стиль, определяемый классом vkl, а выделенная вкладка имеет класс selected. Внешний вид пропишем на странице cascade.css
.vkl{ float:left; width:140px; height:28px; background:#49A62E; color:white; font-size:20px; border-right:1px solid white; padding-left:10px; } #content{ width:603px; height:100px; background:#A69927; } .selected{ background:#A69927; } |
Осталось самое интересное, а именно функция chang():
function chang(s){ $('.selected').removeClass('selected'); $(s).addClass('selected'); } |
Итак, как же работает эта функция? Сначала ищется элемент, который имеет класс selected, и этот класс у него убирается. Затем (вторая строка) выделенному элементу (он находится по id, переданному в функцию в качестве параметра s) добавляется класс selected. Вот так все просто.