wake-up-neo.net

JQuery UI Button-Größe ändern?

Ich habe die Schaltfläche jQuery UI überall auf meiner Seite verwendet, jedoch habe ich keinen Ausweg gefunden, der scheinbar ein einfaches Problem darstellt. Ich möchte, dass einige meiner Schaltflächen kleiner sind als die anderen. Dies sollte so einfach sein wie das Festlegen des CSS des Schaltflächentextes auf etwas wie font: .8em;. Die jQuery-Benutzeroberfläche verwendet jedoch 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>

Wenn ich also einen <button class="small-button">Small button!</button> habe, wird jQuery den Text in einem untergeordneten Bereich platzieren. Jede der small-button-Klasse zugewiesene Schriftgröße wird ignoriert.

Es muss einen Ausweg geben, ohne dass dabei geklärt wird, wie jQuery seine Schaltflächen erstellt. Irgendwelche Ideen?

49
chum of chance

Wenn Sie ui-button-text mit font-size direkt formatieren, können Sie es auf einer höheren Ebene überschreiben, indem Sie! Important anwenden. Sowie:

.small-button {
   font-size: .8em !important;
}

BEARBEITEN: Versuchen Sie, einen CSS-Stil direkt in .ui-button-text zu übernehmen, um zu erben:

.ui-button-text {
   font-size: inherit !important;
} 

Dies sollte auch den! Wert auf den .small-button irrelevant machen.

36
rickp

Dies half mir dabei, die Höhe der Schaltfläche zu verringern (Standardeinstellung für Glattheit ist eine Zeilenhöhe von 1,4):

.ui-button .ui-button-text
{
 line-height: 1.0;
}
13
Tim

So stelle ich auf meinen Websites die Schriftgrößen so ein, dass meine Tastengrößen denen auf der jQuery UI-Website entsprechen. Das funktioniert, weil es genau so ist, wie die jQuery UI-Website es tut!

/* 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 Eigenschaften für die Schriftgröße wie für das body-Element wird die Einstellung der Schriftgröße für alles andere einfach: 100% = 10px.

Achten Sie bei der Verwendung von Prozentsätzen auf den Kaskadierungseffekt - die 100% eines untergeordneten Elements entsprechen der Schriftgröße des übergeordneten Elements.

6
Dean

Sie können Schaltflächen unterschiedlicher Größe erstellen, indem Sie die Auffüllung des Bereichselements ändern, das in der Markup-Funktion enthalten ist, die von jQuery generiert wird, wie Tim vorschlägt.

Dieses Markup/JavaScript ...

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

Ergebnisse in diesem transformierten 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>

Am sichersten sind die ursprünglich gelieferten Variablen id und class enthalten. Sie können die Größe Ihrer Schaltflächen ändern, indem Sie dem span.ui-button-text-Element mehr Auffüllung hinzufügen.

Wie so ..

button#some-id .ui-button-text {
    /* padding values here to your liking */
}
5
Derek Adair

Ändern Sie einfach die Schriftgröße der Schaltfläche;).

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

Fügen Sie dem Button jetzt ein Jquery-Skript hinzu

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

Viel Glück. ;)

3
xxx

Ich habe oben eine Kombination aus zwei Vorschlägen verwendet. Es ist ziemlich einfach, die Benutzeroberfläche so anzupassen, wie ich es mag.

Zum Stylesheet der Seite hinzufügen:

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}
3
TrophyGeek

Meine Lösung musste auch über die neuen Menüpunkte hinweg funktionieren

Das erste, das die passenden Elemente für Menü und Schaltfläche auswählt

.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}

Und die zweite wie oben, um die Erbschaft zu erzwingen

.ui-button-text {
 font-size: inherit !important;
}
1
Benno

Ich habe das gemacht und es funktioniert gut.

$( "button" ).button("font-size", "0.8em");
1
KungFuMonkey

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

und mein css:

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }

Verwenden Sie jQuery zur Laufzeit, ohne CSS zu ändern. Das gibt Ihnen viel mehr Flexibilität.

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});
0
Dmitri K