Два стиля оформления сайта jQuery

категория: jQuery
Вернемся немного к jQuery. Я снова немного подзабыл его, решил освежить свои знания. Задание такое: есть два стиля оформления для сайта, нужно сделать переключение между ними. К примеру: есть библиотека онлайн, нужно чтобы читатель чувствовал себя комфортно при перечитывании очередной очень интересной книги. Днем будет белый фон, черные буквы, а ночью: если будет читать, то лучше чтоб фон был черный, а шрифт белым. Сделаем две кнопочки "день" и "ночь" и два стиля оформления day.css, night.css, и будем между ними переключаться. Страничка index.html, к примеру:
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="day.css">
    <script src="my.js"></script>
</head>
<body>
    <h1>Hello, World</h1>
    <button>Day</button>
    <button>Night</button>
</body>
</html>
Стили будут такие: 1) day.css:
body {
    background-color: white;
    color: black;
}
2) night.css:
body {
    background-color: black;
    color: white;
}
Скриптик будет выбирать кнопочку, которая нажата, и подставлять нужный css-файл в link. my.js:
$(document).ready(function() {
    //при нажатии на кнопку
    $('button').on('click', function() {
        var $this = $(this),
            //в переменной будет текст кнопки
            stylesheet = $this.text().toLowerCase();
        //меняем атрибут у ссылки на css-файл
        $('link').attr('href', stylesheet + '.css');
        //кнопка
        $this
            //соседняя кнопка
            .siblings('button')
		//активна
                .removeAttr('disabled')
                .end()
		//нажатая - не активна
                .attr('disabled', 'disabled');
        });
    })
Таким образом можно сделать к любому сайту несколько оформлений под настроение или по желанию заказчика, возможно на четыре поры года и т.п. Теперь вы знаете как с этим справиться.


blog comments powered by Disqus