Question

如何设置选择列表元素的样式？这是我现在的代码......

$('.editableSelect').editable(function(value, settings) {
    if (this.revert == value) {
        this.reset();
        return;
    }
    setSaveButtonRed(this);
    setDescFromAccountCode(this, value);
    return (value);
}, {
    type: 'select',
    submit: '<button type="submit" class="checkbookButton">OK</button>',
    data: $('#accountCodesForSelect').val(),
    cssclass: 'checkbookSelect',
    //style: 'font-family: Verdana,Helvetica,Sans-Serif; font-size:0.75em; width:700px;',
    tooltip: "Click to edit...."
});

并且班级checkbookSelect看起来像这样......

.checkbookSelect
{
    font-family:Verdana,Helvetica,Sans-Serif;
    font-size:0.75em;
}

但是当我点击，在这种情况下，表格单元格（和jEditable fires）和选择列表出现时，它没有样式...

我认为jEditable中的cssclass设置仅适用于jEditable创建的范围，可能不适用于它创建的任何输入元素......所以答案可能是使用更具体的jQuery选择器和/或jQuery的live（）方法选择选择列表元素，然后以这种方式应用样式？

请注意，我也尝试使用样式属性/设置...它已在上面注释掉了。

BTW jEditable是一个很棒的剧本...我在博客上写了如何设置datepicker和jEditable here ......

Answer 1

能够在下拉列表中设置样式，方法是将这一行添加到版本1.7.1的第270行左右的jquery.jeditable.js ...可能与确切的行号无关但我把它放在那里因为这是脚本作者检查settings.select

的地方

$('select').addClass(settings.cssclass);

我确定选择器也可以进行调整......但至少现在这个有效...我会稍后收紧它，但万一其他人有同样的问题...只是想让你知道我是如何让它工作的

我已经将选择器改进了......

$(form).children('select').addClass(settings.cssclass);

现在好多了......

Answer 2

cssclass: 'checkbookSelect'将适用于代码表单。

因此，CSS中的.checkbookSelect select代替.checkbookSelect应该可以完成工作。

Answer 3

另一种方法是设置所有元素的宽度：100％，选择框将修复它的容器DOM，但选项将正确显示，在firefox上测试，不需要任何Javascript并影响所有标记，你可能会追加和id到特定元素，以便根据您的需要设置样式

在jEditable中设置选择列表元素的样式

3 个答案: