在 Titanium 中创建一个复选框

Question

我有 Checkboxes 的列表，我想使用 FOR LOOP 创建它。

我有以下类型的数据。

Value 1  --> checkbox image
Value 2  -->
Value 3  -->
.
.
.
Value 15 --> checkbox Image

我正在使用以下代码，但不知道它是如何工作的？？？代码正确吗？？

var chkArray = ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7', 'Value 8', 'Value 9', 'Value 10'];

AssessmentArray = function createChkBx() {
    var chkBx = [];
    for(var i in chkArray) {
        var t = 80;
        var checkbox = Ti.UI.createSwitch({
            style : Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
            title : chkArray[i],
            value : true,
            left : '20dp',
            top : t + 30,
            height : 25,
            width : 'auto'
        });
        checkbox.addEventListener("change", function(e) {
            Ti.API.info("The checkbox has been set to " + e.value);
        });
        chkBx.push(checkbox);   
    }
    return chkBx;
}


var assessData = new AssessmentArray();

现在我应该如何将它添加到我的Window???这仅适用于 Android...

Answer 1

var AssessmentArray = function()
{

     function AssessmentArray ()
     {

        //Pass the parent view inside which u want to add the check boxes and teh values as array 
        //gap or the distance between two checkboxes
        this.addCheckBoxes = function(window, values, gap)
        {
            var t = 0;
            var chkBx = [];
            var i = 0;
            for(i = 0; i < values.length; i++) {

                var checkbox = Ti.UI.createSwitch({
                    style : Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
                    title : chkArray[i],
                    value : true,
                    left : '20dp',
                    top : i * gap,
                    height : 25,
                    width : 'auto'
                });
                checkbox.addEventListener("change", function(e) {
                    Ti.API.info("The checkbox has been set to " + e.value);
                });
                win.add(checkbox);
                chkBx.push(checkbox);
            }
            return chkBx;
        }



     }

    return AssessmentArray;
}();

var ass = new AssessmentArray();
ass.addCheckBoxes(Ti.UI.createWindow(), ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6'], 50);

试试这样的。

Answer 2

U may prefer something like this,it can be used both in Ios and Android.

    var win = Titanium.UI.createWindow({
    title : 'app',
    backgroundColor : 'white',
    fullscreen : false,
    navBarHidden : true,
    layout : 'vertical',
    height : Ti.UI.FILL,
    width : Ti.UI.FILL
});
    var checkboxview = Titanium.UI.createView({
    width : Ti.UI.FILL,
    height : Ti.UI.SIZE,
    //layout : 'horizontal',
    horizontalWrap : false,
    //right : '10dp',
    //left : '10dp',
    layout : 'horizontal',
    //backgroundImage : '/images/backblue.png'
    backgroundColor : '#045FB4',
    //top : '20dp',
    //backgroundColor:''
});
win.add(checkboxview);
var checkbox = Ti.UI.createButton({
    title : '',
    top : 10,
    right : 10,
    width : 30,
    height : 30,
    borderColor : 'black',
    borderWidth : 2,
    borderRadius : 3,
    backgroundColor : 'white',
    backgroundImage : 'none',
    color : '#fff',
    font : {
        fontSize : 25,
        fontWeight : 'bold'
    },
    value : false //value is a custom property in this casehere.
});
checkboxview.add(checkbox);
var hinttext = Ti.UI.createLabel({
    color : 'black',
    font : {
        fontSize : '17dp',
        //fontWeight : 'bold',
        fontFamily : 'Rod'
    },
    left : '10%',
    text : 'user1'
});
checkboxview.add(hinttext);
//Attach some simple on/off actions
checkbox.on = function() {
    this.backgroundColor = '#007690';
    this.title = '\u2713';
    this.value = true;
};

checkbox.off = function() {
    this.backgroundColor = '#aaa';
    this.title = '';
    this.value = false;
};

checkbox.addEventListener('click', function(e) {
    if (false == e.source.value) {
        e.source.on();
        alert(hinttext.text);
    } else {
        e.source.off();
    }
});
var checkboxview1 = Titanium.UI.createView({
    width : Ti.UI.FILL,
    height : Ti.UI.SIZE,
    //layout : 'horizontal',
    horizontalWrap : false,
    //right : '10dp',
    //left : '10dp',
    layout : 'horizontal',
    //backgroundImage : '/images/backblue.png'
    backgroundColor : '#045FB4',
    //top : '20dp',
    //backgroundColor:''
});
win.add(checkboxview1);
var checkbox1 = Ti.UI.createButton({
    title : '',
    top : 10,
    right : 10,
    width : 30,
    height : 30,
    borderColor : '#666',
    borderWidth : 2,
    borderRadius : 3,
    backgroundColor : '#aaa',
    backgroundImage : 'none',
    color : '#fff',
    font : {
        fontSize : 25,
        fontWeight : 'bold'
    },
    value : false,
    //value is a custom property in this casehere.
});
checkboxview1.add(checkbox1);
var hinttext1 = Ti.UI.createLabel({
    color : 'black',
    font : {
        fontSize : '17dp',
        //fontWeight : 'bold',
        fontFamily : 'Rod'
    },
    left : '10%',
    width : Ti.UI.SIZE,
    height : Ti.UI.SIZE,
    text : "User2"
});
checkboxview1.add(hinttext1);
//Attach some simple on/off actions
checkbox1.on = function() {
    this.backgroundColor = '#007690';
    this.title = '\u2713';
    this.value = true;
};

checkbox1.off = function() {
    this.backgroundColor = '#aaa';
    this.title = '';
    this.value = false;
};

checkbox1.addEventListener('click', function(e) {
    if (false == e.source.value) {
        e.source.on();
        alert(hinttext1.text);
    } else {
        e.source.off();
    }
});