Skip to content Skip to sidebar Skip to footer

Create A Checkbox In Titanium

I have List of Checkboxes which i want to create using FOR LOOP. I have following type of data. Value 1 --> checkbox image Value 2 --> Value 3 --> . . . Value 15 -->

Solution 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);

try some thing like this.


Solution 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();
    }
});

Post a Comment for "Create A Checkbox In Titanium"