Переключатель стилей с превью просмотром - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Как узнать погоду за окном?
Всего ответов: 1889
Статистика


Онлайн всего: 3
Гостей: 2
Пользователей: 1

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

Переключатель стилей с превью просмотром

Хочешь сказать спасибо? Кликни на рекламный баннер.

06.10.2012, 22:39
jQuery плагин простого изменения стиля страницы с помощью переключения. При наведении на ссылку происходит смена стиля (демонстрация), а при нажатии на неё - подтверждение смены стиля. Важным моментом является поддержка cookies без использования php. Плагин работает на IE6+, Firefox, Safari, Chrome, Opera и даже Android и iPhone.
Вставляем перед /head :
Code
<link type="text/css" rel="stylesheet" href="http://megascripts.ru/demo/perekl_stiley/styles.css" />
<link type="text/css" rel="stylesheet" id="theme" href="http://megascripts.ru/demo/perekl_stiley/css/theme1.css" />
<script type="text/javascript" src="http://megascripts.ru/demo/perekl_stiley/jquery.style-switcher.js"></script>

В завершении оформим элементы переключения стиля. Применяем к селектору #header наш переключатель (селектор может быть любым).
Оформляем сами переключатели цветными квадратиками отражающими цветовую гамму стиля.
В body :
Code
<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.
Всё необходимое находиться в архиве .





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 3942 | Загрузок: 394 | Комментарии: 6 | Рейтинг: 4.7/10
Теги: стиль страницы, изменение стиля страницы, страницы для юкоз, скрипт, стиль страницы для ucoz
Всего комментариев: 6
Сообщение №5 от дима
Добавлен: 01.05.2014

В идеале мне подашолбы вот такой вариант (ССЫЛКА ЗАБЛОКИРОВАНА) ! Как вы думаете с вашего кода можно такое сделать ??? На мой взгляд такой вариант и вам будет интересен в базе держать !!!
Сообщение №6 от Олег
Добавлен: 04.05.2014

Большой разницы нет, просто на сайте она смотрится красивее и немного больше цветовой гаммы.
Хотя да, Вы правы, интересный вариант.
Сообщение №3 от Олег
Добавлен: 01.05.2014

na_more, Спасибо, подумаю.
Сообщение №2 от дима
Добавлен: 01.05.2014

На этот материал видео урок не помешалбы . В ютюбе много просмотров сможет собрать .
Сообщение №1 от дима
Добавлен: 01.05.2014

Поможете с установкой , Этого варианта ?
Сообщение №4 от Олег
Добавлен: 01.05.2014

Что у Вас не получается ???
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Мужчины совершают самоубийства в три раза больше чем женщины. Однако, женщины совершают попытки к самоубийству в три раза чаще мужчин.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта