—»     —»   Переключение таблицы стилей с помощью jQuery
  Раздел: Подсказки, Tips and Tricks, CSS/Style Sheets   Комментариев: 2  

Переключение таблицы стилей с помощью jQuery



jQuery значительно облегчает управление DOM, и это позволяет нам без труда изменять любой элемент на странице. Один из этих элементов отвечает за каскадные таблицы стилей, и при помощи jQuery мы теперь можем переключаться между используемыми стилями. Вопрос только в том, для чего это нам нужно?

К этому может быть несколько причин, и зачастую самой основной причиной является важность доступности. Многие веб-сайты позволяют пользователям выбирать размер шрифта, но важно помнить о том, что если менять размер шрифта на всей странице, то поедет вся верстка и ваш веб-сайт станет похожим на кашу. Вы можете прикрепить возможность изменения шрифтов только в определенных элементах, что даст вам уверенность в том, что шаблон не потеряет своей структуры.

Что если в вашем веб-сайте будут различные цвета, и посетители предпочтут использовать только черную или только белую версию вашего веб-сайта? Вы можете предложить им это.

Вы даже можете повеселиться со стилями и полностью изменить внешний вид веб-сайта при помощи DOM-элементов, которые позволяют пользователям выбирать используемый шаблон.

Посредством простого изменения каскадных таблиц стилей можно делать достаточно много вещей, так что в нашей сегодняшней статье мы расскажем вам о быстром и простом изменении стилей с применением jQuery.

Переключение таблицы стилей с помощью jQuery

В демо-страницы вы можете переключаться между 4 различными стилями всего с помощью клика по кнопке. Вы также можете скачать демо-страницу и использовать ее для собственных нужд.

* Демо
* Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


HTML-код

HTML-код очень прост: указанная ссылка на таблицу стилей и 4 Div’а с ID таблицы стилей, которую они используют.

<link rel="stylesheet" id="switch_style" href="">

<p>Use jQuery to easily change the stylesheet of your page.</p>

<p>Let your visitors choose your website styling.</p>

<h4>Pick one of the boxes below to change the stylesheet.</h4>

<p>The stylesheet has one property that is the change the body background colour.</p>

<div class="box" id="green"></div>

<div class="box" id="red"></div>

<div class="box" id="blue"></div>

<div class="box" id="yellow"></div>

jQuery-код

Теперь мы используем jQuery для изменения href-параметра элемента switch_style.

Для начала мы устанавливаем готовую функцию, которая будет запускаться после того, как страница будет полностью загружена, это будет запускать функцию switch_style_click, которая устанавливает click-события в блоки.

Так как мы установили класс на все блоки, мы можем воспользоваться этим и прикрепить событие к каждому элементу посредством класса box. Все, что нам осталось сделать, это получить ID блока, используя функцию attr и сохранив ее в переменную. Теперь мы снова воспользуемся функцией attr в отношении элемента switch_style для изменения href нового CSS-файла.

Скопируйте и вставьте нижеприведенный код в ваш файл javascript.

(function ($j) {

switch_style = {

onReady: function () {
this.switch_style_click();
},

switch_style_click: function(){
$(".box").click(function(){
var id = $(this).attr("id");

$("#switch_style").attr("href", id + ".css");
});
},
};

$j().ready(function () {
switch_style.onReady();
});

})(jQuery);

Теперь вы можете без труда переключаться между разными стилями.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 12729   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 января 2012 @ 11:31
Написал: Roman — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Большое спасибо за статью. Для создания веб-сайта самое то. Советую попробовать, не пожалеете.
Комментарий #2: 3 сентября 2014 @ 18:19
Написал: Ден — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
$('#tabid tr').toggle (function(){
$(this).addClass('brcl')
},function(){
$(this).removeClass('brcl')
}) в новой библеотеке не работает есть альтернатива??????????
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31