Sencha Touch - BlackBerry 支援

Sencha Touch 2.x 為 BlackBerry 10 提供特定主題和功能。

Sencha Touch 不僅支援 Blackberry，還提供 BlackBerry 10 圖示，確保裝置具有 BlackBerry 的外觀和感覺。

將 BlackBerry 主題新增到 app.json

以下示例演示如何將 BlackBerry 主題新增到 app.json。

"css": [
   {
      "path": "touch/resources/css/bb10.css",
      "platform": ["chrome", "safari", "ios", "android", "blackberry", "firefox", "ie10"],
      "theme": "Blackberry",
      "update": "delta"
   }
]

新增 BlackBerry 圖示

Sencha Touch 為 BlackBerry 主題提供了 50 多個圖示，因此應用程式提供了更好的外觀和感覺。下載並解壓 Sencha Touch 軟體安裝後，可以在 Sencha Touch /resources/themes/images/bb10/icons 目錄中找到圖示。

在應用程式中使用圖示之前，將這些圖示編譯到 app.scss 檔案中。SCSS 檔案位於 Sencha Touch 安裝目錄的 resources/sass 目錄中。將要使用的影像新增到 app.scss 檔案，並使用 Compass 編譯檔案並生成 app.css 檔案。Compass 與 Sencha CMD 捆綁在一起。

現在要使用圖示，可以直接透過 iconCls 屬性使用圖示。

iconCls: 'overflow_tab'

Sencha Touch 擁有針對 BlackBerry 特有的新動作欄選單。

將 BlackBerry 動作選單新增到動作欄

線上演示

<!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() {
               // Tab menu button
               var tabMenuButton = Ext.create('Ext.ux.TabMenuButton', {
                  text: 'All',
                  docked: 'left',
                  iconCls: 'view_grid',
                  menuItems: [
                     {
                        text: 'All',
                        iconCls: 'view_grid'
                     }, {
                        text: 'Favorites',
                        iconCls: 'done'
                     }, {
                        text: 'Messenger',
                        iconCls: 'bbm'
                     }
                  ]
               });
               // Add it to the action bar
               Ext.Viewport.add({
                  layout: 'card',
                  items: [
                     {
                        xtype: 'toolbar',
                        docked: 'bottom',
                        items: [tabMenuButton]
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

將產生以下結果 −

sencha_touch_core_concepts.htm

列印頁面

上一個

下一個