Sencha Touch - ธีม

Sencha Touch มีธีมมากมายให้ใช้ในแอปพลิเคชันของคุณ คุณสามารถเพิ่มธีมต่างๆแทนธีมคลาสสิกและดูความแตกต่างในผลลัพธ์ตามอุปกรณ์ที่เราใช้สำหรับแอปพลิเคชัน ซึ่งทำได้ง่ายๆโดยการแทนที่ไฟล์ CSS ของธีมตามที่อธิบายไว้ในตัวอย่างต่อไปนี้

ธีมเดสก์ท็อป

พิจารณาแอปพลิเคชัน Hello World ตัวแรกของคุณ CSS ต่อไปนี้จากแอปพลิเคชันใช้สำหรับธีมเดสก์ท็อป

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

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

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

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

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

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

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

พิจารณาแอปพลิเคชัน 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

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

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

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

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

หากต้องการดูผลให้ลองใช้โปรแกรมต่อไปนี้ -

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

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -