Titanium mobile中的Javascript样式表

Question

我是一个使用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'; }

Answer 1

我使用多个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