Sencha Touch - Chủ đề

Sencha Touch cung cấp một số chủ đề được sử dụng trong các ứng dụng của bạn. Bạn có thể thêm các chủ đề khác nhau thay cho chủ đề cổ điển và xem sự khác biệt trong kết quả đầu ra dựa trên thiết bị chúng tôi đang sử dụng cho ứng dụng. Điều này được thực hiện đơn giản bằng cách thay thế tệp CSS chủ đề như được giải thích trong ví dụ sau.

Chủ đề máy tính để bàn

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. CSS sau từ ứng dụng được sử dụng cho chủ đề máy tính để bàn.

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

Để xem hiệu quả, hãy thử chương trình sau:

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

Điều này sẽ tạo ra kết quả sau:

Chủ đề Windows

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng -

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

Thêm CSS sau để sử dụng chủ đề Windows.

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

Để xem hiệu quả, hãy thử chương trình sau:

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

Điều này sẽ tạo ra kết quả sau:

Chủ đề iOS

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng.

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

Thêm CSS sau để sử dụng chủ đề Windows

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

Để xem hiệu quả, hãy thử chương trình sau:

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

Điều này sẽ tạo ra kết quả sau:

Chủ đề cổ điển iOS

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng -

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

Thêm CSS sau để sử dụng chủ đề Windows -

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

Để xem hiệu quả, hãy thử chương trình sau:

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

Điều này sẽ tạo ra kết quả sau:

Chủ đề Android

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng.

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

Thêm CSS sau để sử dụng chủ đề Windows.

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

Để xem hiệu quả, hãy thử chương trình sau:

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

Điều này sẽ tạo ra kết quả sau:

Chủ đề BlackBerry

Hãy xem xét ứng dụng Hello World đầu tiên của bạn. Xóa CSS sau khỏi ứng dụng.

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

Thêm CSS sau để sử dụng chủ đề Windows.

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

Để xem hiệu quả, hãy thử chương trình sau:

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

Điều này sẽ tạo ra kết quả sau: