Приветствую Вас Прохожий | RSS Пятница, 09.12.2016, 02:58
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 14
Гостей: 12
Пользователей: 2
alexman91, LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

jQuery плагин визуального изменения стиля страницы через ccs

jQuery плагин визуального изменения стиля страницы через ccs jQuery, плагин, визуального, изменения, стиля, страницы
jQuery плагин визуального, прямого изменения стиля страницы сайта через ccs стили, достаточно просто навести на кнопку показывающую цвет стиля, и сайт мгновенно изменяется в виде каком он будет в реале если кликнуть и закрепить данный стиль в куках.
Плагин работает без проблем в любом браузере и устроистве на IE6+, Firefox, Safari, Chrome, Opera и даже Android и iPhone. Полная поддержка cookies без php вариаций стороннего сервера.

Установка:
Вставляем перед </head> предварительно все скачиваем из архива заливаем в корень сайта и исправляем ссылки на стили и скрипты что бы все отлично работало:
Код
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<link type="text/css" rel="stylesheet" id="theme" href="css/theme1.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.style-switcher.js"></script>


В завершении оформим элементы переключения стиля. Применяем к селектору #header наш переключатель (селектор может быть любым).
Оформляем сами переключатели цветными квадратиками отражающими цветовую гамму стиля.
В <body>:
Код
<script type="text/javascript">
$(document).ready(function() {
  $('#header').styleSwitcher({
  cookieExpires: 60
  });
});
</script>
<!-- Оформление переключателя -->  
  <div id="header">  
  <a href="javascript: void(0)" title="Сменить стиль" id="theme1">  
  <div style="display:inline-block;background: #999999; width:16px; height:16px; border:1px solid #fff;"></div>  
  </a>  
  <a href="javascript: void(0)" title="Сменить стиль" id="theme2">  
  <div style="display:inline-block;background: #000; width:16px; height:16px; border:1px solid #fff;"></div>  
  </a>  
  <a href="javascript: void(0)" title="Сменить стиль" id="theme3">  
  <div style="display:inline-block;background: #0099ff; width:16px; height:16px; border:1px solid #fff;"></div>  
  </a>  
  </div>  
  <!-- /Оформление переключателя -->  
  <!-- Страница с контентом -->  
  <div id="main">  
  <div id="logo">Верхняя часть</div>  
  <div id="mainContent">  
  <p>Первый блок контента</p>  
  </div>  
  <div id="subContent">  
  <p>Второй блок контента</p>  
  </div>  
   
  <div id="footer">  
  <p>Нижняя часть сайта (footer)</p>  
  </div>  
  </div>  
  <!-- /Страница с контентом -->


Обратите внимание, что названия идентификаторов id="theme1", id="theme2", id="theme3" должны соответствовать названию файлов стилей theme1.css, theme2.css, theme3.css.
Автор\Источник: http://pcvector.net

Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 4.1Kb
Просмотров: 3311 | Рейтинг: 3.7/9 | |Категория: Скрипты Разное | Добавил: мир | Дата: 23.04.2013 | Скачали: 21 | Теги: через, стиля, плагин, jQuery, визуального, изменения, CCS, Страницы
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru