В последнее время я увлекся jQuery Mobile до такой степени, что захотелось написать на нем что-то серьезное. Сначала возникла идея написать такую компоненту как «карусель». Затем взгляд упал на твиттер… В общем работа пошла и в итоге получилось два плагина и небольшой проект, о котором я расскажу в конце топика.
Первый плагин, как я уже и говорил, «карусель». Что это такое, я думаю, все знаю, но так или иначе демо можно найти тут.
Как использовать этот плагин. Сначала качаем его с гитхаба и подключаем carousel.js и carousel.css.
Затем создаем такой html код:
Этим мы создадим разметку для карусели. Теперь нам понадобится шаблон, по которому будут отображаться компоненты каждой вкладки. Код пишем сразу после предыдущего
Что такое @{id},@{title} и @{image}. Это значения, которые будут браться из входных данных в соответствии с именами.
Ну и сама карусель, javascript-код:
Готово, карусель появится на вашей странице.
Следующий компонент — LoadUp List. Такой компонент видели все пользователи FourSquare. Это list, в котором если потащить последний(первый) элемент, то произойдет подгрузка данных.
Рабочий пример для тач устройств можно посмотреть тут.
Для использования качаем скрипт jquery.loadup-list.js с гита.
Затем создаем список, у которого обязательно задаем id.
Теперь нам нужно создать 2 функции: onloadmove и onloadfinish
onloadmove срабатываем когда мы тянем последний элемент списка
В данном случае добавится анимированная гифка.
onloadfinish срабатывает, как только мы отпустим последний элемент списка. Соответственно пишем в него все запросы
И теперь остается всего одна строка
И готово.
Ну и напоследок о сервисе. Называется он «Короче,...» и нужен для тех людей, кто не любит читать длинные и занудные рецензии на фильмы. В нем все просто — выбираем нужный фильм, нажимаем на его плакат и читаем отзывы из твиттера. Собственно для мобильной версии сайта и делались два этих плагина. Проект сейчас больше фановый и все данные статические (и в ИЕ он не работает). Однако, если он кого-то заинтерсует, то готов сотрудничать и продвигать его дальше. В будущем хотелось бы добавить возможность поиска самого ближайшего кинотеатра с выдачей расписания, а так же автоматическое добавление/удаление кино.
UPD: перенесено в блог jQuery.
Первый плагин, как я уже и говорил, «карусель». Что это такое, я думаю, все знаю, но так или иначе демо можно найти тут.
Как использовать этот плагин. Сначала качаем его с гитхаба и подключаем carousel.js и carousel.css.
Затем создаем такой html код:
<div id="content" style="height:100%;width:300px;">
<div style="height:100%;width:300px;">
<div style="height:460px;width:300px;">
<div id="carousel" class="carousel">
<div id="carousel_scrollpane" class="carousel-content">
<div id="carousel_content" class="carousel-content-scroller"> </div>
</div>
<div id="carousel_nav" class="carousel-nav">
<div id="carousel_mid" class="carousel-mid"></div>
</div>
</div>
</div>
</div>
Этим мы создадим разметку для карусели. Теперь нам понадобится шаблон, по которому будут отображаться компоненты каждой вкладки. Код пишем сразу после предыдущего
<div id="carousel_template" style="display:none">
<div class="carousel-item">
<div style="height:2em;font-size:1.5em;padding-bottom:15px;">@{title}</div>
<div id="carousel_item_@{id}" >
<div style="float:left;width:100%"><img src="@{image}" /></div>
</div>
</div>
</div>
Что такое @{id},@{title} и @{image}. Это значения, которые будут браться из входных данных в соответствии с именами.
Ну и сама карусель, javascript-код:
var carousel = new $.widgets.Carousel( {
uuid : "carousel",
args : { "scrollInterval" : 600,"itemWidth":290},
value : [
{ "title" : "Tron.Legacy",
"image" : "images/1.jpg"
},
{ "title" : "Yogi Bear",
"image" : "images/2.jpg"
},
{ "title" : "The Chronicles of Narnia: The Voyage of the Dawn Treader",
"image" : "images/3.jpg"
},
{ "title" : "The Fighter",
"image" : "images/4.jpg"
},
{ "title" : "Tangled",
"image" : "images/5.jpg"
}
]
});
Готово, карусель появится на вашей странице.
Следующий компонент — LoadUp List. Такой компонент видели все пользователи FourSquare. Это list, в котором если потащить последний(первый) элемент, то произойдет подгрузка данных.
Рабочий пример для тач устройств можно посмотреть тут.
Для использования качаем скрипт jquery.loadup-list.js с гита.
Затем создаем список, у которого обязательно задаем id.
<div data-role="content" >
<ul data-role="listview" data-inset="true" data-theme="a" id="long-list" style="position:relative;top:0px;">
</ul>
</div>
Теперь нам нужно создать 2 функции: onloadmove и onloadfinish
onloadmove срабатываем когда мы тянем последний элемент списка
var onloadmove = function(){
$('#loader').remove();
$("#long-list").parent().append("<div id='loader' style=' margin-left: 45% ; margin-right: 49% ;'><img src='images/loader.gif' alt='Loading...'/></div>");
}
В данном случае добавится анимированная гифка.
onloadfinish срабатывает, как только мы отпустим последний элемент списка. Соответственно пишем в него все запросы
var onloadfinish = function(){
$("#long-list li:last-child").removeClass("ui-corner-bottom");
$("#long-list li:last-child").attr("tabindex","-1");
$("#long-list").append('<li role="option" tabindex="0" class="ui-li ui-li-static ui-btn-up-a ui-corner-bottom">2</li>');
$("#long-list").animate({ top: 0}, "fast");
$('#loader').remove();
}
И теперь остается всего одна строка
$("#long-list").loadup(onloadmove,onloadfinish);
И готово.
Ну и напоследок о сервисе. Называется он «Короче,...» и нужен для тех людей, кто не любит читать длинные и занудные рецензии на фильмы. В нем все просто — выбираем нужный фильм, нажимаем на его плакат и читаем отзывы из твиттера. Собственно для мобильной версии сайта и делались два этих плагина. Проект сейчас больше фановый и все данные статические (и в ИЕ он не работает). Однако, если он кого-то заинтерсует, то готов сотрудничать и продвигать его дальше. В будущем хотелось бы добавить возможность поиска самого ближайшего кинотеатра с выдачей расписания, а так же автоматическое добавление/удаление кино.
UPD: перенесено в блог jQuery.