I am trying to use a asp tab control in a custom module.  I tried to add ajaxcontroltoolkit tab container to the mojoportal costum control. However when I run it doesn't show up on the page. So alternatively I tried to use mojo-tab(Is it jquery?) to get the tab container  on the custom control. The problem in here is tracking the tab changed event. As it is a on client side it didn't seem to be easy to track the tab changed event. Can you help me how I can use the aspnet tabcontrol or alternatively get the jquery tab to be able to trigger the code behind functions. I mean ability to call code behind method from jquery/javascript . Suggest me be below by tweeking in the code so I can use it.

Also a separate question as to how I could use inline css or external css for gridview/ mojogridview.

Thanks and greatly appreciate.

Nave

aspx page

------

<%@ Control Language="C#" AutoEventWireup="false" CodeBehind="test.ascx.cs" Inherits="mynamespace.UI.testModule" %>
<portal:mojoPanel ID="mp1" runat="server" ArtisteerCssClass="art-Post" RenderArtisteerBlockContentDivs="true">
    <mp:CornerRounderTop ID="ctop1" runat="server" />
    <asp:Panel ID="pnlWrapper" runat="server" CssClass="art-Post-inner panelwrapper Deals">
        <portal:ModuleTitleControl EditText="Edit" EditUrl="~/test/AdminDashboard.aspx"
            runat="server" ID="TitleControl" />
        <portal:mojoPanel ID="MojoPanel1" runat="server" ArtisteerCssClass="art-PostContent">
            <asp:Panel ID="pnlDeals" runat="server" CssClass="modulecontent">
                <script type="text/javascript">

                    $(document).ready(function () {
                        $(".selector").tabs();
                    });

                    function function1() {
                        alert("Tab1 clicked.");


                    }

                    function function2() {
                  

                        alert("Tab2 clicked.");

                    }

                    function function3() {

                        alert("Tab3 clicked.");

                    }
                    function CallPageMethod() {
                        PageMethods.MyFirstPageMethod(onSucceeded, onFailed);
                    }

                    function onSuccess(result) {

                        var lbl = document.getElementById('lbl');

                        lbl.innerHTML = result;
                        alert(result);
                    }



                    function onFailure(error) {

                        alert(error);

                    }

                </script>
             

      
                <div class="settingrow">
               
                   <ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="150px" OnClientActiveTabChanged="ActiveTabChanged">
        <ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="Tab One">
            <ContentTemplate>
                <br />PAGE ONE -  Sample HTML Content for Tab
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="Server" ID="Panel2" HeaderText="Tab Two" >
            <ContentTemplate>
                PAGE TWO - Sample HTML Content for Tab
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
       
        <ajaxToolkit:TabPanel runat="Server" ID="Panel3" OnClientClick="PanelClick" HeaderText="Tab Three">
            <ContentTemplate>
                <BR /><BR />PAGE THREE - Sample HTML Content for Tab
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
                    <div class="mojo-tabs">
                        <ul>
                            <li><a href="#tab1" onclick="function1();">Tab1</a></li>
                            <li><a href="#tab2" onclick="function2();">Tab2</a></li>
                            <li><a href="#tab3" onclick="function3();">Tab3</a></li>
                        </ul>
                        <div id="tab1">
                        </div>
                        <div id="tab2">
                            <p>
                                Tab 2 content</p>
                        </div>
                        <div id="tab3">
                            <p>
                                Tab 3 content</p>
                        </div>
                    </div>
                  </div>
            </asp:Panel>
        </portal:mojoPanel>
        <div class="cleared">
        </div>
    </asp:Panel>
    <mp:CornerRounderBottom ID="cbottom1" runat="server" />
</portal:mojoPanel>