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


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

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

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

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

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- | Просмотров: 4173 | Загрузок: 418 | Комментарии: 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

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

Солдаты в Первую Мировую войну были первыми, кто начали использовать прототип современного туалета со смывным бочком. Невероятно, но факт!


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

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

Друзья сайта