代码之家 › 专栏 › 技术社区 › Ian Wood

单击其他元素时要下拉的触发器选择框

jquery

Ian Wood · 技术社区 · 14 年前

我正在尝试“替换”选择输入上的按钮。我看过jquery中的select replacement插件,但它们都有点臃肿。我想实现的是在select框的下拉按钮上放置一个简单的跨距,当单击它时,使select选项下拉。

以下是我的资料:

$(document).ready(function(){

 $('select').after('<span class="cta arrow-down"></span>');
 $('input[type="submit"]').after('<span class="cta arrow-right"></span>');

 $('span.cta').each(function(){
  var $this = $(this);
  var $prev = $this.prev();
  var $dim = $prev.position();
  $this.css({'top':$dim.top, 'right':0, 'height':$prev.outerHeight(), 'width':$prev.outerHeight()});
  $this.click(function(){
   $prev.trigger('click');
  });
 });

});

我尝试过mousedown,也使用triggerhandler单击和mousedown调用相关的func,但没有用…

这有可能吗?

2 回复 | 直到 11 年前

Nick Craver 14 年前

你不能真的用跨浏览器的方式来做到这一点,主要是因为IE破坏了所有人的乐趣。在早期版本的IE中 <select> 是直接从Windows窗体获取的控件(这就是它 z-index 以及样式问题),很多事情都没有标准化/支持……因为IE不能可靠地做到这一点。

为了做你想做的事,你必须去 <选择& 替换路径,是否膨胀…再次,即这些插件存在的主要原因。

rink.attendant.6 11 年前

我问的问题和这里的OP一样,我厌倦了听到人们说它做不到。

一个完美的例子存在于世界上最流行的网站之一:Facebook。

在他们的注册页面(索引页面,如果您没有登录)上,存在出生日期、出生月份、出生年份和性别的下拉框。

我已经看到了每个“欺骗”下拉框的例子,用替换它 div S,但这在这里不起作用。至少不完全是这样。下拉框完全是跨浏览器的,在每个平台上看起来都一样。

这是它不是DIV的证明,这是Windows7上的IE8:

http://users.on.net/mbywaters/fb.jpg

在浏览器的视区之外不能显示这样的HTML元素。

显然有一些CSS元素在发挥作用。在Chrome中,您可以填充选择框并提供边框。这不适用于IE,因此它们在框周围提供了一个仅适用于IE的DIV:

http://users.on.net/mbywaters/fb2.jpg

自己玩这个表单,你会发现它的行为正是一个真正的下拉框应该表现的行为。

我已经放弃了这样一个事实:必须有一些javascript代码调用隐藏的select元素下拉列表来显示。我没有时间浏览facebook的javascript来解决这个问题,但绝对有办法。

编辑:

我的反应似乎有点过早。

当我试着这样做的时候,我让IE8模仿IE7,用我忘记我包括的这个小美:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

IE8完美地显示了填充,正如它在Chrome中显示的那样。所以Facebook没有做任何棘手的事情。

所以我想IE7就是问题所在。不过,我创建了一个适合IE7、IE8、Chrome和火狐3.6.15(我测试过的唯一一个)的解决方案。

图片如下:

http://users.on.net/mbywaters/arrow.png

代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.10.custom.min.js"></script>
    <style type="text/css">
      .hidden{
        padding:5px;
        display:inline;
        border:1px solid #888888;
        font-family:Verdana;
        font-size:10pt;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $('.hidden').focus(function(){
          $(this).css('border', '1px solid #73a6fd');
        }).blur(function(){
          $(this).css('border', '1px solid #888888');
        });
      });
    </script>
    <!--[if IE 7]>
    <style type="text/css">

      .regselectdiv{
        position:relative;
        display:inline;
        padding:5px;
        padding-left:6px;
        border:0px;
        border:1px solid #888888;
        float:left;
        margin-right:7px;
      }

      .selectwrap{
        position:relative;
        border:0px;
        overflow:hidden;
      }

      .arrow{
        position:absolute;
        width:15px;
        height:16px;
        background:url('arrow.png');
        margin-left:-17px;
        border:1px solid #707070;
      }

      .border{
        display:none;
        position:absolute;
        width:15px;
        height:16px;
        border:1px solid #3c7fb1;
        background:none;
        margin-left:-17px;
      }

      .selectwrap:hover .arrow{
        visibility:hidden;
      }

      .selectwrap:hover .border{
        display:inline;
      }

      .hidden{
        margin-top:-2px;
        margin-left:-2px;
        line-height:5px;
        padding:0px;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {

        $('.hidden').wrap('<div class="regselectdiv"><div class="selectwrap">');

        $('.border, .selectwrap').live('mouseleave', function(){
          $('.arrow').show();
        });

        $('.hidden').focus(function(){
          $(this).parent().parent().css('border', '1px solid #73a6fd');
        }).blur(function(){
          $(this).parent().parent().css('border', '1px solid #888888');
        });

        $('.selectwrap').each(function() {
          wrapper($(this));
        });

        function wrapper(x) {
          var arrow = "<div class='border'></div><div class='arrow'></div>";
          x.append(arrow);
          var height = x.find('select').height();
          var width = x.find('select').width();
          x.width(width+2);
          x.height(height);
        }
      });
    </script>
    <![endif]-->

  </head>
  <body>
    <select class='hidden'>
      <option>Month:</option>
      <option>Jan</option>
    </select>
    <select class='hidden'>
      <option>Day:</option>
      <option>1</option>
    </select>
    <select class='hidden'>
      <option>Year:</option>
      <option>2011</option>
    </select>
  </body>
</html>