Categories: Sencha Touch 教程

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文件。指南针与Sencha CMD捆绑在一起。

现在使用图标,您可以直接使用带有iconCls属性的图标。

iconCls: 'overflow_tab'

Sencha Touch具有一个新的操作栏,即针对BlackBerry的菜单。

将BlackBerry Action菜单添加到Action Bar

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

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

5 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago