—»     —»   Разрабатываем экран загрузки на подобии iOS с помощью CoffeeScript
  Раздел: Меню и Навигация, Руководства, Скрипты и коды   Комментариев: 1  

Разрабатываем экран загрузки на подобии iOS с помощью CoffeeScript

Сегодня мы расскажем вам о создании экрана загрузки на подобии iOS с помощью CoffeeScript – новая jQuery-библиотека, основанная на javascript. CoffeeScript предлагает вам понятный синтаксис, напоминающий нечто вроде Ruby и Python. Если вы не знакомы с данными языками, не беспокойтесь – эти знания вам не потребуются. Тем не менее, вы должны быть знакомы с javascript, вам следовало бы понимать принцип работы.

Мы также воспользуемся плагином Touchable, чтобы иметь возможность определять события от прикосновений.

Что такое CoffeeScript?

CoffeeScript – это удобный язык программирования, который поможет вам расширить основу javascript. Библиотека значительно облегчает объектно-ориентированное программирование, предлагает множество полезных дополнений и некоторые небольшие улучшения.

CoffeeScript работает во всех браузерах, и совместима с любым существующим кодом javascript (включая библиотеки типа jQuery и плагины). Но как же она будет работать, если язык отличается? Просто – CoffeeScript компилирует его в javascript, поэтому и работает во всех браузерах и поддерживает их.

Перед началом ознакомления, мы рекомендуем вам ознакомиться с примерами на сайте CoffeeScript (не забудьте посетить вкладку «Try CoffeeScript»), а также возьмите на приметку издание «The Little Book on CoffeeScript», чтобы немного познакомиться с языком.

Разрабатываем экран загрузки на подобии iOS с помощью CoffeeScript

HTML-код

Давайте начнем с верстки HTML для нашего экрана загрузки. Как обычно, будем использовать документ HTML5 с таблицами стилей в шапке, и включенным JS перед закрывающим тегом body.

Index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iOS Home Screen with CoffeeScript | Tutorialzine Demo</title>

<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<section id="homeScreen">
<div id="mask">
<div id="allScreens">
<!-- The .screen divs will go here -->
</div>
</div>

<ul id="indicators">
<!-- A LI element for every screen -->
</ul>

<div id="dock">
<!-- The three dock icons will go here -->
</div>
</section>

<!-- javascript includes -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="assets/js/touchable.js"></script>
<script src="assets/js/coffee-script.js"></script>

<script type="text/coffeescript">

# Our Code Goes Here

</script>

</body>
</html>

У нас есть раздел #homeScreen, который и будет основным контейнером для нашего эксперимента. Внутри будет #mask, где используется overflow:hidden, чтобы в тот момент был отображен только экран загрузки. Div #allScreens внутри него (как видно по названию) будет содержать все динамически сгенерированные div’ы .screen с иконками.

Разрабатываем экран загрузки на подобии iOS с помощью CoffeeScript

Далее идут ul’ы #indicators, которые отображают нам маленькие точки с на данный момент отображенным краном, а также div #dock.

Как ранее было сказано, CoffeeScript требует дополнительного этапа компиляции, который позволит вам конвертировать исходный код в javascript. Вы сможете делать это посредством coffeescript для node.js (как указано на сайте), либо посредством coffeescript.exe для Windows, который отлично работает отдельно. Что касается маленьких скриптов, вы также можете включить компилятор напрямую в страницу, и вписывать нужный код в тег «script» (который мы и будем использовать сегодня.

В нижней части страницы вы можете видеть наши включенные скрипты. Это у нас библиотека jQuery, плагин Touchable, что позволяет нам работать с событиям при касаниях, а также компилятор CoffeeScript – coffee-script.js. Компилятор будет исследовать страницу на наличие «script type="text/coffeescript"», где мы будем вписывать наш код.

Код CoffeeScript

Так как мы пишем строчный код, нам не нужно компилировать его перед размещением в веб-странице. Это отлично подходит для небольших веб-страниц, а также во время разработки. Те не менее, если вы планируете разрабатывать большие приложения, то было бы лучше скомпилировать код, используя приведенные выше инструменты.

Теперь давайте приступим к написанию простого класса – Icon.

# The Icon class. 

class Icon

# The constructor. The -> arrow signifies
# a function definition.

constructor: (@id, @title) ->
# @ is synonymous for "this". The id and title parameters
# of the constructor are automatically added as this.id and this.title

# @markup holds the HTML of the icon. It is
# transformed to this.markup behind the scenes.

@markup = "<div class='icon' style='background-image:url(assets/img/icons/#{@id}.png)'
title='#{@title}'></div>"

Объекты данного класса будут представлять иконки на экране загрузки. Каждая иконка будет обозначена параметром, содержащим HTML-код, нужный для ее отображения. Вы можете видеть, что функции в CoffeeScript определяются стрелками (->), а параметры функции указаны в левой части, в скобках. Учтите, что здесь комментарии начинают с символа #. Вы можете использовать три ### для определения многострочных комментариев.

Теперь давайте определим класс для иконок панели. Он будет очень похожим на класс icon, мы просто расширим его:

# The DockIcon class inherits from Icon

class DockIcon extends Icon
constructor: (id, title)->

# This calls the constructor if Icon

super(id, title)

# Changing the class name of the generated HTML
@markup = @markup.replace("class='icon'","class='dockicon'")

Используя super() мы можем вызвать конструктор иконок и инициализировать параметры верстки. Нам можно нужно заменить имя класса.

Мы разделим экран загрузки на отдельные div’ы .screen, и у каждого из них будет собственный набор иконок. Давайте рассмотрим его класс:

# The Screen Class

class Screen

# Function arguments can have default values
constructor: (icons = [])->
@icons = icons

attachIcons: (icons = [])->
Array.prototype.push.apply(@icons, icons)

generate: ->
markup = []

# Looping through the @icons array
markup.push(icon.markup) for icon in @icons

# The last line of every function is implicitly returned
"<div class='screen'>#{markup.join('')}</div>"

Вместо параметров верстки, мы будем использовать метод generate(), который вернет нам HTML-код. Учтите то, как мы зацикливаем массив, такой метод называется включение. Часть перед 4 ключевиком выполняется в каждом элементе в массиве иконок.

Разрабатываем экран загрузки на подобии iOS с помощью CoffeeScript

Теперь нам нужен класс, который соберет все вместе, а также будет контролировать переходы между экранами. Вот так это всё должно выглядеть:

class Stage

# The width of our "device" screen. This is
# basically the width of the #mask div.

screenWidth: 332

constructor: (icons)->

@currentScreen = 0
@screens = []

# Calculating the number of screens
# necessary to display all the icons

num = Math.ceil(icons.length / 9)
i = 0

while num--
# we pass a slice of the icons array
s = new Screen(icons[i...i+9])

# adding the screen to the local screens array
@screens.push(s)

i+=9

# This method populates the passed element with HTML
addScreensTo: (element)->

# We are using the jQuery library from within CS:
@element = $(element)
@element.width(@screens.length*@screenWidth)

for screen in @screens
@element.append(screen.generate())

addIndicatorsTo: (elem)->

# This method creates the small circular
# indicators. Also using jQuery

@ul = $(elem)

for screen in @screens
@ul.append('<li>')

@ul.find('li:first').addClass('active');

# ... More methods go here ...

Stage берёт массив иконок в конструкторе. Далее производится вычисление, сколько потребуется экранов, и создается объект для каждого из них, заполняя его частью массива иконок.

Теперь у нас есть разметка для всех элементов на странице, но все еще отсутствуют методы контроля переходов между отрезками. Вы можете видеть их ниже (оставшийся код класса Stage):

goTo: (screenNum)->

# This method animates the allScreen div in
# order to expose the needed screen in #mask

if @element.is(':animated')
return false

# if this is the first or last screen,
# run the end of scroll animation

if @currentScreen == screenNum

# Parallel assignment:
[from, to] = ['+=15','-=15']

if @currentScreen != 0
[from, to] = [to, from]

# Tell the user there aren't any more screens:
@element.animate( { marginLeft : from }, 150 )
.animate( { marginLeft : to }, 150 )
else
# If everything is ok, animate the transition between the screens.
# The fat arrow => is a function that preserves the context of "this"

@element.animate( { marginLeft:-screenNum*@screenWidth }, => @currentScreen = screenNum )
@ul.find('li').removeClass('active').eq(screenNum).addClass('active');

next: ->
toShow = @currentScreen+1

# If there is no next screen, show
# the last one

if toShow == @screens.length
toShow = @screens.length - 1

@goTo(toShow)

previous: ->
toShow = @currentScreen-1

# If there is no previous screen,
# show the first one

if toShow == -1
toShow = 0

@goTo(toShow)

Как метод next(), так и previous() вызывают goTo() внутренне, проводя номер экрана (начиная от 0). Метод goTo() анимирует div #allScreen для отображения нужного экрана.

Нам осталось лишь закрепить функцию к событию document.ready. Для этого мы воспользуемся jQuery.

# This is equivalent to $(function(){}):

$ ->

# You can skip the comma if it's on the end of a line:
allIcons = [
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
new Icon('Chuzzle', 'Chuzzle'), new Icon('Safari', 'Safari')
new Icon('Weather', 'Weather'), new Icon('nes', 'NES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('BossPrefs', 'Boss Prefs'), new Icon('Chess', 'Chess')
new Icon('Mail', 'Mail'), new Icon('Phone', 'Phone')
new Icon('SMS', 'SMS Center'), new Icon('Camera', 'Camera')
new Icon('iPod', 'iPod'), new Icon('Calculator', 'Calculator')
new Icon('Music', 'Music'), new Icon('Poof', 'Poof')
new Icon('Settings', 'Settings'), new Icon('YouTube', 'Youtube')
new Icon('psx4all', 'PSx4All'), new Icon('VideoRecorder', 'Record Video')
new Icon('Installer', 'Installer'), new Icon('Notes', 'Notes')
new Icon('RagingThunder', 'RagingThunder'), new Icon('Stocks', 'Stocks')
new Icon('genesis4iphone', 'Genesis'), new Icon('snes4iphone', 'SNES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
]

dockIcons = [
new DockIcon('Camera', 'Camera')
new DockIcon('iPod', 'iPod')
new DockIcon('Calculator', 'Calculator')
]

allScreens = $('#allScreens')

# Using the Touchable plugin to listen for
# touch based events:

allScreens.Touchable();

# Creating a new stage object
stage = new Stage(allIcons)

stage.addScreensTo(allScreens)
stage.addIndicatorsTo('#indicators')

# Listening for the touchablemove event.
# Notice the callback function. Braces on
# function calls are optional
allScreens.bind 'touchablemove', (e,touch)->
stage.next() if touch.currentDelta.x < -5
stage.previous() if touch.currentDelta.x > 5

# Adding the dock icons:

dock = $('#dock')

for icon in dockIcons
dock.append(icon.markup)

Вызывая метод Touchable, мы расширяем элемент до поддержки нескольких событий, вызванный касаниями. Среди них можно выделить touchablemove, который выполняет когда пользователь двигает пальцем по экрану. Он также запускается, когда мы перетаскиваем курсор мыши. Далее, когда мы закрепляем этот жест к событию, у нас в качестве второго аргумента функции обратного вызова получается touch-объект. Он удерживает фигуру, либо разность от самого начала движения.

На этом наш экран загрузки на подобии iOS готов!

Вывод

CoffeeScript – интересный язык, который может сделать разработку для браузера легче. Можете рассчитывать на то, что кода придется писать на 50% меньше, чем в чистом javascript.

Хотя вряд ли можно сказать, что CoffeeScript вскоре может заменить javascript, так как данная система жертвует возможностями в целях облегчения кода. CS вероятно не подойдет для всех ваших проектов.

CoffeeScript также предлагает вам дополнительный этап компиляции, который оградит вас от кода, но это можно решить с помощью веб-платформ, которые скомпилируют для вас код в rails, где CS идет по умолчанию.

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, jQuery, CoffeeScript
Опубликовал Design FactoRy   Прочитано (раз): 5993   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 февраля 2012 @ 20:58
Написал: Марина — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
отлично! Я давно искала в сети такой материал, и наконец-то нашла. огромное спасибо автору!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031