Wie größen Sie die jQuery-Schaltfläche?

Ich verwende das jQuery UI Button-Steuerelement, aber scheint nicht in der Lage zu sein, die Größe (Breite und Höhe) anzupassen. Hier ist die API documentation. Ich habe versucht, ein STYLE-Attribut zu setzen, aber dann war das LABEL nicht richtig zentriert. Vielen Dank.Wie größen Sie die jQuery-Schaltfläche?

Quelle

2010-04-27 Alex

ich es mit einer Breite über Firebug geben gerade versucht, es funktioniert und richtig Zentren. – adardesign

Breite funktioniert, aber nicht Höhe. Um die Höhe zu ändern, verwenden Sie padding-top und padding-bottom, wie unten vorgeschlagen. –

Versuchen Sie dies im Stil-Attribut:

width: 300px; 
padding-top: 10px; 
padding-bottom: 10px;

oder

$(element).css({ width: '300px', 'padding-top': '10px', 'padding-bottom': '10px' });

Quelle

2010-04-27 18:54:43

Danke, Jakob. Ich denke, der Teil, der mich verwirrte, war, dass es keine eingebaute Möglichkeit gab, es innerhalb des Button-Steuerelements zu setzen. Mit anderen Worten, Sie würden die Breite der Schaltfläche = "100px" und Höhe = "25px" festlegen und es würde automatisch die richtige Füllung-oben/unten für die Bezeichnung berechnen. – Alex

War das eine Frage? Die Einstellung der Höhe funktioniert nicht, da die Beschriftung nicht vertikal auf der Schaltfläche zentriert ist, sondern durch Auffüllen versetzt wird. Um eine andere Höhe einzustellen, müssen Sie padding-top und padding-bottom verwenden. –

Nein, mehr von einem Kommentar zum Button-Steuerelement. Aber jetzt verstehe ich, wie es funktioniert. Danke :) – Alex

normalerweise:

$(theElement).css('height','...px').css('width','...px');

Quelle

2010-04-27 18:50:24 joanballester

Sie können '.css()' auch ein Objekt übergeben: '.css ({height: 10, width: 10})' –

Und .height ('Xpx') auch (ich denke schon) – joanballester

Sie die .ui-button.ui-widget Stil kann (keine Leerzeichen, müssen beide Klassen). (Stellen Sie sicher, dass Ihr Stylesheet unter der jQuery-Benutzeroberfläche erscheint). Sie können auch

.ui-button.ui-widget{ 
    height, width 
} 

.ui-button.ui-widget .ui-button-text{ 
    line-height, font-size 
}

Quelle

2011-09-19 03:28:16 scott

Sie können das Element mit relativer Schriftgröße stylen. Wenn Ihre Taste, um die custome Klasse ‚button‘ dann diese an die

.buttonStyle{ 
font-size:0.8em; 
}

Quelle

2012-07-13 18:43:55 Usha

ich das hilft viel um die Schaltfläche Tags <small></small> setzen gefunden CSS hinzufügen. Dies ist nur in bestimmten Fällen vorteilhaft, aber es hat mir geholfen, die Größe eines Projekts, an dem ich arbeitete, zu reduzieren.

Quelle

2012-08-22 14:57:53 Savanetech

Putting was um? – aikeru

Fixed ... musste wieder Tipps geben, um das zu machen was ich ursprünglich zeige. – Savanetech

Hier ist meine Lösung, um jquery UI-Taste die gleiche Breite zu machen. Zuerst brauche ich eine Methode, um die maximale Breite zu erhalten.

var greatestWidth = 0; // Stores the greatest width 
function getMaxWidth() { 
    var theWidth = $(this).width(); // Grab the current width 

    if(theWidth > greatestWidth) { // If theWidth > the greatestWidth so far, 
     greatestWidth = theWidth;  // set greatestWidth to theWidth 
    } 
}

Dann rufe ich diese Methode nach dem Anschließen der Schaltfläche und stellen Sie die Größe ein. Beispiel

$('.selector') 
     .button() 
     .each(getMaxWidth); 
    $('.selector').width(greatestWidth);

Quelle

2013-02-26 07:08:01

Basierend off http://api.jquery.com/height/ dieser Dokumentation die folgenden gearbeitet:

$('#mybutton').button({ icons: { primary: "ui-icon-plus" }, text: false}).height(20);

Quelle

2014-12-23 19:48:02

Wie größen Sie die jQuery-Schaltfläche?

Antwort

Verwandte Themen