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

« Предыдущая запись
 
  Следующая запись »
 

Всем привет! Не прошло и полгода… вру, прошло, ну да ладно! Не прошло и года, как я добрался реализовать не особо полезную, но прикольную фичу, которая зародилась в моей голове уже довольно давно. А началась она со знакомства с двумя, казалось бы ничем не связанными скриптами, созданными на 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

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

, ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 4, средний: 4.25 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 15 на запись

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

  1. вредный друг из Минска
    15/10/2011 at 12:00 Постоянная ссылка Цитировать

    никакой анонимности, блин…

  2. а ты чо хотел, всё открыто ;)

  3. Хей! А как же друпал? =)

  4. ну, если сам доберусь или найду друпального гуру, то и по друпалу тоже =)

  5. Есть какое-то общее направление для разделов по CMS, цели? Или все подряд? А то может пришлю чего..

  6. ну, общая цель – это полезная информация, решения самых частых вопросов, решения уникальных задач – главное, чтобы полезно и актуально было. так что по сути – всё подряд =)

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

    если интересны детали – что, как и, главное, зачем – пиши на почту, там обсудим =)

  7. Алекс, в третем примере кодировка слетела у вас.
    Доп.Инф.( у меня Лиса 7 браузер )

  8. Спасибо!
    Забыл в хидере написать метатег с кодировкой – позарился на то, что везде всё нормально было =)

  9. Чет не понял зачем вообще энергосберегающий скрипт? в чем его плюсы , объясните туго уму ))) если не сложно

  10. ну, оставил комп с врубленной страницей и ушёл за чаем. или по телефону трещать. и трещишь там, или чай хрумкаешь, а монитор горит-горит, подсвечивает свои ячейки. а тут опа, чёрный экран – электричества меньше надо. лампочки считай не горят, вот оно и счастье. ну, плюс к этому – симпатично =)

  11. Кстати интересно, айфон сам экран при простое не выключает с блокировкой? :-)

  12. проверил – через минуту простоя он втихаря включает блок =)

  13. Дмитрий
    01/12/2011 at 7:55 Постоянная ссылка Цитировать

    Симпатишно, но в примере ползунок все-таки выезжает. (opera)

  14. ааа, вижу. ну, допилить значит что-то надо.
    с появлением 10 оперы стала она совсем кривая, всё время костыли нужны… печаль

  15. А как сделать редирект

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии