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')"); } });});
版权声明：本文为博主原创文章，未经博主允许不得转载。
