Question

我在gmail收件箱页面中看到“更多操作”下拉框。它有级别和列表中的一些禁用项目。

如何在HTML + CSS中执行此操作？

谢谢

Answer 1

在回复Rob时，不使用 已禁用 的原因是 IE 。

这不是一个好主意的原因是 IE仍然不支持IE6，IE7或IE8中的 。

http://webbugtrack.blogspot.com/2007/11/bug-293-cant-disable-options-in-ie.html

Answer 2

我一直在寻找类似的东西，这是我的解决方案。您需要显示/隐藏图标，添加css和javascript（在此示例中为jquery）。它显示/隐藏菜单，但可以是任何内部.hide div。

的CSS：

.shortasc { background: url("/css/asc.gif") no-repeat 50% 50%;cursor:pointer;}
.shortdesc { background: url("/css/desc.gif") no-repeat 50% 50%;cursor:pointer;}
.hide{ display:none;}
.toggle-menu .title {
text-align:left;
}

.toggle-menu div.more{
   position: absolute;
   border:#999999 1px solid;
   background-color:#FFFFFF;

}
.toggle-menu div.more ul{margin:0; padding:2px; text-align:left;}
.toggle-menu div.more ul li{list-style:none; padding:2px; border:#CCCCCC 1px solid;}

html，它调用了一个jquery函数：

<span class="toggle-menu">
<span class="title" onclick="$(this).win('togglewin');">titulo del menu</span><span class="orden shortasc">&nbsp;&nbsp;&nbsp;</span>
<div class="more hide">
<ul>
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>and so on</li>
</ul>
</div>
</span>

将方法添加到jquery函数或编辑以在title中添加onClick事件或创建函数，或者其他什么，这是一个带有jquery函数http://docs.jquery.com/Plugins/Authoring#Getting_Started的示例：

(function($) {
var methods={
//... your functions
togglewin:function(){
   var p = $(this).position();
  var parent = (this).closest('.toggle-menu');
  if(parent.find('.more').is(':visible')){
     parent.find('.orden').removeClass('shortdesc').addClass('shortasc');   
     parent.find('.more').slideUp();
  }else{
     parent.find('.orden').removeClass('shortasc').addClass('shortdesc');
     parent.find('.more').slideDown().offset( { top:p.top+12,left:p.left } );
 }
 return this;
}
};

$.fn.win = function(method) { 
  if ( methods[method] ) {
    return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
  } else if ( typeof method === 'object' || ! method ) {
    return methods.init.apply( this, arguments );
  } else {
   $.error( 'Method ' +  method + ' inexistente en jQuery.win' );
 }   
}

})(jQuery);

抱歉，我无法上传图片，但我喜欢这个结果。

Answer 3

您可以在HTML <select>元素中对元素进行分组和禁用，而无需使用JavaScript。以下内容应该有效：

<select name="foo">
    <optgroup label="Odds">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5">5</option>
    </optgroup>
    <optgroup label="Evens">
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="6" disabled="disabled">6</option>
    </optgroup>
</select>

Firebug中的简短检查显示，谷歌正在伪造他们的下拉框，其中包含大量HTML和一些聪明的CSS。就个人而言，我认为采用“正确”的方法并使其看起来更漂亮，比在这里重新发明轮子更具可读性。

Answer 4

您想要一个基于无序列表的弹出/下拉菜单。

如何做gmail中的“更多操作”下拉框

4 个答案: