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,如若转载,请注明出处:https://www.web176.com/senchatouch/1645.html
支付宝
微信