Блог Александра Башкирова

ИТ и бизнес, компьютеры и ПО, фото, программирование и просто мысли…
Этот сайт в основном посвящен тому, что мне интересно вне работы. Ведется в порядке хобби.
Все изложенное на сайте - мое частное оценочное мнение и не может быть истолковано иначе.
Со всеми вытекающими из этого последствиями.

Про jQery mobile

Просмотров: 2444Комментарии: 0
Alib.spb.ru

Что такое jQuery? Любой веб-раработчик скажет, что это JavaScript библиотека, очень сильно облегчающая жижнь веб-разработчику - и будет прав. jQuery (http://jquery.com/) - это именно библиотека, с фокусом на создание абстрактного слоя к HTML и предоставлении простого интерфейса для JavaScript. К библиотеке написаны сотни плагинов (http://plugins.jquery.com/), да и сама библиотека имеет неплохое развитие в виде набора визуальных User Interface компонент (http://jqueryui.com/). Но, кроме этого, у нее есть воистину прекрасное продолжение - jQuery mobile. Это фрйемворк, позволяющий быстро создать мобильный сайт. При этом внутри фреймворка доступен сам jQuery (с некоторыми ограничениями). А фреймворк позволяет очень быстро создать каркас веб-странички. Живет это чудо по адресу http://jquerymobile.com/

Про ограничения. jQmobile не поддерживает обработку события click, вместо него поддерживает событие tap:

<script type="text/javascript">
$('#header').live('tap', function(event){
  alert('Вы дотронулись до заголовка второй страницы');
});
</script>

Про особенности. jQmobile использует концепцию "одна страница на всё и лишнее прячем", это достигается за счет того, что div-м назначаются роли. Например:

<div data-role="page" id="main" data-theme="a">
	<div data-role="header">
		<h1>Заголовок страницы</h1>
	</div>
	<div data-role="content">	
		Содержимое страницы
		<a href="#second">Вторая страница</a>
	</div>
	<div data-role="footer">
		<h4>Подвал страницы</h4>
	</div>
</div>

Переходы между страницами осуществляются по ID - то есть href="#second" - говорит о том, что переход будет на div с ID=second, имеющий роль page. Всё просто :)

Также на сайте есть масса примеров. Достаточно легко решаются разные типовые задачи. Например, меню можно сделать так:

<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Actions...</a>
<div data-role="popup" id="popupMenu" data-theme="b">
        <ul data-role="listview" data-inset="true" style="min-width:210px;">
            <li data-role="list-divider">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Disable</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
</div>

Потом его, естественно, надо "прицепить" на кнопку, но ... в общем и целом "ничего такого". Потому что "прицепить" - это прописать ссылку вида #popupMenu. Всё.

В общем, по беглому знакомству - фреймворк оказался прекрасным и восхитительно простым. Кстати, для настройки внешнего вида - на сайте есть theme maker - то есть css'ку с собственной темой можно получить вообще не думая о том, "куда и что прописать". Всё очень визуально.

Ну и напоследок - фреймворк заявлен как кроссбраузерный. И похоже, что это действительно так: во всех доступных мне браузерах (на телефоне, планшете, компьюетрах под Windows и Linux) - тестовый пример отобразился без ошибок.

Оставьте комментарий!


Комментарий будет опубликован после проверки

     

  

(обязательно)