jQuery Mobile: Темы

В этой статье мы рассмотрим несколько стандартных тем, которые сделают ваше приложение более похожим на iOS, Android или Windows Phone, а так же разберём процесс создания собственной темы для jQuery Mobile.

Создание собственной темы

По сути, главной составляющей любой темы jQuery Mobile является CSS таблица стилей. На создание подобной таблицы оформления контента может уйти куча времени, поэтому мы не будем делать это вручную, а воспользуемся инструментом Theme Roller. Всё что нам нужно будет сделать, так это выставить нужные параметры. Теперь давайте пройдёмся по шагам создания новой темы:

Переходим на страницу Theme Roller:

После того, как вы выставили настройки цветов, отступов и другие нужные параметры, нажмите на кнопку Download:

После скачивания файла, распакуйте архив;

Поместите файлы в ваш проект (можете использовать папку css);

Подключите таблицы стилей в разделе head:

<head>
<meta  charset="utf-8">
  <meta name="viewport" content="width=device-width,  initial-scale=1">
  <title>jQuery Mobile: Theme  Download</title>
  <link  rel="stylesheet" href="/css/themes/ugly.min.css" />
  <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-
1.2.0.min.css" />
<script  src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script  src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  </head>


Результат созданной темы, можете увидеть на следующем рисунке:

Тема Windows Phone для jQuery Mobile

Создавать собственные темы конечно круто! Однако большинство пользователей желают видеть привычные для них цветовые гаммы и стили интерфейсов. Каким образом, вы можете это им обеспечить?

Попытаться с помощью Theme Roller подобрать нужные стили. Этот реальный способ добиться нужного результата, однако займёт много времени.

Воспользоваться уже готовой темой jQuery Mobile с нужными цветами и оформлением. Этот вариант лучше!

К счастью Microsoft реализовали тему Windows Phone для jQuery Mobile, которую вы можете просто скачать и внедрить в свой проект:

<meta content="text/html;  charset=utf-8"/>
  <meta name="viewport"  content="width=device-width, initial-scale=1"/>
  <title>jQM theme for Windows  Phone</title>
  <link rel="stylesheet"  href="/css/metro/jquery.mobile.metro.theme.css"/>
  <link  href="/css/progress-bar.css" rel="stylesheet"  type="text/css" />
  <link  href="/css/toggle-button.css" rel="stylesheet"  type="text/css" />
<style type="text/css">
   /*  custom icons for toggle button*/
    .ui-icon-demo-help,
    .ui-icon-demo-set {
    background-repeat: no-repeat;
    background-position: 50% 50% ;
    background-size: 30px 30px;
   }
  .ui-toggle-button-a .ui-icon-demo-set,
    .ui-toggle-button-b[checked='checked'] .ui-icon-demo-set{
    /*background-image: url(Images/set.dark.png) ;*/
    background-image: url(data:image/png;base64,.....);
   }
  .ui-toggle-button-b .ui-icon-demo-set,
    .ui-toggle-button-a[checked='checked'] .ui-icon-demo-set{
    /*background-image: url(Images/set.light.png);*/
   background-image:  url(data:image/png;base64,......);
   }
</style>
  <script src="/js/jquery.js"  type="text/javascript"></script>
  <script  src="/js/jquery.mobile.js"  type="text/javascript"></script>
  <script  src="/css/metro/jquery.mobile.metro.theme.init.js" type="text/javascript"></script>
  <script  src="/js/jquery.globalstylesheet.js"  type="text/javascript"></script>
  <script  src="/js/jquery.mobile.themeswitcher.js"  type="text/javascript"></script>
  <script  src="/js/progress-bar.js"  type="text/javascript"></script>
  <script  src="/js/toggle-button.js"  type="text/javascript"></script>
  <script  type="text/javascript">
    $.themesDir = 'css/';
    $(function() {
    $("#btn-dark").click(function(event) {
    $.addTheme("Dark", false);
    event.preventDefault();
    return false;
    });
    $("#btn-light").click(function(event) {
    $.addTheme("Light", false);<br />
    event.preventDefault();
    return false;
    });
   });
  </script>

Результаты внедрения темы Windows Phone:

Тема iPhone/iPad для jQuery Mobile

Windows Phone - это конечно же не единственная система на рынке мобильных устройств. Настоящим революционеров, в этом плане, стал iPhone. Для того чтобы оформить своё приложение в стиле iOS нужно применить соответствующую тему.

Скачиваем тему iOS для jQuery Mobile.

Импортируем файлы в проект.

Добавить следующий код в ваши файлы, а так же не забудьте исправить пути к файлам под свои нужны:

<meta  name="apple-mobile-web-app-capable" content="yes">
   <link  href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"  rel="stylesheet" />
   <link  rel="stylesheet" href="/css/iOS/styles.css" />
    <script  src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
   //  all dialog buttons should close their parent dialog
    $(".ui-dialog button").live("click", function () {
    $("[data-role='dialog']").dialog("close");
    });
    $(document).on("mobileinit", function () {
    $.mobile.defaultPageTransition = "slide";
    });
    </script>
   <script  src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
   <style>
   #footerTabs {
    background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4);
    }
    .ui-listview sup {
    font-size: 0.6em;
   color: #cc0000;
   }
    </style>

Результат внедрения темы iOS:

Тема Android Holo для jQuery Mobile

Последнее время всё более становятся популярными смартфоны, работающие на системе Android. Именно поэтому и появилась соответствующая тема jQuery Mobile. Принцип внедрения тот же, что и в предыдущих случаях:

<meta name="viewport"  content="width=device-width, initial-scale=1"> <br />
  <link  href="/css/Android/android-holo-light.min.css"  rel="stylesheet" /><br />
  <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css"  /><br />
   <script  src="http://code.jquery.com/jquery-1.8.3.min.js"></script><br />
   <script  src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Результат:

Итог

Делайте приложения более удобными и приятными для ваших пользователей с помощью тем jQuery Mobile.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/hZn3dGa6sWA/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

jQuery Mobile: Темы | | 2013-04-12 11:35:57 | | Статьи Web-мастеру | | В этой статье мы рассмотрим несколько стандартных тем, которые сделают ваше приложение более похожим на iOS, Android или Windows Phone, а так же разберём процесс создания собственной темы для jQuery | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: