jqury+css はポップアップのスケーラブルなlayer_html/css_WEB-ITnoseを実装します

1. 前のページのレイアウトを調整するには、ポップアップ格納式ウィンドウを使用します。このレイアウトを使用すると、インターフェイス全体がよりすっきりしてシンプルになります

2. 上の図の左側のパネルを例に挙げます。比較用 簡単です。htmlとcssのレイアウトを理解するだけでほぼ完成です

htmlコード:

<div id="shortcutPanelDiv">    <button id="shortcutPanelSwitcher" title="快捷面板">    </button>    <div id="shortcutPanelContent">        <div id="shortcutPanel-1">            <button id="btn-snq">            </button>            <button id="btn-sbq">            </button>            <button id="btn-lcq">            </button>        </div>        <div id="shortcutPanel-2">            <button id="btn-cyq">            </button>            <button id="btn-lsq">            </button>            <button id="btn-hdq">            </button>        </div>        <div id="shortcutPanel-3">            <button id="btn-jzs">            </button>            <button id="btn-jms">            </button>            <button id="btn-pds">            </button>        </div>        <div id="shortcutPanel-4">            <button id="btn-lxs">            </button>        </div>    </div></div>

CSS:

#shortcutPanelDiv	{		left: 0;		bottom: 100px;		position: absolute;		z-index: 1;		width: 22px;		height: 170px;	} #shortcutPanelSwitcher	{		margin-top: 45px;		height: 80px;		width: 22px;		border: 0;		right: 0;		position: absolute;		background-color: #F0F0F0;		background-image: url("../img/table/RightArrow.png");		background-position: center;		background-repeat: no-repeat;	} #shortcutPanelContent	{		background-color: #F0F0F0;		position: absolute;		right: 22px;		height: 100%;		width: 230px;	}#shortcutPanel-1	{		margin-top: 10px;		margin-left: 5px;	} #shortcutPanel-2	{		margin-top: 10px;		margin-left: 5px;	} #shortcutPanel-3	{		margin-top: 10px;		margin-left: 5px;	} #shortcutPanel-4	{		margin-top: 10px;		margin-left: 5px;	}	

jsコード:

var isShortcutPanelShow = false;$(function(){    $("#shortcutPanelSwitcher").click(function()    {        if (isShortcutPanelShow == false)         {            $("#shortcutPanelDiv").animate(            {                width: '252px',            }, "slow");            isShortcutPanelShow = true;            $("#shortcutPanelSwitcher").css("background-image", "url('img/table/LeftArrow.png')");        } else         {            $("#shortcutPanelDiv").animate(            {                width: '22px',            }, "slow");            isShortcutPanelShow = false;            $("#shortcutPanelSwitcher").css("background-image", "url('img/table/RightArrow.png')");        }    });});

レイアウトは忍耐が必要で、少しの調整はレベルに達していますあなたが満足していること。