A couple of plugins for jQuery Mobile

Recently, I have been interested in jQuery Mobile to such an extent that I wanted to write something serious on it. At first, the idea arose to write such a component as a “carousel”. Then the eye fell on Twitter ... In general, the work went and in the end we got two plug-ins and a small project, which I will discuss at the end of the topic.

The first plugin, as I already said, is a “carousel”. I think I know what it is, but somehow you can find a demo here .

How to use this plugin. First, download it from the githab and connect carousel.js and carousel.css .

Then we create this html code:
')

<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> 

This will create a markup for the carousel. Now we need a template by which the components of each tab will be displayed. We write the code immediately after the previous one.

 <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> 

What are @ {id}, @ {title} and @ {image}. These are the values ​​that will be taken from the input data according to the names.
Well, the carousel itself, javascript code:

 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" } ] }); 

Done, the carousel will appear on your page.

The next component is the LoadUp List. Such a component has been seen by all FourSquare users. This is a list in which if you drag the last (first) item, data will be loaded.

A working example for touch devices can be found here .

To use, download the jquery.loadup-list.js script from the gita .

Then we create a list with which we must set the 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> 

Now we need to create 2 functions: onloadmove and onloadfinish

onloadmove is triggered when we pull the last item in the list

 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>"); } 

In this case, add an animated gif.

onloadfinish works as soon as we release the last item in the list. Accordingly, we write to it all requests

 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(); } 

And now only one line remains

 $("#long-list").loadup(onloadmove,onloadfinish); 

And ready.

And finally, about the service. It is called "In short, ..." and is needed for those people who do not like to read long and boring film reviews. Everything is simple in it - select the desired movie, click on its poster and read reviews from Twitter. Actually for the mobile version of the site and these two plugins were made. The project is now more fun and all the data is static (and it does not work in IE). However, if he is interested in someone, he is ready to cooperate and promote him further. In the future, I would like to add the ability to search for the nearest cinema with the issuance of a schedule, as well as automatically add / delete movies.

UPD : moved to the jQuery blog.