1

我正在使用带有 jQ​​uery tmpl 插件的 Knockout.js。我定义的模板有几个选择列表。单击选择列表（以容纳列表中最长的元素）时，我需要扩展选择项的宽度（在 IE 8 上）。当用户单击选择列表以实现此目的时，我正在考虑切换 css 类，但不知道如何去做。这是我到目前为止所拥有的：

//CSS classes
<style>
    .bigclass
    {
        width: 200px;
    }
    .normalclass
    {
        width: auto;
    }
</style>

// Call makeBig javascript method on mouseover.
<script id='criteriaRowTemplate' type='text/html'>
    <tr>
        <td style="width: 23%"><select style="width: 100%" data-bind='event: { mouseover: makeBig, mouseout: makeNormal}, options: criteriaData, optionsText: "Text", optionsCaption: "--Select--", value: SearchCriterion' /></td>
    </tr>
</script>

var CriteriaLine = function() {
    this.SearchCriterion = ko.observable();

    //Control comes to this method. Not sure though if the element captured is correct.
    makeBig = function(element) { 
        $(element).addClass("bigclass")
    };
    makeNormal = function(element) { 
        $(element).addClass("normalclass")
    };
};

所以我的问题是：

  1. 我们如何将选择列表传递给 makeBig javascript 函数？我相信我需要在我的代码中更改以下语法： data-bind='event: { mouseover: makeBig, mouseout: makeNormal

  2. 我们如何将类添加到传递的选择列表中。我已经添加了代码，但它不起作用，可能是因为元素没有值。

  3. 或者，是否有任何其他方法可以确保用户在 IE 8 中看到下拉列表的全文？

4

1 回答 1

0

这是一个自定义绑定，用于在悬停时向元素添加 CSS 类：http: //jsfiddle.net/BL9zt/

请注意，它订阅了特定于 IE 的mouseenter事件mouseleave，因此您还必须引用在其他浏览器中模拟这些事件的 jQuery。

此处描述了另一种与淘汰赛无关的方法： http ://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html

于 2012-09-10T20:41:39.300 回答