0

我一直在我的项目中到处使用相同的 Ajax 组合框，但是一旦我在 jquery 选项卡控件下使用 Ajax 组合框，列表就会向右移动，并且 UI 显得模糊。我不想从 ajax 转移到 jquery 组合框和自动完成，因为我只想解决这个问题。下面是我的代码：

<ajax:ComboBox ID="LenCompDpd" runat="server" Width="133px" CssClass="AquaStyle     textfont"
OnSelectedIndexChanged="LenCompDpd_SelectedIndexChanged" AutoPostBack="true"
                                    DropDownStyle="DropDown" AutoCompleteMode="SuggestAppend" CaseSensitive="false"
                                    ItemInsertLocation="OrdinalText" />
4

1 回答 1

0

这是因为 jQuery UI 的 css 设置与 Ajax ComboBox 的 css 设置混淆了，这是一个简单的示例，我必须在页面中设置 ComboBox 的样式以调整来自 jQuery 的 css 使其看起来正常：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tabs.aspx.cs" Inherits="WebApplication1.Tabs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>    
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script type="text/javascript">        
        $(function () { $("#tabs").tabs(); });    
    </script>
    <style type="text/css">
        .ajax__combobox_itemlist
        {
            left: 28px !important;            
            top: 103px !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div id="tabs">    
            <ul>        
                <li><a href="#tabs-1">Nunc tincidunt</a></li>        
                <li><a href="#tabs-2">Proin dolor</a></li>
            </ul>    
            <div id="tabs-1">
                   <ajaxToolkit:ComboBox ID="ComboBox1" runat="server" 
                        AutoPostBack="False" 
                        DropDownStyle="DropDownList">
                        <asp:ListItem Text="One"></asp:ListItem>
                       <asp:ListItem Text="Two" />
                       <asp:ListItem Text="Three" />
                    </ajaxToolkit:ComboBox>
            </div>    
            <div id="tabs-2">        

            </div>    
        </div>
    </form>
</body>
</html>

诀窍是使用 ComboBox 的 css 类，如 .ajax__combobox_itemlist 来调整样式，使其与 jQuery 的东西一起使用。

于 2012-10-11T15:38:46.020 回答