我现在已经更新了这个问题。在这次编辑之前,我已经解决了前面提到的大部分问题。以下是一些屏幕截图:
https://www.dropbox.com/s/o7zakvgi1emyzxk/Screen%20Shot%202015-02-14%20at%208.05.22%20PM.png?dl=0
https://www.dropbox.com/s/9a4wg8mwx7nj6p8/Screen%20Shot%202015-02-14%20at%208.05.30%20PM.png?dl=0
第一个链接显示了在调整窗口大小之前加载页面的样子(查看白色弹出窗口)。
第二个屏幕截图显示了页面加载后的页面外观,您可以调整窗口大小(查看白色弹出窗口)。
我正在努力实现第二个屏幕截图中的内容,但不必调整窗口大小就可以了(看看白色弹出窗口)。
这是我当前的代码:
CSS
对于白色弹出窗口内的所有按钮。
#optionsContainer * {
font-size:.8em;
background-color:#fff !important;
border-radius:0px;
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
color:#000 !important;
border-top:2px solid #CBCBCB;
width:200px;
padding:8px;
margin:0;
}
对于白色弹出窗口:
#optionsContainer
{
display:none;
background-color:#fff;
width:200px;
margin:0;
z-index:20;
position:absolute;
box-shadow:10px 10px 199px #000;
padding:0;
}
对于白色弹出窗口正上方的按钮(此按钮打开白色弹出窗口):
#options
{
background-image:url("icons/options.png");
width:32px !important;
height:32px !important;
vertical-align:-12px;
}
HTML:optionsContainer(白色弹出窗口):
<div id="optionsContainer" class="optionsContainer">
<input type="button" class="optionsContainer" id="peopleButtonTrigger" onclick="alert('test');" value="Messages From These People">
<input type="button" class="optionsContainer" id="settings" onclick="settings();" value="Settings">
<input type="button" class="optionsContainer" id="logout" onclick="location='logout.html';" value="Logout">
<input type="button" class="optionsContainer" id="slideShow" paused='true' onclick="setSlideShow();" value="Slide Show">
<input type="button" class="optionsContainer" id="viewIntroductionSlideAgain" onclick="resetIntroductionSlider();" value="View Introduction">
<input type="button" class="optionsContainer" id="deleteAccount" onclick="location='deleteAccount.html';" value="Delete Account">
<input type="button" class="optionsContainer" id="aboutButton" onclick="showAbout();" value="About">
</div>
选项按钮(打开白色弹出列表):
<input type="image" src="icons/options.png" alt="options" id="options" onclick="document.getElementById('optionsContainer').style.display = 'block';">
正文标签:
<body id="body" onload="setOptionsListPosition();" onresize="setOptionsListPosition();">
Javascript(setOptionsListPosition();函数):
function setOptionsListPosition()
{
var options = document.getElementById('options');
var rect = options.getBoundingClientRect();
document.getElementById('optionsContainer').style.left = Math.floor(rect.left)-200+32+'px';
document.getElementById('optionsContainer').style.top = Math.floor(rect.top)+32+'px';
}
如果你不理解,请提出任何问题。还有一个div,选项按钮被封装在里面,它有2%的填充,但我不知道这怎么会让它表现得那样。你能解释一下为什么会这样吗?非常感谢。
我想明白了。问题的原因是javascript函数同时被调用了两次,这导致浏览器出现混乱。为了解决这个问题,我对body
标签进行了以下更改:
旧版:
<body id="body" onload="setOptionsListPosition();" onresize="setOptionsListPosition();">
新增:
<body id="body" onload="setOptionsListPosition();" onresize="window.setTimeout(function(){setOptionsListPosition();}, 30);">
新版本等待30/1000秒,然后执行该功能。这很奇怪,当页面加载时,它似乎会触发onload
事件和resize
事件,即使从未发生过调整大小。如果有人能解释为什么会发生这种事,我愿意。非常感谢。