Titanium mobile中的Javascript样式表

时间:2012-12-03 11:13:29

标签: titanium appcelerator titanium-mobile appcelerator-mobile

我是使用Titanium Mobile框架学习移动开发的。

我遇到了与javascript样式表的应用相关的问题。 当我将jss文件命名为与要应用样式的js文件相同时,它可以正常工作。但如果我把它命名为别的东西,它就行不通了。任何人都可以告诉我一个解决方案。以下是我的代码示例。

// app.js
var win = Titanium.UI.createWindow({ backgroundColor : '#fff' });

win.add( Ti.UI.createButton({ title : 'Button A' }) );

win.open();

// app.jss, works fine
button { backgroundImage: 'grdadient_img.png'; }

// button_style.jss, don't work
button { backgroundImage: 'grdadient_img.png'; }

2 个答案:

答案 0 :(得分:6)

我使用多个JSS文件从未取得太大成功。如果你按照Nandu的链接,你会发现它并没有真正记录得很好,可能会在某些时候从Titanium中删除。我希望Titanium的Alloy也会杀掉JSS。

如果你不想使用JSS(或者还有Alloy),可以使用commonJS模块和可选的underscore.js来集中你的样式。

<强> theme.js

var theme = {
    tableLabel : {
        color : '#3285C7',
        backgroundColor : 'transparent',
        inactiveColor : '#AAAAAA'
    }
}
module.exports = theme;

使用

    var theme = require('ui/common/Theme');
...
    var myLabel = Ti.UI.createLabel(_.extend({}, theme.tableLabel, {
        top : 5,
        height : Ti.UI.SIZE,
        width : Ti.UI.FILL,
        text : "Hello world",
    }));

我使用_extend从主题中获取设置并添加特定于实例的设置,如大小,位置等。不要忘记调用`_.extend()

请参阅http://underscorejs.org/#extend

答案 1 :(得分:1)

Ammar,请参阅以下链接。希望它能帮到你

1。How to use jss correctly

2。How Does .jss feature really works in Titanium mobile SDK