jqury+css实现可弹出伸缩层

标签：javascript   openlayers   前端开发   webgis   地理信息   

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>

#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;
	}	

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‘)");
        }
    });
});

jqury+css实现可弹出伸缩层

标签：javascript   openlayers   前端开发   webgis   地理信息   

原文地址：http://blog.csdn.net/giser_whu/article/details/47179103