在第一次使用CSS基本上优化，使用jQuery：效果、回调、教程

最新推荐文章于 2024-09-25 18:30:38 发布

Jave.Lin

最新推荐文章于 2024-09-25 18:30:38 发布

阅读量1k

点赞数

文章标签： jquery 优化 css border callback function

本文链接：https://blog.csdn.net/linjf520/article/details/7427758

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
 <HEAD>
  <TITLE> JiangHuMeng Game Network Communication Decoder Instruction </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="Jave.Lin">
  <META NAME="Keywords" CONTENT="Decoder Instruction">
  <META NAME="Description" CONTENT="JiangHuMeng Game Network Communication Decoder Instruction">
  <script type="text/javascript" src="jQuery.js"/></script>
  <script type="text/javascript">
    function showAll(callback)
    {
        //将所有表显示
        var arr=$("table.packageTB");
        var arrayLength=arr.length;
		var currentCompleteNum=0;
		arr.fadeIn("normal",
		function()
		{
			currentCompleteNum++;
			if(currentCompleteNum==arrayLength)
			{
				callback();
			}
		});
    }
    function hideAll(callback)
	{
	    var arr=$("table.packageTB");
		var arrayLength=arr.length;
		var currentCompleteNum=0;
		arr.fadeOut("normal",
		function()
		{
			currentCompleteNum++;
			if(currentCompleteNum==arrayLength)
			{
				callback();
			}
		});
	}
    function onSelectedHandler(value)
    {
        //显示所有表格
        if(value=="all")
        {
            //将所有表显示
            showAll();
        }
        //筛选指定的
        else
        {
            //隐藏所有类名为：packageTR的表
            hideAll(function()
				{
				    //显示id为:value的表
					$("table#"+value).fadeIn();
				});
        }
    }
  </script>
  <style>
    BODY 
    {
        FONT-SIZE: 12px;
        font-family:Verdana;
        background-color:#fffff2;
    }
    Table{border-collapse:collapse;border:none;background-color:#fffff0;}
    TH {FONT-SIZE: 14px;font-family:Verdana;border:solid#999999 1px;}
    TD {FONT-SIZE: 12px;font-family:Verdana;border:solid#888888 1px;}
    TR {FONT-SIZE: 12px;font-family:Verdana;border:solid#999999 1px;}
    /* 文档标题 */
    .docTitle
    {
        border:border:1px solid aaaa00;
        FONT-SIZE:24px;
        width:100%;
        color:#00aa00;
        background-color:#fffacd;
        font-weight:bold;
    }
    /* 目录子项 */
    .contentItem
    {
        width:100%;
        color:#0000ff;
        background-color:#fffff2;
        font-size:14px;
        font-weight:bold;
        border:solid #999999 1px
    }
    /* 目录 */
    .contents
    {
        border:none;
        FONT-SIZE:24px;
        width:100%;
        color:#000000;
        background-color:#fffacd;
        font-weight:bold;
    }
    /* 筛选 */
    .sift
    {
        border:none;
        FONT-SIZE:24px;
        width:100%;
        color:#000000;
        background-color:#fffacd;
        font-weight:bold;
    }
    /* 提示(说明package) */
    .tips
    {
        border:none;
        FONT-SIZE:24px;
        width:70100
        color:#000000;
        background-color:#fffacd;
        font-weight:bold;
    }
    /* 目录表格 */
    .contentsTB
    {
        width:100%;
    }
    /* 数据包表头 */
    .packageTH
    {
        border:2px solid #666;
        font-weight:bold;
        color:#000000;
        background-color:#fffacd;
    }
    /* 数据包表格 */
    .packageTB
    {
        width:100%;
        border:1px solid #666;
    }
    /* 数据包行 */
    .packageTR
    {
        background-color:#fffce5;
        border:1px solid #666;
    }
    /* 子数据段表头 */
    .subDataTH
    {
        border:2px solid #666;
        font-weight:bold;
        color:#000000;
        background-color:#cdeaff;
    }
    /* 子数据段表格 */
    .subDataTB
    {
        width:100%;
        border:1px solid #666;
    }
    /* 子数据段行 */
    .subDataTR
    {
        background-color:#e8f5ff;
        border:1px solid #666;
    }
    /* 数组表头 */
    .arrayTH
    {
        border:2px solid #666;
        font-weight:bold;
        color:#000000;
        background-color:#d2fccf;
    }
    /* 数组表格 */
    .arrayTB
    {
        width:100%;
        border:1px solid #666;
    }
    /* 数组行 */
    .arrayTR
    {
        background-color:#edfcec;
        border:1px solid #666;
    }
    /* 根部div */
    .rootDiv
    {        
        background-color:#eeeeee;
        position:relative; 
        width:1000px; 
        left:50%; 
        margin-left:-500px;
    }
    /* 描述类型的表格格子 */
    #desTd
    {
        color:#8a1616;
        font-weight:bold;
    }
    /* 常量名称的表格格子 */
    #constTd
    {
        color:#0000ff;
        font-weight:bold;
    }
  </style>
 </HEAD>

 <BODY>
    <div class="rootDiv">
	    {$tableContent}
	</div>
 </BODY>
</HTML>