如何在文本字段上动态更改背景图像

时间:2012-11-07 12:58:04

标签: titanium titanium-mobile

我做以下

当我点击文本字段时,我会显示一个选择器,然后更改文本字段的背景图像。

当此人完成选择器(他们点击“完成”),然后我将文本字段背景更改为白色。

当我再次单击文本字段时,即使出现选择器,背景图像也不会更改。

我该怎么办?我想要它,这样每当我点击它并且选择器出现时,文本字段就会不断变为绿色背景。然后当我敲出它并且拾取器消失时,变回白色。

tf1.addEventListener('focus', function(e) {
    Titanium.API.info('Triggered focus on date txtField');

    tf1.setBackgroundImage('../images/selected.gif');

    Titanium.API.info(tf1.backgroundImage);

    var winDatePicker1 = Titanium.UI.currentWindow;

    var minDate = new Date();
    minDate.getFullYear();
    minDate.getMonth();
    minDate.getDate();

    var maxDate = new Date();
    maxDate.setFullYear(2018);
    maxDate.setMonth(9);
    maxDate.setDate(30);

    var datePicker = Ti.UI.createPicker({
        type : Ti.UI.PICKER_TYPE_DATE_AND_TIME,
        minDate : minDate,
        maxDate : maxDate,
        bottom : 0,
        minuteInterval : 10
    });

    var tview = Ti.UI.createView({
        height : '100%',
        width : '100%',
        top : 0,
        backgroundColor : 'transparent'
    });

    var done1 = Ti.UI.createImageView({
        title : '',
        width : 80,
        right : 12,
        height : 40,
        image : '../images/done.gif',
    });

    var toolbar1 = Ti.UI.createView({
        height : 43,
        backgroundImage : '../images/toolbar.gif',
    });

    toolbar1.add(done1);

    done1.addEventListener('click', function() {
        tf1.backgroundImage = '';
        toolbar1.hide();
        datePicker.hide();
        tview.hide();
    });

    tview.addEventListener('click', function() {
        toolbar1.hide();
        datePicker.hide();
        tview.hide();
    });

    // turn on the selection indicator (off by default)
    datePicker.selectionIndicator = true;

    datePicker.addEventListener('change', function(e) {

        Titanium.API.info('E value = ' + e.value);

        var pickerDate = e.value;

        var day = pickerDate.getDate();
        day = day.toString();

        if (day.length < 2) {
            day = '0' + day;
        }

        var month = pickerDate.getMonth();
        month = month + 1;
        month = month.toString();

        if (month.length < 2) {
            month = '0' + month;
        }

        var year = pickerDate.getFullYear();
        var hr = pickerDate.getHours();
        var min = pickerDate.getMinutes();

        if (hr < 10) {
            hr = '0' + hr;
        }

        if (min < 10) {
            min = '0' + min;
        }

        var datestr = '';

        if (hr >= 12) 
        {
            datestr += ' ' + (hr == 12 ? hr : hr - 12) + ':' + min + ' PM';
        } else {
            datestr += ' ' + hr + ':' + min + ' AM';
        }

        var newdate = month + "/" + day + "/" + year + datestr;

        Titanium.API.info('converted value = ' + newdate);

        tf1.setValue(newdate);

    });

    tview.add(datePicker);
    tview.add(toolbar1);

    winDatePicker1.add(tview);

    winDatePicker1.show({
        view : tf1,
        animated : true
    });

});

1 个答案:

答案 0 :(得分:0)

make setVisible(true) or setVisible(false)

show() and hide() will not give proper toggle at some conditions.