Что такое 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) - тестовый пример отобразился без ошибок.
