3
我正在創建一個下拉菜單中的圖像。我的目標是：下拉菜單與圖像（沒有像jQuery的庫）
- 它不能使用任何外部庫（所以jQuery是出）
- 應該在偏好研究使用CSS的JavaScript在可能
- 它必須是跨瀏覽器兼容
- 功能必須是相同的常規HTML選擇選項下拉菜單
- 必須退回到常規的選擇，選擇HTML下拉菜單未啓用Javascript
我已經在很大程度上得到了那裏，這裏是代碼我有一個大致的工作：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.select_outermost_unfocus
{
background-color:red;
border: 5px solid red;
overflow: hidden;
display: none;/*initial value - will be changed with js*/
/*prevent highlighting*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select_outermost_unfocus:hover
{
cursor: pointer;
}
.select_outermost_focus:hover
{
cursor: pointer;
}
.select_outermost_focus/*when the select area is clicked then cap its size*/
{
overflow-y: scroll;
overflow: -moz-scrollbars-vertical;
height: 100px;
}
.select_outermost_focus:focus .unchosen_element/*when the select area is clicked then show all options*/
{
display: inline-block;
}
.chosen_element
{
float: left;
background-color: lightblue;
white-space: nowrap;/*keep text on one line*/
clear: both;
}
.unchosen_element
{
background-color:grey;
display: none;
float: left;
white-space: nowrap;/*keep text on one line*/
clear:both;
}
#invisible_screen
{
background-color:green;
position: relative;
top:0;
left:0;
bottom:0;
right:0;
}
</style>
<script type='text/javascript'>
//global vars
selected_element_id = 'option1';//initialise
showing_options = false;
window.onload = function() {
// if(document.getElementById('no_tabindex').getAttribute('tabIndex') !== null) { //mimic safari
if(document.getElementById('select_pretty').getAttribute('tabIndex') !== null) {
document.getElementById('fallback_select').style.display = 'none';/*hide the html select element*/
document.getElementById('select_pretty').style.display = 'inline-block';/*show the js pretty select element*/
instate_select_box();
hide_options();
}
else {
alert('tabindex not supported - could be safari');
};
};
function show_options(e) {
showing_options = true;
document.getElementById('select_pretty').onmouseup = null; //kill the event until unhover
document.getElementById('select_pretty').className = 'select_outermost_focus';
document.getElementById('select_pretty').focus();/*invoke class .select_outermost_focus .unchosen_element*/
setTimeout(function() {
document.getElementById('option1').onmousedown = function() {option_clicked('option1');};
document.getElementById('option2').onmousedown = function() {option_clicked('option2');};
document.getElementById('option3').onmousedown = function() {option_clicked('option3');};
document.getElementById('option4').onmousedown = function() {option_clicked('option4');};
document.getElementById('option5').onmousedown = function() {option_clicked('option5');};
}, 500);
};
function option_clicked(option_id) {
document.getElementById(selected_element_id).className = 'unchosen_element';
selected_element_id = option_id;//save globally
document.getElementById(selected_element_id).className = 'chosen_element';
hide_options();
// document.getElementById('select_pretty').onmouseout = instate_select_box;
instate_select_box();
};
function instate_select_box(e) {
//alert('mouseout');
document.getElementById('select_pretty').onmouseup = show_options;//ready for next time the box is neded
document.getElementById('select_pretty').onmouseout = null;
};
function hide_options() {
if(!showing_options) {return;};
document.getElementById('option1').onclick = null;
document.getElementById('option2').onclick = null;
document.getElementById('option3').onclick = null;
document.getElementById('option4').onclick = null;
document.getElementById('option5').onclick = null;
document.getElementById('select_pretty').className = 'select_outermost_unfocus';
showing_options = false;
};
</script>
</head>
<body>
<div id='no_tabindex'></div>
<div id='fallback_select'>
<select>
<option>andora</option>
<option>uae</option>
<option>afghanistan</option>
<option>cook islands</option>
<option>germany</option>
</select>
</div>
<a class='select_outermost_unfocus' id='select_pretty' tabindex=0>
<div class='chosen_element' id='option1'><img src='http://www.crwflags.com/fotw/misc/wad.gif'>andora</div>
<div class='unchosen_element' id='option2'><img src='http://www.crwflags.com/fotw/misc/wae.gif'>uae</div>
<div class='unchosen_element' id='option3'><img src='http://www.crwflags.com/fotw/misc/waf.gif'>afghanistan</div>
<div class='unchosen_element' id='option4'><img src='http://www.crwflags.com/fotw/misc/wck.gif'>cook islands</div>
<div class='unchosen_element' id='option5'><img src='http://www.crwflags.com/fotw/misc/wde.gif'>germany</div>
</a>
</body>
</html>
它不是目前很漂亮，但是這將是容易解決了，一旦我得到工作的功能。
我遇到的問題是，當我點擊第一個選項來選擇它時，它被選中，但隨後觸發事件再次顯示所有選項。這顯然不是正常的html選擇選項下拉菜單的工作方式。
我已經嘗試過實現一個閂鎖，也是一個超時，但到目前爲止，我還沒有成功的任何一個。我目前正在測試鉻。任何人都可以得到它的工作？
最優秀的！如果你喜歡，我會等到我可以使這個獎金，然後獎勵你的積分？我一直在這件事上撕掉我的頭髮至少2天，所以你可以想像我很感激:) – mulllhausen 2013-02-10 00:27:46
@mulllhausen我很高興我幫你。 :)如果你認爲我的答案值得加分，那麼 - 是的，賺一筆賞金。但如果你不這樣做，我不會生你的氣。 – wassup 2013-02-10 08:17:23
絕對。另外，我已經設法通過將'.select_outermost_focus'改爲'.select_outermost：focus'來將一些JavaScript簡化爲css。 – mulllhausen 2013-02-10 12:36:09