Sencha Touch - motyw

Sencha Touch zapewnia szereg motywów do wykorzystania w twoich aplikacjach. Możesz dodać różne motywy zamiast klasycznego motywu i zobaczyć różnicę w wynikach w zależności od urządzenia, którego używamy do aplikacji. Odbywa się to po prostu przez zastąpienie pliku CSS motywu, jak wyjaśniono w poniższym przykładzie.

Motyw pulpitu

Rozważ swoją pierwszą aplikację Hello World. Poniższy CSS z aplikacji jest używany jako motyw pulpitu.

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

Aby zobaczyć efekt, wypróbuj następujący program -

<!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>

To da następujący wynik -

Motyw systemu Windows

Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji -

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

Dodaj następujący CSS, aby użyć motywu systemu Windows.

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

Aby zobaczyć efekt, wypróbuj następujący program -

<!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>

To da następujący wynik -

Motyw IOS

Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji.

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

Dodaj następujący CSS, aby użyć motywu systemu Windows

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

Aby zobaczyć efekt, wypróbuj następujący program -

<!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>

To da następujący wynik -

Klasyczny motyw IOS

Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji -

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

Dodaj następujący CSS, aby użyć motywu systemu Windows -

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

Aby zobaczyć efekt, wypróbuj następujący program -

<!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>

To da następujący wynik -

Motyw Androida

Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji.

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

Dodaj następujący CSS, aby użyć motywu systemu Windows.

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

Aby zobaczyć efekt, wypróbuj następujący program -

<!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>

To da następujący wynik -

Motyw BlackBerry

Rozważ swoją pierwszą aplikację Hello World. Usuń następujący CSS z aplikacji.

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

Dodaj następujący CSS, aby użyć motywu systemu Windows.

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

Aby zobaczyć efekt, wypróbuj następujący program -

<!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>

To da następujący wynik -