Ändern der jQuery UI Schaltflächengröße?

Habe ich mit der jQuery-UI-button auf meiner Seite, allerdings habe ich keinen Weg gefunden, um was zu sein scheint ein einfaches problem. Ich möchte einige meiner Tasten kleiner zu sein als die anderen, dies sollte so einfach wie das festlegen der CSS des button-text so etwas wie font: .8em; Jedoch jQuery UI findet Ihr DOM-element und umschließt es:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

Also wenn ich einen <button class="small-button">Small button!</button> jQuery wird, setzen Sie den text in ein untergeordnetes span. Jede schriftart, die Größe gegeben, um die small-button - Klasse werden ignoriert.

Es muss ein Weg, um dies ohne hacking, wie jQuery lässt seine Tasten. Irgendwelche Ideen?

InformationsquelleAutor der Frage chum of chance | 2010-08-01

35

Wenn es styling ui-button-text mit font-size Sie direkt überschreiben können Sie auf eine höhere Ebene, indem !wichtig. Wie:
```
.small-button {
   font-size: .8em !important;
}
```
BEARBEITEN: versuchen Sie es mit einer CSS-style direkt auf .ui-button-text Erben:
```
.ui-button-text {
   font-size: inherit !important;
} 
```
Sollte dies auch machen !wichtig auf der .small-button irrelevant.

InformationsquelleAutor der Antwort rickp
13

Dies half, verringern Sie die Höhe der Schaltfläche für mich (Glätte Thema default ist line-height von 1.4):
```
.ui-button .ui-button-text
{
 line-height: 1.0;
}
```
InformationsquelleAutor der Antwort Tim
6

Hier ist, was ich in meinen Webseiten, um den setup-schriftart-Größen, so dass meine button-Größen sind die gleichen wie auf der jQuery UI-website. Dies funktioniert, weil es genau wie die jQuery UI-website tut es!
```
/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}
```
Durch festlegen der schriftart,-Größe, - Eigenschaften für das body-element, die Einstellung der schriftart,-Größe, für alles andere banal wie 100% = 10px.

Just watch out für die cascading-Effekt bei Verwendung von Prozentsätzen - ein Kind-element 100% der Höhe des übergeordneten Elements font-size.

InformationsquelleAutor der Antwort Dean
5

Können Sie erstellen, die unterschiedlich großen Tasten durch ändern der Polsterung des span-Elements enthalten ist innerhalb des markup jQuery erzeugt, als Tim vorschlägt.

Diese markup/JavaScript...
```
$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>
```
Ergebnisse in dieser transformiert markup...
```
<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
          ui-button-text-only" id="some-id" role="button" aria-disabled="false">
<span class="ui-button-text">some button</span>
</button>
```
Denen gehört auf jeden Fall die id und class - tags, die ursprünglich geliefert. Sie können ändern Sie die Größe der Schaltflächen, indem Sie mehr Polsterung an der span.ui-button-text element.

Wie So..
```
button#some-id .ui-button-text {
    /* padding values here to your liking */
}
```
InformationsquelleAutor der Antwort Derek Adair

Ändern Sie einfach die Schaltfläche schriftart,-Größe ;).

<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />

Fügen Sie nun ein jquery-Skript, um die Schaltfläche

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('input:submit, #btn2').button();
        });
    </script>

Glück. 😉

InformationsquelleAutor der Antwort xxx

3

Ich habe eine Kombination der beiden Vorschläge oben. Es ist ziemlich einfach mit tweak UI nur so wie ich es mag.

Seite im stylesheet hinzufügen:
```
.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}
```
InformationsquelleAutor der Antwort TrophyGeek
1

Meine Lösung benötigt, um die Arbeit über die neue Menü-Elemente, sowie

Den ersten, wählen Sie die passenden Elemente für das Menü und die Schaltfläche
```
.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}
```
Und die zweite wie oben zu zwingen inheiritance
```
.ui-button-text {
 font-size: inherit !important;
}
```
InformationsquelleAutor der Antwort Benno
1

Ich Tat dies, und es funktioniert gut.
```
$( "button" ).button("font-size", "0.8em");
```
InformationsquelleAutor der Antwort KungFuMonkey
0

JQuery verwenden zur Laufzeit verändern, ohne CSS. Dies gibt Ihnen viel mehr Flexibilität.
```
$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});
```
InformationsquelleAutor der Antwort Dmitri K
0

<input type="submit" value="Mostrar imágenes">

und mein css:
```
input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }
```
InformationsquelleAutor der Antwort Marinha do Nascimento

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.