Пара плагинов для jQuery Mobile

В последнее время я увлекся jQuery Mobile до такой степени, что захотелось написать на нем что-то серьезное. Сначала возникла идея написать такую компоненту как «карусель». Затем взгляд упал на твиттер… В общем работа пошла и в итоге получилось два плагина и небольшой проект, о котором я расскажу в конце топика.

Первый плагин, как я уже и говорил, «карусель». Что это такое, я думаю, все знаю, но так или иначе демо можно найти тут.

Как использовать этот плагин. Сначала качаем его с гитхаба и подключаем 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.