1

jQuery 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 に答える