带图像的下拉菜单（没有像jquery这样的库）

时间：2013-02-09 14:59:28

标签： javascript html css drop-down-menu

我正在创建一个包含图像的下拉菜单。我的目标是：

  • 它不能使用任何外部库（因此jquery已经出局）
  • 它应该在可能的情况下使用css优先于javascript
  • 必须与浏览器兼容
  • 功能必须与常规html select-option下拉菜单相同
  • 当javascript未启用时，它必须回退到常规的select-options html下拉菜单

我已经基本上到了那里，这里是我所拥有的大致工作的代码：

<!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 select-option下拉菜单的工作方式。

我试过实现一个锁存器并且还有一个超时，但到目前为止我还没有成功使用其中任何一个。我目前正在测试铬。任何人都可以让它工作吗？

1 个答案:

答案 0 :(得分：7)

我花了一些时间来弄清楚如何解决你的问题，但最终我找到了解决方案。

我正在讨论的解决方案需要一个变量mousedown，它告诉我们是否点击了select_pretty。如果是，则option_clicked不应继续，除非mousedown为false。

当某些事件处理程序采取行动时，也会有一些更改。请查看下面的代码并与原始版本进行比较。

这是您的工作下拉菜单：

<!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;
mousedown = 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').onmousedown = 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*/
    document.getElementById('option1').onmouseup = function() {option_clicked('option1');};
    document.getElementById('option2').onmouseup = function() {option_clicked('option2');};
    document.getElementById('option3').onmouseup = function() {option_clicked('option3');};
    document.getElementById('option4').onmouseup = function() {option_clicked('option4');};
    document.getElementById('option5').onmouseup = function() {option_clicked('option5');};
};
function option_clicked(option_id) {
    if (mousedown)
        return;

    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 select_pretty_mousedown(e)
{
    mousedown = true;
    show_options();
};
function select_pretty_mouseup(e)
{
    mousedown = false;
};
function instate_select_box(e) {
//alert('mouseout');
    document.getElementById('select_pretty').onmousedown = select_pretty_mousedown;
    document.getElementById('select_pretty').onmouseup = select_pretty_mouseup;
    document.getElementById('select_pretty').onmouseout = null;
};
function hide_options() {
    if(!showing_options) {return;};
    document.getElementById('option1').onmouseup = null;
    document.getElementById('option2').onmouseup = null;
    document.getElementById('option3').onmouseup = null;
    document.getElementById('option4').onmouseup = null;
    document.getElementById('option5').onmouseup = 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>
相关问题
最新问题