下拉列表插件 jquery.combobox 使用方法

在ie8下出现错位.

官网地址:http://jquery.sanchezsalvador.com/page/jquerycombobox.aspx

使用方法:

1.引入样式与js文件

<link type="text/css" href="style/combobox_mac.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="Scripts/jquery.js"></script>    
<script type="text/javascript" src="Scripts/jquery.dimensions.js"></script>
<script type="text/javascript" src="Scripts/jquery.combobox.js"></script>

 

2.书写HTML

 

<select id="aList">
    <option value="1">大太监</option>
    <option value="3">麻辣女兵</option>
    <optgroup label="电影">
        <option value="7" selected="selected">十面埋伏</option>
        <option value="8">功夫熊猫</option>
        <option value="9">八卦宗师</option>
    </optgroup>
    <optgroup label="动漫">
        <option value="10">海贼王</option>
        <option value="11">火影忍者</option>
    </optgroup>
</select>

 

 

3.调用插件

<script>
$(function()
{
    $('#aList').combobox(
        {
            comboboxContainerClass: "comboboxContainer",
            comboboxValueContentContainerClass: "comboboxValueContainer",
            comboboxValueContentClass: "comboboxValueContent",
            comboboxDropDownClass: "comboboxDropDownContainer",
            comboboxDropDownButtonClass: "comboboxDropDownButton",
            comboboxDropDownItemClass: "comboboxItem",
            comboboxDropDownItemHoverClass: "comboboxItemHover",
            comboboxDropDownGroupItemHeaderClass: "comboboxGroupItemHeader",
            comboboxDropDownGroupItemContainerClass: "comboboxGroupItemContainer"
        },
        {
            animationType: "slide", 
            width: "100px"
        });
});
</script>