Пользовательские стили с сохранением в localStorage
827материалов
228тем на форуме
3003комментария
6152пользователя

Пользовательские стили с сохранением в localStorage


Скрипт создания пользовательских стилей. Название говорит само за себя: скрипт позволит пользователям сайта стилизовать страницу по своему вкусу, если они, конечно, разбираются в CSS. Данный скрипт можно использовать как инспектор: применив определенные стили на страницу, вы сразу увидите результат. Сохраняются стили в HTML5 localStorage.

Аналог этого скрипта существует в виде приложения для Chrome: Stylish.
Скрипт написан в двух версиях: с использованием uWnd и myModal-окон
Установка скрипта:
Перед < /body > вставляем скрипт:
1.1. myModal-версия:
Код
<script type="text/javascript">    
userCss = {    
    open:function(){myModal.create('usercss','Пользовательские стили',500,500,'<div style="padding:5px;margin:0 0 5px;border:3px double #e5e5e5;text-align:justify;"><b>userCss</b> - модуль пользовательских стилей. В поле, указанном ниже, вы можете стилизовать любой элемент сайта, используя средства CSS.</div><textarea rows="15" style="width:100%;font:12px \'Courier New\', monoscape;" name="usercss" placeholder="Ваш код CSS..."></textarea><input type="button" style="width:100%;" onclick="userCss.save();" value="Сохранить">',{modal:1,overflow:'hidden'});if(localStorage.getItem('userCss'))$('[name=usercss]').val(localStorage.getItem('userCss'));},    
    save:function(){a =$('[name=usercss]').val();localStorage.setItem('userCss',a);userCss.show();myModal.close('usercss');},    
    show:function(){if($('#usrcss').text() != '')$('#usrcss').text(localStorage.getItem('userCss')); else$('body').prepend('<style type="text/css" id="usrcss">'+localStorage.getItem('userCss')+'</style>');}    
}    
userCss.show();    
</script>

1.2. uWnd-версия:
Код
<script type="text/javascript">    
userCss = {    
    open:function(){new _uWnd('usercss','Пользовательские стили',500,500,{autosize:1,resize:0,modal:1,oncontent:function(){if(localStorage.getItem('userCss'))$('[name=usercss]').val(localStorage.getItem('userCss'));}},'<div style="padding:5px;margin:0 0 5px;border:3px double #e5e5e5;text-align:justify;"><b>userCss</b> - модуль пользовательских стилей. В поле, указанном ниже, вы можете стилизовать любой элемент сайта, используя средства CSS.</div><textarea rows="15" style="width:100%;font:12px \'Courier New\', monoscape;" name="usercss" placeholder="Ваш код CSS..."></textarea><input type="button" style="width:100%;" onclick="userCss.save();" value="Сохранить">');},    
    save:function(){a =$('[name=usercss]').val();localStorage.setItem('userCss',a);userCss.show();_uWnd.close('usercss');},    
    show:function(){if($('#usrcss').text() != '')$('#usrcss').text(localStorage.getItem('userCss')); else$('body').prepend('<style type="text/css" id="usrcss">'+localStorage.getItem('userCss')+'</style>');}    
}    
userCss.show();    
</script>

В нужное место вставляем ссылку:
Код
<a href="javascript:userCss.open();">userCss</a>
На это установка заканчивается.

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 29.06.2013 в 15:47
Материал просмотрен: 650 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта