Apr 26 2012 at 07:41

Карусель изображений на jQuery Mobile, имеющая возможность подстраиваться под ширину блока

Invite pending

Доброго времени суток. По работе столкнулся с необходимостью использовать мобильную библиотеку JS. Остановился мой выбор на jQuery. Sencha конечно потолще, но пока ещё много девайсов с ней «тормозят» во многих местах. К моему глубокому сожалению в интернетах я ничего толкового и подходящего не нашёл относительно jQueryMobile карусели. Поэтому решил поделится своим опытом, как я решал эту проблему.
Итак, приступим от слов к делу.

Вначале сама карусель. Чтобы она у нас заработала, необходимо создать типичную jQueryMobile страницу,
затем необходимо подключить к странице плагин карусели. Взять его можно отсюда:

<!DOCTYPE html> 
<html> 
	<head> 
	<title>jQuery карусель</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
        <script src="/js/jquery.slidecarousel.js"></script><!--плагин карусели-->
        </head> 
<body> 
	<div data-role="page">
		<div data-role="header">
			<h1>Хидер</h1>
		</div>
		<div data-role="content">	
			<p>Контент будет здесь</p>		
		</div>
		<div data-role="footer">
			<h4>Футер</h4>
		</div>
	</div>
	</body>
</html>

Далее нам необходимо создать див-блок в котором и будет инициализироваться наша карусель, я задал ему класс «promo-slider»:

           ...
	<div class="promo-slider">
		<div>
			<img src="banner.jpg" alt="Изображение номер один" />
		</div>
		<div>
			<img src="banner.jpg" alt="Изображение номер два" />
		</div>
                 ...
	</div>
           ...

Размещать его можно где угодно внутри границ jQuereMobile page. Я размещу его перед контентом и присвою странице id, так как страниц может быть много и нам необходимо указать на какой именно из них у нас включен блок со слайдером:

...
<body> 
	<div data-role="page" id="home_page">
		<div data-role="header">
			<h1>Хидер</h1>
		</div>
	<div class="promo-slider">
		<div>
			<img src="banner.jpg" alt="Изображение номер один" />
		</div>
		<div>
			<img src="banner.jpg" alt="Изображение номер два" />
		</div>
                 ...
	</div>
		<div data-role="content">	
                 ...

Первый этап подходит к концу. Нам осталось лишь включить «живую» функцию на событие создания страницы:

$('#home_page').live('pagecreate', function () {
	$('.promo-slider').slideCarousel({
		slide_switch: true,
		slide_timer: 10000
	});
});

И задать для всего этого CSS-правило:

.promo-slider{
	overflow:hidden;
	position:relative;
}
.promo-slider > div{
	position:absolute;
	top:0;
}
.promo-slider a{
	display:block;
}
.promo-slider img{
	width:100%;
	display:block;
}

Казалось бы всё здорово. Баннер растягивается автоматически на 100% экрана даже при его повороте. Но тут у меня возникла загвоздка. Мне стало необходимо повесить баннер в определённую страницу, в блок див с отступами от краёв экрана. Причём сделать это так, чтобы при любой ширине и повороте экрана — менялась динамически ширина дива и пропорции отступа не ломались. Немного потанцевав с бубнами и событиями у меня вышел код который вычисляет ширину экрана девайса, «слушает» поворот экрана и делает необходимый мне отступ. Код выглядит так:

$(document).ready(function(){   
	var widthDevice = $(window).width()-100;       
	$('div.promo-slider').width(widthDevice);
});

window.addEventListener('orientationchange', function() {
  	var land = $(window).width()-100;       
	$('div.promo-slider').width(land);
 }, false);

Ширина экрана -100 это и есть необходимый мне отступ. Вместо этого значения можно ставить любое другое вам необходимое. Код протестирован на Android от 2.3 до 4.0 — полёт нормальный.
Ну, вот и всё. Надеюсь эта информация была кому-то полезна. Благодарю за внимание.

Hubs:

Lumber room