Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
— Алло! Служба поддержки? Вы не знаете, почему у меня изображение на мониторе дрожжит, когда я грызу сухари?

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

— Вчера долго пытался объяснить бабуле, что работаю программистом...
— ???
— Короче, сошлись на том, что чиню телевизоры и развожу мышей...

  Моя группа в контакте:



Методы для работы с 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. Вот так все просто.

1 2 3 4 5 6

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Максим
Отличный сайт!
Пользуюсь им частенько, т.к. пока не запомнил все наизусть.
Все просто и понятно, без воды, с отличными примерами.
Спасибо! )
2014-08-07 12:12

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь