Sencha-touch-theme

提供：Dev Guides
2020年6月23日 (火) 05:51時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内、検索

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

Windowsテーマを使用するには、次のCSSを追加します。 

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

Windowsテーマを使用するには、次のCSSを追加します 

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クラシックテーマ

最初のHello Worldアプリケーションを検討してください。 アプリケーションから次のCSSを削除します- 

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

Windowsテーマを使用するには、次のCSSを追加します- 

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

Windowsテーマを使用するには、次のCSSを追加します。 

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

Windowsテーマを使用するには、次のCSSを追加します。 

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>

これにより、次の結果が生成されます–

「https://www.finddevguides.com/index.php?title=Sencha-touch-theme&oldid=26237」から取得
Powered by MediaWiki