Всем привет! Не прошло и полгода… вру, прошло, ну да ладно! Не прошло и года, как я добрался реализовать не особо полезную, но прикольную фичу, которая зародилась в моей голове уже довольно давно. А началась она со знакомства с двумя, казалось бы ничем не связанными скриптами, созданными на jQuery.
Мини-объявление
Но прежде, чем я напишу по существу, хочу сделать объявление. По результатам последнего опроса, было решено создать раздел, посвящённый различным CMS'кам. И даже пара отрицательных голосов не помещают этому. К слову, среди этих сливных голосов один робот, один недоброжелатель и один вредный друг из Минска, которому я с радостью передаю привет – Андрюха, дарова, задница ты эдакая =)
Так вот. Пока будут заведены подразделы по Wordpress и Joomla. Первым подразделом займусь я, но чуть попозже, а второй подраздел возьмёт под своё крыло мой старый не по возрасту коллега – Борис. Вы его увидите на сайте не иначе как "Жумловед Борис" и этим будет всё сказано. Он уже с Жумлой знаком давно, решал многие проблемы, поэтому с радостью начнёт делиться с Вами опытом в ближайшее время. А пока…
Скрипт 1 – Энергосберегающий экран
Этот скрипт я нашёл где-то случайно, оставив какую-то веб-страничку без присмотра. После минуты простоя и бездействия на странице, всплывает чёрный экран с надписью, что так и так, режим энергосбережения. Полезно? Однозначно! .
Скрипт 2 – разблокировка в стиле IPhone
На CSSTricks я увидел на html5 и jQuery слайдинг в стиле разблокировки клавиатуры на IPhone – Slide to Unlock. Идея и исполнение мне очень понравилось, за исключением двух пунктов.
Ползунок убегает за пределы рамки, хотя в АйФоне он упирается (и ведёт себя как нормальный такой ползунок – прим.ред.). Вероятно, что в этом виноват второй пункт негодования, связанный с версией jQuery. Плагин успешно работает на 1.4.х, но на 1.6 с копейками он ведёт себя криво. Плюс, в кода есть блок эдак строчек на двадцать, закомментив который ровным счётом ничего не меняется. Разбираться зачем он, я не стал.
Баг ползунка исправляется буквальной парой строчек кода, но об этом ниже. Ещё необходимо сказать, что для корректной работы, если вы ещё не догадались, нужно прописать <!DOCTYPE html> и никакой другой. Всё таки тут завязка на html5.
Скрипт 3 – Энергосберегающий экран с разблокировкой от IPhone
И вот она – случайно родившаяся идея. А почему бы не сделать так, чтобы появляющийся энергосберегающий экран отключался при помощи ползунка от айфона? И стильно, и красиво (и энергию экономит – прим.ред.).
Чуть ниже вы найдёте ссылку на пример и на архив с примером, который наглядно демонстрирует возможности этого симбиоза. Освещу всего лишь несколько самых важных моментов. Для наглядности откройте файл slidetounlock.js в любимом кодерском редакторе с нумерацией строк кода.
- В первых двух строках определены переменные счётчика времени и вкл/выкл для режима сохранения энергии.
- Строки 3-8. Проверка бездействия пользователя. Добавляем +10 у.е., и если суммарно набралось 20 этих самых у.е., то врубаем экран.
- Строки 9-18. Проверяем включён ли чёрный экран и если нет, то подрубаем – растягиваем окно анимацией и изменяем переменную включённости режима.
- Строки 19-25. Тоже самое, но наоборот. То есть, отключаем энергосберегающий режим.
- Строки 27-40. Объявляем. а потом инициализируем функцию проверки бездействия пользователя и вывода чёрного экрана. Обращаю внимание на 30 строку. Тут задаём в миллисекундах время, через которое активируем экран. Однако, напоминаю, что в 3-8 строках есть ещё +10 уе. Посмотрите – в совокупности эти два параметра дают общее время. То есть, если setInterval 1 секунда, и в проверке пятой строки стоит цифра 20, то экран появится не через секунду, а через две секунды. Также, в 36 строке, оставлено отключение экрана по нажатию на клавиши клавиатуры – на всяк случай.
- Оставшийся код – это к слайдеру айфона. Обращаю внимание на 49 и 53 строки. Именно о них я говорил ранее и именно они ограничивают ползунок, чтобы он не заползал за пределы своего блока. А 50я строка отвечает за то, что когда ползунок передвинем, то нужно отключить энергосберегающий экран. Именно здесь можно задавать всё то, что нужно делать после перемещения ползунка направо. Как вариант - перезагружать страницу.
Вот, пожалуй, и всё. Надеюсь, что рецепт будет полезен и интересен окружающим. Конечно же, буду рад комментам и отзывам (любым – прим.ред.).