0

プロジェクトのどこでも同じAjaxComboboxを使用していますが、jqueryタブコントロールでAjax Comboboxを使用するとすぐに、リストが右に移動し、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>

トリックは、.ajax__combobox_itemlist のような ComboBox の css クラスを使用してスタイルを調整し、jQuery のものと連携するようにすることです。

于 2012-10-11T15:38:46.020 に答える