crosschit
crosschit
crosschit
Вы хотите отреагировать на этот пост ? Создайте аккаунт всего в несколько кликов или войдите на форум.

crosschit

читы для онлайн игр
 
ФорумПоследние изображенияРегистрацияВход
Размещение баннерной рекламы
витрина Ссылок
Купить ссылку здесь
(Цена: 1 руб.)


Поставить к себе на сайт
Оплачиваемая реклама
Реклама 160-600
Размещение баннерной рекламы
счётчики
Яндекс.Метрика
Проверка тиц pr
Мы В Топ
serv-top.at.ua - Самый лучший топ сайтов серверов
Рейтинг TOP100
serv-top.at.ua - Самый лучший топ сайтов серверов
Рейтинг@Mail.ru
serv-top.at.ua - Самый лучший топ сайтов серверов
Атестат
Соц Сети

 

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

Перейти вниз 
АвторСообщение
Admin
Admin
Admin


Сообщения : 622
Очки : 1363
Спасибки : 24
Дата регистрации : 2013-02-03
Возраст : 32
Откуда : Россия оренбургская облость

Переключатель стилей с превью просмотром Empty
СообщениеТема: Переключатель стилей с превью просмотром   Переключатель стилей с превью просмотром Icon_minitime1Пн Фев 24, 2014 5:33 pm

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

Вставляем перед </head>:
Код:
<link type="text/css" rel="stylesheet" href="http://webo4ka.ru/Ucoz7/perekluchateli_styles_c_predprosmotrom.css" />
<link type="text/css" rel="stylesheet" id="theme" href="http://webo4ka.ru/Ucoz7/perekluchateli_styles_theme1.css" />
<script type="text/javascript" src="http://webo4ka.ru/Ucoz7/perekluchateli_styles_c_predprosmotrom.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://crosschit1.sosbb.ru
 
Переключатель стилей с превью просмотром
Вернуться к началу 
Страница 1 из 1

Права доступа к этому форуму:Вы не можете отвечать на сообщения
crosschit :: все для UCOZ :: Скрипты для uCoz-
Перейти:  
Размещение баннерной рекламы