通过Class封装实现Tab的效果

2017-02-01 18:24:08 访问(1886) 赞(0) 踩(0)

/*
1、tabcss.css
2、CtrlTabContainer.cs
3、CtrlTabItem.cs
4、jquerytab.js
*/


            CtrlTabContainer ctc = new CtrlTabContainer();

            CtrlTabItem tab = null;

            tab = new CtrlTabItem();
            tab.CtrlId = "c_1";
            tab.TheName = "one";
            tab.TheText = "one";

            ctc.AddItem(tab);

            tab = new CtrlTabItem();
            tab.CtrlId = "c_2";
            tab.TheName = "two";
            tab.TheText = "two";

            ctc.AddItem(tab);

            tab = new CtrlTabItem();
            tab.CtrlId = "c_3";
            tab.TheName = "three";
            tab.TheText = "three";

            ctc.AddItem(tab);

            
            tab = new CtrlTabItem();
            tab.CtrlId = "c_4";
            tab.TheName = "four";
            tab.IsIFrame = true;
            tab.FrameHeight = 300;
            tab.FrameUrl = "http://adm.slowx.net/jsresult.aspx?id=1392";

            ctc.AddItem(tab);

            html = ctc.ToTab(0, null);
            html += ctc.ToText(0, null);

ul, li
{
	list-style: none;
}
#tabbox
{
	width: 600px;
	overflow: hidden;
	margin: 0 auto;
}
.tab_conbox
{
	border: 1px solid #999;
	border-top: none;
	/*
	min-height: 750px;
	*/
}
.tab_con
{
	display: none;
}
.thistab
{
}
.tabs
{
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
.tabs li
{
	height: 31px;
	line-height: 31px;
	float: left;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	background: #e0e0e0;
	overflow: hidden;
	position: relative;
}
.tabs li a
{
	display: block;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
.tabs li a:hover
{
	background: #ccc;
}
.tabs .thistab, .tabs .thistab a:hover
{
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tab_con
{
	padding: 12px;
	font-size: 14px;
	line-height: 175%;
}

.tab_con5px
{
	padding: 5px;
	font-size: 14px;
	line-height: 175%;
}

.tab_con0px
{
	padding: 0px;
	font-size: 14px;
	line-height: 175%;
}

.displaynone
{
	display:none;
}

using System;
using System.Collections.Generic;
using System.Text;

namespace SlowX.Utils.Ctrls.CtrlTab
{
    /// <summary>
    /// 
    /// </summary>
    [Serializable]
    public class CtrlTabContainer
    {
        /// <summary>
        /// 
        /// </summary>
        public CtrlTabContainer()
        {

        }


        #region TabList ~ Tab的列表

        /// <summary>
        /// TabList ~ Tab的列表
        /// </summary>
        protected List<CtrlTabItem> m_TabList = new List<CtrlTabItem>();

        /// <summary>
        /// TabList ~ Tab的列表
        /// </summary>
        public List<CtrlTabItem> TabList
        {
            get
            {
                return m_TabList;
            }
            set
            {
                m_TabList = value;
            }
        }

        #endregion TabList ~ Tab的列表

        /// <summary>
        /// 
        /// </summary>
        /// <param name="item"></param>
        public void AddItem(CtrlTabItem item)
        {
            if (item == null)
                return;

            TabList.Add(item);
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="idx"></param>
        /// <param name="tabId"></param>
        /// <returns></returns>
        public string ToTab(int idx,string tabId)
        {
            List<CtrlTabItem> theList = TabList;

            if (theList == null)
                return "";

            int iCount = theList.Count;

            if (iCount == 0)
                return "";

            if (idx < 0 || idx >= iCount)
                return "";

            StringBuilder theResult = new StringBuilder();

            if (tabId == null)
                tabId = "tabs";

            theResult.Append("<ul class=\"tabs\" id=\"" + tabId + "\">");
            CtrlTabItem item = null;

            string liCssClass = "";

            for (int i = 0; i < iCount; ++i)
            {
                item = theList[i];

                if (i == idx)
                    liCssClass = " class=\"thistab\"";
                else
                    liCssClass = "";

                theResult.Append("<li" + liCssClass + "><a class=\"TabSelected\" href=\"#\">" + item.TheName + "</a></li>");
            }
 
            theResult.Append("</ul>");

            return theResult.ToString();
        }



        /// <summary>
        /// 
        /// </summary>
        /// <param name="idx"></param>
        /// <param name="tabId"></param>
        /// <returns></returns>
        public string ToText(int idx, string tabId)
        {
            List<CtrlTabItem> theList = TabList;

            if (theList == null)
                return "";

            int iCount = theList.Count;

            if (iCount == 0)
                return "";

            if (idx < 0 || idx >= iCount)
                return "";

            StringBuilder theResult = new StringBuilder();

            if (tabId == null)
                tabId = "tab_conbox";

            theResult.Append("<ul class=\"tab_conbox\" id=\"" + tabId + "\">");
            CtrlTabItem item = null;

            string liCssClass = "";

            for (int i = 0; i < iCount; ++i)
            {
                item = theList[i];

                if (i == idx)
                    liCssClass = " class=\"tab_con5px\"";
                else
                    liCssClass = " class=\"tab_con5px displaynone\"";

                theResult.Append("<li" + liCssClass + ">" + item.ToText() + "</li>");
            }

            theResult.Append("</ul>");

            return theResult.ToString();
        }

    }
}

using System;
using System.Collections.Generic;
using System.Text;

namespace SlowX.Utils.Ctrls.CtrlTab
{
    /// <summary>
    /// 
    /// </summary>
    [Serializable]
    public class CtrlTabItem
    {
        /// <summary>
        /// 
        /// </summary>
        public CtrlTabItem()
        {

        }


        #region CtrlId ~ 控件ID

        /// <summary>
        /// CtrlId ~ 控件ID
        /// </summary>
        protected string m_CtrlId = null;

        /// <summary>
        /// CtrlId ~ 控件ID
        /// </summary>
        public string CtrlId
        {
            get
            {
                return m_CtrlId;
            }
            set
            {
                m_CtrlId = value;
            }
        }

        #endregion CtrlId ~ 控件ID



        #region TheName ~ 名称

        /// <summary>
        /// TheName ~ 名称
        /// </summary>
        protected string m_TheName = null;

        /// <summary>
        /// TheName ~ 名称
        /// </summary>
        public string TheName
        {
            get
            {
                return m_TheName;
            }
            set
            {
                m_TheName = value;
            }
        }

        #endregion TheName ~ 名称


        #region IsIFrame ~ 是否Frame

        /// <summary>
        /// IsIFrame ~ 是否Frame
        /// </summary>
        protected bool m_IsIFrame = false;

        /// <summary>
        /// IsIFrame ~ 是否Frame
        /// </summary>
        public bool IsIFrame
        {
            get
            {
                return m_IsIFrame;
            }
            set
            {
                m_IsIFrame = value;
            }
        }

        #endregion IsIFrame ~ 是否Frame


        #region TheText ~ 内容

        /// <summary>
        /// TheText ~ 内容
        /// </summary>
        protected string m_TheText = null;

        /// <summary>
        /// TheText ~ 内容
        /// </summary>
        public string TheText
        {
            get
            {
                return m_TheText;
            }
            set
            {
                m_TheText = value;
            }
        }

        #endregion TheText ~ 内容


        #region FrameUrl ~ Frame的Url地址

        /// <summary>
        /// FrameUrl ~ Frame的Url地址
        /// </summary>
        protected string m_FrameUrl = null;

        /// <summary>
        /// FrameUrl ~ Frame的Url地址
        /// </summary>
        public string FrameUrl
        {
            get
            {
                return m_FrameUrl;
            }
            set
            {
                m_FrameUrl = value;
            }
        }

        #endregion FrameUrl ~ Frame的Url地址


        #region FrameHeight ~ Frame的高度

        /// <summary>
        /// FrameHeight ~ Frame的高度
        /// </summary>
        protected int m_FrameHeight = 0;

        /// <summary>
        /// FrameHeight ~ Frame的高度
        /// </summary>
        public int FrameHeight
        {
            get
            {
                return m_FrameHeight;
            }
            set
            {
                m_FrameHeight = value;
            }
        }

        #endregion FrameHeight ~ Frame的高度

        /// <summary>
        /// 
        /// </summary>
        /// <returns></returns>
        public string ToText()
        {
            if (IsIFrame)
            {
                return "<iframe style=\"width:100%;height:" + FrameHeight.ToString() + "px; border:0px;\" scrolling=\"no\" src=\"" + FrameUrl + "\" ></iframe>";
            }
            else
            {
                return TheText;
            }
        }
    }
}

$(document).ready(function() {
    jQuery.jqtab = function(tabtit, tab_conbox, shijian) {
        // 初始化的时候Hide li //
        // $(tab_conbox).find("li").hide();
        $(tabtit).find("li:first").addClass("thistab").show();
        $(tab_conbox).find("li:first").show();

        $(tabtit).find("li").bind(shijian, function() {
            $(this).addClass("thistab").siblings("li").removeClass("thistab");
            var activeindex = $(tabtit).find("li").index(this);
            $(tab_conbox).children().eq(activeindex).show().siblings().hide();
            return false;
        });

    };

    /*调用方法如下：*/
    $.jqtab("#tabs", "#tab_conbox", "click");

});