Учебники

Сенча Touch — тема

Декабрь 18, 2018

Sencha Touch предоставляет ряд тем для использования в ваших приложениях. Вы можете добавить различные темы вместо классической темы и увидеть разницу в выводе в зависимости от устройства, которое мы используем для приложения. Это можно сделать, просто заменив CSS-файл темы, как описано в следующем примере.

Тема рабочего стола

Рассмотрим ваше самое первое приложение Hello World. Следующий CSS из приложения используется для темы рабочего стола. 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Чтобы увидеть эффект, попробуйте следующую программу —

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Это даст следующий результат —

Тема Windows

Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения — 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Добавьте следующий CSS для использования темы Windows. 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css

Чтобы увидеть эффект, попробуйте следующую программу —

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Это даст следующий результат —

Тема IOS

Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения. 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Добавьте следующий CSS для использования темы Windows 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css

Чтобы увидеть эффект, попробуйте следующую программу —

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Это даст следующий результат —

IOS Классическая тема

Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения — 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Добавьте следующий CSS для использования темы Windows — 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css

Чтобы увидеть эффект, попробуйте следующую программу —

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Это даст следующий результат —

Тема Android

Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения. 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Добавьте следующий CSS для использования темы Windows. 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css

Чтобы увидеть эффект, попробуйте следующую программу —

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Это даст следующий результат —

Тема BlackBerry

Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения. 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Добавьте следующий CSS для использования темы Windows. 

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css

Чтобы увидеть эффект, попробуйте следующую программу —

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true,
                  items: [{
                     title: 'Home',
                     iconCls: 'home',
                     html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
</html>

Это даст следующий результат —

41
Share: