3

Gmail の受信トレイ ページに [その他のアクション] ドロップダウン ボックスが表示されます。リストにはレベルといくつかの無効なアイテムがあります。

HTML+CSS でそれを行う方法は?

ありがとうございました

4

4 に答える 4

3

Rob さんの回答によると、disabledを使用しない理由はIEです。

これが良い考えではない理由は、 IEが IE6、IE7、または IE8 でこれをまだサポートしていないためです。

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

于 2008-11-29T18:12:36.463 に答える
3

私は似たようなものを探していましたが、これが私の解決策です。表示/非表示、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;}

jquery 関数を呼び出す html:

<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 関数にメソッドを追加するか、編集して 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);

申し訳ありませんが、画像をアップロードできませんが、結果は気に入っています。

于 2011-04-10T20:39:06.663 に答える
2

<select>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 を簡単に調べてみると、Google が大量の HTML と巧妙な CSS でドロップダウン ボックスを偽装していることがわかります。個人的には、「正しい」アプローチを取り、見栄えを良くするためにスタイルを設定することは、ここで車輪を再発明するよりもはるかに読みやすいと思います.

于 2008-11-29T17:00:08.950 に答える
0

順序付けられていないリスト ベースのポップアップ/ドロップダウン メニューが必要です。

于 2008-11-29T16:59:15.440 に答える