Jquery,选项卡面板和问题设置焦点

时间:2013-10-24 19:55:19

标签: jquery tabs

我有一个弹出屏幕,用于向我们的系统添加付款。在这个页面中是一个使用DIV的手工制作的标签控件。我要做的是当用户单击选项卡,加载选项卡并将焦点设置在选项卡中的事务控件上。我有管理选项卡控件的java脚本。

我要做的是在“按钮”选项卡的OnClick事件上切换到选项卡并将焦点设置在“交易ID”文本框上。

以下是该页面的精简版本:

<asp:Content  runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
                <div style="width: 100%; height: 32px; padding-top: 4px; padding-left: 4px;">

            <div class="Property StackPanelItem-Left">
                <div class="PropertyLabel" id="divPaymentTypeLabel" runat="server">
                    Select payment type:
                </div>
            </div>
             <div class="Property StackPanelItem-Left">
                <asp:DropDownList ID="ddlPaymentType" runat="server" TabIndex="1"
                    Width="150px" AutoPostBack="true"
                    DataTextField="PAYMENT_TYPE_DESC" DataValueField="PAYMENT_TYPE"
                    OnSelectedIndexChanged="ddlPaymentType_SelectedIndexChanged">
                </asp:DropDownList>
            </div> 
        </div>

        <div id="tabControl1" class="Region-TabControl" style="height: calc(100% - 80px);">

            <div id="tabControl1.TabButtons-Breadcrumbs" class="Region-Header-TabControl Region-Header-Color-Silver" style="text-shadow: none !important;">
                <div id="tabButton.PayeeInfo" class="Breadcrumb Breadcrumb-Normal"  onclick="SetPayeeInfoFocus()" >
                    <div class="Breadcrumb-Text">
                        Payee Info
                    </div>
                </div>
                <div id="tabButton.PayeeContact"  class="Breadcrumb Breadcrumb-Normal" >
                    <div class="Breadcrumb-Text">
                        Payee Contact
                    </div>
                </div>
                <div id="tabButton.PayeeAddress"  class="Breadcrumb Breadcrumb-Normal"  >
                    <div class="Breadcrumb-Text">
                        Payee Address
                    </div>
                </div>
                <div id="tabButton.PayeeBank"  class="Breadcrumb Breadcrumb-Normal" >
                    <div class="Breadcrumb-Text">
                        Payee Bank
                    </div>
                </div>
                <div id="tabButton.PaymentInfo"  class="Breadcrumb Breadcrumb-Normal" onclick="SetEnterScreenFocus()" >
                    <div class="Breadcrumb-Text">
                        Payment Info
                    </div>
                </div>
                <div id="tabButton.Review"  class="Breadcrumb Breadcrumb-Normal" >
                    <div class="Breadcrumb-Text">
                        Review
                    </div>
                </div>
            </div>

            <div id="tabControl1.Panel" class="Region-Content-TabControl" style="height: calc(100% - 40px);">                                           
                <div id="tabPanel.PayeeInfo" class="TabPanel">
                </div>                                                                      
                <div id="tabPanel.PayeeContact" class="TabPanel" style="height: calc(100% - 8px);">                       
                    <div class="PropertyLabel" style="font-size: 16px; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Select or add payee contact:
                    </div>                      
                    <uc1:PayeeContacts runat="server" ID="PayeeContact" GridHeight="calc(100% - 36px)" />                    
                </div>

                <div id="tabPanel.PayeeAddress" class="TabPanel" style="height: calc(100% - 8px);">                       
                    <div class="PropertyLabel" style="font-size: 16px; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Select or add payee address:
                    </div>
                    <uc1:PayeeAddresses runat="server" ID="PayeeAddress" GridHeight="calc(100% - 36px)" />
                </div>

                <div id="tabPanel.PayeeBank" class="TabPanel" style="height: calc(100% - 8px);">                       
                    <div class="PropertyLabel" style="font-size: 16px; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Select or add payee bank:
                    </div>
                    <uc1:PayeeBanks runat="server" ID="PayeeBank" GridHeight="calc(100% - 36px)" />
                </div> 

                <div id="tabPanel.PaymentInfo" class="TabPanel">                       
                    <div class="PropertyLabel" id="divEnterPaymentInfoHeader" runat="server" style="font-size: 16px; border-bottom: 1px solid #000; width: calc(100% - 20px); height: 32px; margin: 4px">
                            Enter your payment information:
                    </div>

                        <div style="padding-top: 4px; padding-left: 4px; height: 52px; width: 100%;">
                            <div class="Property StackPanelItem-Left">
                                 <div class="PropertyLabel">
                                    Transaction ID
                                </div>
                                <asp:TextBox ID="txtEnterTransactionID" Width="175" MaxLength="20" TabIndex="2" CssClass="PropertyTextBox"  runat="server"/>
                            </div>
                            <div class="Property StackPanelItem-Left">
                                 <div class="PropertyLabel">
                                    Account Number with Payee
                                </div>
                                <asp:TextBox ID="txtEnterAccountNumber" MaxLength="22" Width="175" TabIndex="3" CssClass="PropertyTextBox" runat="server"/>
                            </div>
                            <div class="Property StackPanelItem-Left" id="divEnterPaymentInfo_CheckNumber" runat="server">
                                 <div class="PropertyLabel">
                                    Check Number
                                </div>
                                <asp:TextBox ID="txtEnterCheckNumber" MaxLength="15" TabIndex="4" CssClass="PropertyTextBox"  runat="server"/>
                            </div>
                        </div>                                                                                                                                                                     
                    </div> 
                <div id="tabPanel.Review" class="TabPanel">                                                 
                </div>
           </div>
         </div>              
         <div style="width: 100%; height: 32px; padding-top: 4px; padding-left: 4px;">
            <div class="Property StackPanelItem-Right">
                <asp:Button  ID="btnBack" Text="Back" runat="server"/>                        
                <asp:Button ID="btnNext" Text="Next" runat="server"/>
            </div>
        </div>

</asp:Content>

这是我正在使用的jquery:

function SetEnterScreenFocus(){

document.getElementById("ContentPlaceHolder1_txtEnterDRCTransactionID").focus();

}

此时我正在使用测试,因为我正在尝试验证元素是否已加载。

jquery找到对象,但焦点不起作用。我在这里缺少什么?

提前致谢。

1 个答案:

答案 0 :(得分:0)

Ok发现问题 - 这是一个时间问题。这就是我解决它的方法:

function SetEnterScreenFocus() {
    $('tabPanel.PaymentInfo').show();
    setTimeout(function () { document.getElementById('ContentPlaceHolder1_txtEnterTransactionID').focus(); }, 10);
}

作品 - 不确定此处是否还有其他问题。

豫ICP备18024241号-1