Чат сообщества
   | |
| Модератор форума: JonMagon |
| Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии Смена не только CSS но и HTML с запоминанием на куках |
| Смена не только CSS но и HTML с запоминанием на куках |
|
Есть такой скрит, с помощью которого можно менять стили сайта с запоминанием на куках.
Код <link id="dyncss" rel="stylesheet" type="text/css" href=""> <script type="text/javascript"> function setDynCSS(url) { if (!arguments.length) { url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1]; if (!url) return ''; } document.getElementById('dyncss').href = url; var d = new Date(); d.setFullYear(d.getFullYear() + 1); document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join(''); return url; } setDynCSS(); span></script> Код <img style="cursor:pointer;" src="Ссылка на картинку 1" onclick="setDynCSS('Ссылка на стиль 1.css')"> <img style="cursor:pointer;" src="Ссылка на картинку 1" onclick="setDynCSS('Ссылка на стиль 2.css')"> Подскажите, как сделать так, что бы можно было менять не только CSS но и HTML. Я просто хочу сделать в каталоге файлов, несколько вариантов вида материалов. И у них будет меняться не только стиль, ну и сама структура на HTML, то есть мне нужно менять ещё и HTML код. К примеру было так: <div id="vm-d1">вид материалов вариант 1</div> А при нажатии кнопки стало так: <div id="vm-d2">вид материалов вариант 2</div> PS (в каждом виде, структура будет разная, и смены только CSS не достаточно)    Сообщение отредактировал Rad_van_Cor - Понедельник, 04 Ноя 2013, 15:47:10
|
|
Ну, скрипт уже запоминает два состояния. И в нем есть проверка условия.. если состояние 1, то... если состояние 2 то... Вот после проверки этих состояний, можно запускать функцию, которая, допустим, добавит блоку класс = $("vm-d1").addClass("class1"); а потом - удалит его. removeClass Наверно, есть и получше идеи, но так мне кажется проще. Подойдет так?
Сообщение отредактировал Solaris(Olga) - Понедельник, 04 Ноя 2013, 16:20:35
|
|
Solaris(Olga), присвоение класа блоку не достаточно.
Повторюсь, структура блоков будет разная. К примеру, в первом варианте такая структура  Типа материалы идут в одну колонку, один под другим. Во втором варианте так:  Материалы идут в две колонки. У каждого вида будет индивидуальный HTML код, который нужно выводить. То есть нужно не просто менять класс диву, а полностью менять HTML код. Прикрепления:
7164071.jpg
(67.2 Kb)
·
6957167.jpg
(81.1 Kb)
|
|
Rad_van_Cor, А вы не задумывались о нагрузке наворотов на компьютер конечного пользователя ??
|
|
Miss_Esq, ой, да не велика нагрузка там будет.
|
|
Rad_van_Cor, Вы частелько на форуме вопрошаете по скриптам ...
 А если соберёте все свои задумки в одном сайте.. не думаю что он будет легко проворачиваться.. да и целесообразность сомнительна, хотя как эксперимент вполне приличная задача ... |
|
Цитата Miss_Esq (  )Вы частелько на форуме вопрошаете по скриптам ... biggrin А если соберёте все свои задумки в одном сайте.. Ну не все они для одного сайта)))) |
|
Цитата Rad_van_Cor ( )Типа материалы идут в одну колонку, один под другим. Во втором варианте так: Материалы идут в две колонки. |
|
Rad_van_Cor, рекомендую вместо кук использовать localStorage. То что ты хочешь- в принципе не долго сделать, но я уверен, что и средствами CSS обойтись можно. Скинь конкретные макеты (отрисуй в ФШ). с черными квадратами - ничего не понятно. И скажу как это лучше сделать. Ну а сделаю за отдельный разговор.
Можешь забрать этот код и вставить его себе, сам знаешь куда.
|
|
Head-Mad, я лучше сейчас пропиш HTML и CSS в двух вариантах.
И кину тебе в лс, ну и там тогда обсудим что к чему да почём) |
|
Цитата Head-Mad ( )средствами CSS обойтись можно --- Мне на яваскрипт ру советовали по похожему проекту подгружать данные аяксом и использовать шаблонизатор. Может это вам тоже поможет. |
|
По сути, можно конечно и одним CSS обойтись, по типу как здесь
 Но нам при переключении вида, структура по сути не сильно то и меняется. А Я хочу вообще два (может и три/четыре) разных вида сделать. При том, допустим в одном виде будет краткое описание, в другом не будет. Можно его через display:none в css скрывать. Но хочу всё же попробовать сделать так, что бы при нажатии менялось всё, и CSS и HTML Прикрепления:
0108738.jpg
(279.8 Kb)
|
|
Цитата Rad_van_Cor ( )А Я хочу вообще два (может и три/четыре) разных вида сделать. Можешь забрать этот код и вставить его себе, сам знаешь куда.
|
|
В общем решение проблемы нашёл один старый-добрый товарищ Андрей, который в рунете больше известен как jQuery.
И так, для начала нужно подключить jquery.cookie.js и установить кнопки переключения вида материалов. Код <script type="text/javascript" src="/jquery.cookie.js"></script> <a class="switcher_v s_vid1 switcher_active" href="javascript://" data-unique-type="vid1" onclick="$('.switcher_v').removeClass('switcher_active'); $(this).addClass('switcher_active'); $('.vid').hide(); $('.'+$(this).data('unique-type')).show(); $.cookie('vid',$(this).data('unique-type'),{expires:9999};)">Вид 1</a> <a class="switcher_v s_vid2" href="javascript://" data-unique-type="vid2" onclick="$('.switcher_v').removeClass('switcher_active'); $(this).addClass('switcher_active'); $('.vid').hide(); $('.'+$(this).data('unique-type')).show(); $.cookie('vid',$(this).data('unique-type'),{expires:9999};)">Вид 2</a> Затем в виде материалов прописываем несколько видов, и каждый вид оборачиваем в див со своим класом. Код <div class="vid vid1">тут код вида 1</div> <div class="vid vid2">тут код вида 2</div> И после этого устанавливаем скрипт Код <script> if($.cookie('vid')!=null){ $('.vid').hide(); $('.'+$.cookie('vid')).show(); $('.switcher_v').removeClass('switcher_active'); $('.s_'+$.cookie('vid')).addClass('switcher_active') } </script> А в css скрываем все блоки кроме первого, в нашем случае скрывать нужно "vid2" Код .vid2 {display:none;} При переключении меняются блоки + кнопки меняют класс, для того, что бы можно было выделить активную кнопку. Выложил сюда, может кому пригодиться  Сообщение отредактировал Rad_van_Cor - Вторник, 05 Ноя 2013, 00:01:43
|
|
Цитата Rad_van_Cor ( )В общем решение проблемы нашёл один старый-добрый товарищ Андрей, который в рунете больше известен как jQuery. Andre, ты что ль?! Цитата Rad_van_Cor ( )Затем в виде материалов прописываем несколько видов, и каждый вид оборачиваем в див со своим класом. И имеем кучу говнокода и повторяющегося контента. Более правильный способ: в куках хранить название файла css. А на странице уже подключать через скрипт нужный файл со стилями Вы полюбили меня. Здесь я. (с)
Сообщение отредактировал Ferro7 - Среда, 06 Ноя 2013, 00:38:09
|
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!