Fare un pulsante JQuery funge da menu a discesa

Prendi questo esempio del pulsante UI JQuery come riferimento: http://jqueryui.com/demos/button/#splitbutton

Ora, come implementeresti quel menu a discesa quando fai clic sul pulsante piccolo? La mia caucanvas è principalmente con la trasformazione. Pulsante () sul pulsante effettivo che mette in disordine i coordenati dell’offset.

Per riassumere, ho bisogno di pareri su come implementare correttamente un menu a discesa sul clic di un pulsante JQuery che si integra con il tema corrente.

Grazie! alex

Finalmente l'ho fatto e sembra così

Finalmente l’ho fatto e sembra l’immagine qui sopra.
Ne ho parlato qui e sto anche postando tutto il codice sotto.
Si prega di fare riferimento al post sul blog per una spiegazione più approfondita.

CSS

 

HTML

 
  • Save and New
  • Save and Copy

JavaScript

  

È disponibile anche un pluggin per farlo.

Pulsante jQuery DropDown

IMHO, i drowdown dovrebbero sempre apparire “sopra” gli altri contenuti, non spingerli verso il basso, quindi il posizionamento assoluto è perfetto per questo. Fondamentalmente aggiungi un div wrapper con position: relative attorno al pulsante e al menu a discesa (che avrà la position:absolute; display:none ) e triggers la visibilità a discesa sul clic. Il posizionamento assoluto del menu a discesa non deve essere influenzato da altri figli del div wrapper, come ad esempio il pulsante, quindi apparirà esattamente dove lo si dice nel CSS.

HTML:

 
Choose your option...
  • One
  • Two
  • Three

CSS:

 .arrow { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; font-size: 0.8em; font-weight: bold; height: 26px; left: 208px; line-height: 26px; position: absolute; text-align: center; vertical-align: middle; width: 26px; z-index: 100; } .selectBox { border: 1px solid #1F1F1F; list-style-type: none; margin: 0; padding: 3px; position: absolute; width: 200px; display:none; top: 25px; } #container { position:relative } .toggler { overflow:visible; } .default { border: 1px solid #1f1f1f; width:200px; height:20px; padding:3px; position:absolute } .selectBox li:hover { background:#ddd } 

jQuery:

 $('.arrow').click(function() { $('.selectBox').slideToggle(200).css('borderTop', 'none'); $('.selectBox li').click(function() { $('.mehidden').val($(this).text()); $('.default').text($(this).text()); $('.selectBox').slideUp(200); }); });