如何在Gmail中使用「更多操作」下拉框

Question

我在Gmail收件箱頁面看到「更多操作」下拉框。 它在列表中包含關卡和一些禁用項目。

如何在HTML + CSS中做到這一點？

謝謝

Answer 1

您可以在不使用JavaScript的情況下對HTML元素中的元素進行分組和禁用元素。像下面這樣的東西應該工作：

<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 2

你想要一個無序列表的彈出菜單/下拉菜單。

Answer 3

響應於羅布，其原因不使用禁用是IE。

之所以這樣，是不是一個好主意是IE仍然不支持這個在IE6，IE7或IE8。

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

Answer 4

心中已經一直在尋找類似的東西，這是我的解決方案。你需要顯示/隱藏圖標，添加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> 

add方法jQuery函數或編輯在標題中添加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); 

對不起，我無法uploa d圖像，但我喜歡結果。