Thursday, 5 December 2013

ASP.NET Jquery set tabs dynamically

<style type="text/css">
    #tabs
    {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
    }
    #tabs li
    {
           border-radius: 4px 4px 0 0;
           -webkit-border-radius: 4px 4px 0 0;
           -moz-border-radius: 4px 4px 0 0;
           -os-border-radius: 4px 4px 0 0;
    color: #666666 !important;
    display: block;
    float: left;
    margin-right: 4px;
    padding: 5px;
    background:none repeat scroll 0 0 #CECECE;
    }
    #tabs li a
    {
        /*color: #484848;
        text-decoration: none;
        line-height: 2.5;
        padding:20px;*/
        color:#666666;
        font-family: 'Oswald',"Trebuchet MS","Myriad Web Pro",arial,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.8;
    padding: 16px;
    }
    #tabs li.current
    {
        background:none repeat scroll 0 0 #3F3F3F !important
    }
    #tabs li.current a
    {
        color: #fff;
        text-decoration: none;
       
    }
    #tabs li a.remove
    {
        color: #f00;
        margin-left: 10px;
    }
    .contentTabs
    {
       
        padding: 0;
        border:1px solid #C1C1C1;
         box-shadow: 0 0 5px #CCCCCC;
    }
       
    #main
    {
        /*width: 900px;*/
        margin: 0px auto;
        overflow: hidden;
        /*background-color: #F6F6F6;*/
        /*margin-top: 20px;*/
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        /*padding: 30px;*/
    }
    #wrapper, #doclist
    {
        float: left;
        margin: 0 20px 0 0;
    }
   
    #documents
    {
        margin: 0;
        padding: 0;
    }
   
    #wrapper
    {
        clear: both;
   
  
    width: 100%;
    }
    .Mng_content{  margin: 0 auto;
    max-height: 147px;
    min-height: 146px;
    padding: 1px;}
    .Mng_content:hover{ border:1px solid #4B960E;}
</style>
<script type="text/javascript">
    $(document).ready(function () {

        $('[id$=_content]:eq(2) .Mng_content:eq(1)').css("background-color", "#E2DFDF");
        $('#tabs a.tab').live('click', function () {
            // Get the tab name
            debugger;
            var contentname = "#" + $(this).attr("id") + "_content";

            //alert(contentname);
            // hide all other tabs
            $(".contentTabs").hide();
            $("#tabs li").removeClass("current");

            // show current tab
            $(contentname).show();
            $(this).parent().addClass("current");
            //            $(this).css("display", "block");
            //            $(this).children("div").css("display", "block");
        });


    });
   
</script>
<div id="datadiv">
    <div id="main">
        <div id="wrapper">
            <ul id="tabs">
                <ul id="listTabs" runat="server">
                    <!-- Tabs go here -->
                   
                </ul>
            </ul>
            <div id="content"  runat="server">
                <!-- Tab content goes here -->
               
            </div>
        </div>
    </div>
</div>



protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (!IsPostBack)
                {
                    //loadfulldata();
                    //LoadNetworkingdata();
                    //LoadonDmande();
                    LoadTabs();
                }
            }
            catch (Exception ex)
            {
                Exceptions.ProcessModuleLoadException(this, ex);
            }
        }


void LoadTabs()
        {

            DataSet ds=objTabController.GetManageTab();
            List<TabName> myojb = new List<TabName>();
            List<TabRecord> myojbWhole = new List<TabRecord>();

            foreach (DataRow dr in ds.Tables[0].Rows)
            {

                myojb.Add(new TabName()
                {

                    Name = dr["TabName"].ToString(),
                    ID = Convert.ToInt32(dr["TabId"].ToString())

                });

            }
            string  Record = string.Empty;
            string _ulString=string.Empty;
            int count=0;
            string _FullRecord=string.Empty;

            string tblRec =string.Empty;

            foreach (TabName obj in myojb)
            {
                DataSet dsRecord=objTabController.GetTabContentByTabID(obj.ID);
                count += 1;
                if (count == 1)
                {
                    _ulString += "<li class='current'><a id='" + obj.ID + "' class='tab' style='cursor:pointer;'>" + obj.Name + "</a></li>";
                    tblRec = "<div id='" + obj.ID + "_content' style='display: block;' class='contentTabs'>";
                }
                else
                {
                    _ulString += "<li class=''><a id='" + obj.ID + "' class='tab'  style='cursor:pointer;'>" + obj.Name + "</a></li>";
                    tblRec = "<div id='" + obj.ID + "_content' style='display: none;' class='contentTabs'>";
                }







                string Contentdiv = string.Empty;
                foreach (DataRow dr in dsRecord.Tables[0].Rows)
                {
                    //string content1=;
                    //Contentdiv += "<div id='" + dr["Image"].ToString() + "_content' style='display: none;'><table>";
                    Contentdiv += "<div class='Mng_content'><table><tr><td><a style='text-decoration: none;' href='" + dr["Url"].ToString() + "'><img id='"+ dr["Header"].ToString()+"_imgid'  src='/images/" + dr["Image"].ToString() + "' style='height: 100px !important; max-width: 100px !important; margin-right:10px;cursor:pointer;'></img></a></td><td><a style='text-decoration: none;' href='" + dr["Url"].ToString() + "'><h2 style='cursor:pointer;'>" + dr["Header"].ToString() + "</h2></a><p>" + Server.HtmlDecode(dr["Contents"].ToString()) + "</p></td></tr></table></div>";

                }
                _FullRecord +=tblRec + Contentdiv+"</div>";
            }
            content.InnerHtml = _FullRecord;
            listTabs.InnerHtml = _ulString;

        }

No comments:

Post a Comment