Quantcast
Channel: ShuBlog » jQuery
Viewing all articles
Browse latest Browse all 20

Энергосберегающий экран плюс блок от iPhone на jQuery

0
0

Всем привет! Не прошло и полгода… вру, прошло, ну да ладно! Не прошло и года, как я добрался реализовать не особо полезную, но прикольную фичу, которая зародилась в моей голове уже довольно давно. А началась она со знакомства с двумя, казалось бы ничем не связанными скриптами, созданными на jQuery.

Мини-объявление

Но прежде, чем я напишу по существу, хочу сделать объявление. По результатам последнего опроса, было решено создать раздел, посвящённый различным CMS'кам. И даже пара отрицательных голосов не помещают этому. К слову, среди этих сливных голосов один робот, один недоброжелатель и один вредный друг из Минска, которому я с радостью передаю привет – Андрюха, дарова, задница ты эдакая =)

Так вот. Пока будут заведены подразделы по Wordpress и Joomla. Первым подразделом займусь я, но чуть попозже, а второй подраздел возьмёт под своё крыло мой старый не по возрасту коллега – Борис. Вы его увидите на сайте не иначе как "Жумловед Борис" и этим будет всё сказано. Он уже с Жумлой знаком давно, решал многие проблемы, поэтому с радостью начнёт делиться с Вами опытом в ближайшее время. А пока…


Скрипт 1 – Энергосберегающий экран

Этот скрипт я нашёл где-то случайно, оставив какую-то веб-страничку без присмотра. После минуты простоя и бездействия на странице, всплывает чёрный экран с надписью, что так и так, режим энергосбережения. Полезно? Однозначно! .

 

nrgsave Энергосберегающий экран плюс блок от iPhone на jQuery

Скрипт 2 – разблокировка в стиле IPhone

На CSSTricks я увидел на html5 и jQuery слайдинг в стиле разблокировки клавиатуры на IPhone – Slide to Unlock. Идея и исполнение мне очень понравилось, за исключением двух пунктов.

Ползунок убегает за пределы рамки, хотя в АйФоне он упирается (и ведёт себя как нормальный такой ползунок – прим.ред.). Вероятно, что в этом виноват второй пункт негодования, связанный с версией jQuery. Плагин успешно работает на 1.4.х, но на 1.6 с копейками он ведёт себя криво. Плюс, в кода есть блок эдак строчек на двадцать, закомментив который ровным счётом ничего не меняется. Разбираться зачем он, я не стал.

Баг ползунка исправляется буквальной парой строчек кода, но об этом ниже. Ещё необходимо сказать, что для корректной работы, если вы ещё не догадались, нужно прописать <!DOCTYPE html> и никакой другой. Всё таки тут завязка на html5.

 

slide to unlock Энергосберегающий экран плюс блок от iPhone на jQuery

Скрипт 3 – Энергосберегающий экран с разблокировкой от IPhone

И вот она – случайно родившаяся идея. А почему бы не сделать так, чтобы появляющийся энергосберегающий экран отключался при помощи ползунка от айфона? И стильно, и красиво (и энергию экономит – прим.ред.).

Чуть ниже вы найдёте ссылку на пример и на архив с примером, который наглядно демонстрирует возможности этого симбиоза. Освещу всего лишь несколько самых важных моментов. Для наглядности откройте файл slidetounlock.js в любимом кодерском редакторе с нумерацией строк кода.

  1. В первых двух строках определены переменные счётчика времени и вкл/выкл для режима сохранения энергии.
  2. Строки 3-8. Проверка бездействия пользователя. Добавляем +10 у.е., и если суммарно набралось 20 этих самых у.е., то врубаем экран.
  3. Строки 9-18. Проверяем включён ли чёрный экран и если нет, то подрубаем – растягиваем окно анимацией и изменяем переменную включённости режима.
  4. Строки 19-25. Тоже самое, но наоборот. То есть, отключаем энергосберегающий режим.
  5. Строки 27-40. Объявляем. а потом инициализируем функцию проверки бездействия пользователя и вывода чёрного экрана. Обращаю внимание на 30 строку. Тут задаём в миллисекундах время, через которое активируем экран. Однако, напоминаю, что в 3-8 строках есть ещё +10 уе. Посмотрите – в совокупности эти два параметра дают общее время. То есть, если setInterval 1 секунда, и в проверке пятой строки стоит цифра 20, то экран появится не через секунду, а через две секунды. Также, в 36 строке, оставлено отключение экрана по нажатию на клавиши клавиатуры – на всяк случай.
  6. Оставшийся код – это к слайдеру айфона. Обращаю внимание на 49 и 53 строки. Именно о них я говорил ранее и именно они ограничивают ползунок, чтобы он не заползал за пределы своего блока. А 50я строка отвечает за то, что когда ползунок передвинем, то нужно отключить энергосберегающий экран. Именно здесь можно задавать всё то, что нужно делать после перемещения ползунка направо. Как вариант - перезагружать страницу.

 

nrgsaveiphone thumb Энергосберегающий экран плюс блок от iPhone на jQuery

Вот, пожалуй, и всё. Надеюсь, что рецепт будет полезен и интересен окружающим. Конечно же, буду рад комментам и отзывам (любым – прим.ред.).


Viewing all articles
Browse latest Browse all 20

Latest Images

Vimeo 10.7.0 by Vimeo.com, Inc.

Vimeo 10.7.0 by Vimeo.com, Inc.

HANGAD

HANGAD

MAKAKAALAM

MAKAKAALAM

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Vimeo 10.6.2 by Vimeo.com, Inc.

Vimeo 10.6.2 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Re:

Re:





Latest Images

Vimeo 10.7.0 by Vimeo.com, Inc.

Vimeo 10.7.0 by Vimeo.com, Inc.

HANGAD

HANGAD

MAKAKAALAM

MAKAKAALAM

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Re:

Re:

Re:

Re: