[Скачать] Обновление стилей CSS без перезагрузки страницы - ReloadCSS - Joomla 1.5: Разработка шаблонов

PaLyCH

Давно я тут
932
146 / 19
Архитектор сайтов

[Скачать] Обновление стилей CSS без перезагрузки страницы - ReloadCSS

« : 10.09.2010, 09:54:13 »

Часто так бывает, что внося изменения в стили CSS верстальщик постоянно обновляет страницу. Порою это сильно раздражает, особенно когда внесли изменения в HTML с помощью FireBug-а или инструментов разработчика в других браузерах. В итоге с могучим JS программистом Игорем Демньяновым написали скрипт, который перезагружает с сервера файлы стилей, так называемый ReloadCSS.

Чтобы включить такой функционал у вас на сайте, требуется сделать 4 простых шага.

1. Кладем скрипт в любую папку. У меня лежит в папке шаблона lisp
/templates/lisp/js/dev.js

2. Подключить JS следующим кодом в файле index.php шаблона

Код: html4strict

<script type="text/javascript" src="/templates/lisp/js/dev.js"></script>

3. В HTML код вставляем ссылку, в любое место index.php шаблона . Лучше в начала или в конец

Код: html4strict

<a href="#" onclick="DeveloperTool.Init().ReloadAllCSSThisPage()" class="dev-css">Обновить CSS</a>

4. Описываем стили. У меня лично такие, а там уже кто как хочет оформляет кнопку Reload CSS по своему:

Код: css

.dev-css { 
    position:fixed;
    left:1em;
    top:1em;
    display:block;
    float:left;
    padding:1em;
    border-radius:7px;
    background-color: rgba(0, 0, 0, 0.6);
    color:#FFF}

Скачать файл dev.js
Статья оригинал - Обновление стилей CSS без перезагрузки страницы - Reload CSS

« Последнее редактирование: 16.08.2016, 10:29:40 от PaLyCH »

Записан

Исполняю нескромные мечты

SmokerMan

Гуру
5293
719 / 26

Re: [Скачать] Обновление стилей CSS без перезагрузки страницы - ReloadCSS

« Ответ #1 : 10.09.2010, 10:52:45 »

Чего-то я смысл этой затеи не пойму. Типа лучше кликнуть на кнопку чем нажать Ctrl+R

Цитировать

Порою это сильно раздражает, особенно когда внесли изменения в HTML с помощью FireBug-а или инструментов разработчика в других браузерах

Этот скрипт просто обновляет файлы CSS и причем здесь FireBug? При внесении изменений в нем файлы то остаются вроде как не тронутыми.

Записан

PaLyCH

Давно я тут
932
146 / 19
Архитектор сайтов

Re: [Скачать] Обновление стилей CSS без перезагрузки страницы - ReloadCSS

« Ответ #2 : 10.09.2010, 10:58:47 »

Цитата: SmokerMan от 10.09.2010, 10:52:45

Чего-то я смысл этой затеи не пойму. Типа лучше кликнуть на кнопку чем нажать Ctrl+R :)Этот скрипт просто обновляет файлы CSS и причем здесь FireBug? При внесении изменений в нем файлы то остаются вроде как не тронутыми.

Одно дело перезагрузить файлик весом в 5 кб, а не весь сайт весом в 600-700 Килобайт, очень удобно. Изменения видишь быстрее. Я просто кайфую от удобства и быстродействия

Записан

Исполняю нескромные мечты

Professor

Захожу иногда
59
10 / 0

Re: [Скачать] Обновление стилей CSS без перезагрузки страницы - ReloadCSS

« Ответ #3 : 28.01.2011, 16:02:55 »

Клёво, буду использовать. Спасибо. Оно конечно не необходимо, но может немного упросить жизнь)

Записан

Все под небом.

DimNsk

Осваиваюсь на форуме
48
3 / 0

Re: [Скачать] Обновление стилей CSS без перезагрузки страницы - ReloadCSS

« Ответ #4 : 27.10.2011, 10:34:36 »

зачем так сложно

ярлык на панель со следующим кодом

Код

javascript:void(function(){var%20i,a,s;a=document.getElementsByTagName('link');for(i=0;i<a.length;i++){s=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href)%20{var%20h=s.href.replace(/(&|%5C?)forceReload=\d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new%20Date().valueOf())}}})();

Записан

Создание новых стилей вывода модуля в файле modules.php Автор beliyadm	Ответов: 4 Просмотров: 13034	24.01.2014, 18:52:18 от faradej
Сдвиг дивов в зависимости от масштаба страницы. Как пофиксить? Автор Taatshi	Ответов: 4 Просмотров: 1723	25.12.2011, 15:03:24 от dynamit
[Решено] Пришло обновление в виде Firefox 3.6.4 и с ним проблемы (завтык с маштабом) Автор SpecTR	Ответов: 3 Просмотров: 1504	24.06.2010, 14:03:33 от SpecTR

Похожие темы