Thay đổi kích thước Nút giao diện người dùng jQuery?

Question

Tôi đã sử dụng nút Giao diện người dùng jQuery trên tất cả các trang của mình, tuy nhiên tôi chưa tìm thấy cách nào có vẻ là một vấn đề đơn giản. Tôi muốn có một số các nút của tôi để được nhỏ hơn khác, điều này nên càng đơn giản như cài đặt CSS của văn bản nút để một cái gì đó như thế nào, font: .8em; Tuy nhiên jQuery UI mất phần tử DOM của bạn và kết thúc tốt đẹp nó:

<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> 

Vì vậy, nếu tôi có một jQuery <button class="small-button">Small button!</button> sẽ đặt văn bản trong một khoảng con. Bất kỳ kích thước phông chữ nào cho lớp small-button đều sẽ bị bỏ qua.

Có một cách để giải quyết vấn đề này mà không cần phải bẻ khóa cách jQuery tạo nút. Bất kỳ ý tưởng?

Answer 1

Nếu đó là kiểu dáng ui-button-text với font-size trực tiếp, bạn có thể ghi đè nó ở mức cao hơn bằng cách áp dụng! Chẳng hạn như:

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

EDIT: cố gắng đặt một kiểu CSS trực tiếp trên .ui-button-text kế thừa:

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

này cũng nên quan trọng trên .small-button không liên quan!.

Answer 2

này giúp làm giảm chiều cao của nút cho tôi (Smoothness theme mặc định là line-height 1,4):

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

Answer 3

Bạn có thể tạo các nút kích thước khác nhau bằng cách thay đổi các miếng đệm của phần tử span được chứa trong jQuery đánh dấu tạo ra, như Tim gợi ý.

này đánh dấu/JavaScript ...

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

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

Kết quả trong đánh dấu chuyển này ...

<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> 

nào chắc chắn nhất bao gồm các id và class thẻ mà được cung cấp ban đầu. Bạn có thể sửa đổi kích thước của các nút bằng cách thêm phần đệm vào phần tử span.ui-button-text.

như vậy ..

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

Answer 4

Chỉ cần thay đổi nút font-size;).

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

Bây giờ thêm một kịch bản jquery vào nút

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

Good Luck. ;)

Answer 5

Tôi đã sử dụng kết hợp hai đề xuất ở trên. Thật dễ dàng để tinh chỉnh giao diện người dùng theo cách tôi thích.

Để stylesheet trang của thêm:

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

Answer 6

Đây là những gì tôi sử dụng trong trang web của tôi để thiết lập font-kích thước sao cho kích thước nút của tôi cũng giống như trên jQuery UI website.Điều này làm việc bởi vì nó chính xác như thế nào jQuery UI website hiện nó!

/* 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; 
} 

Bằng cách đặt kích thước phông chữ cho mọi thứ khác trở nên tầm thường là 100% = 10px.

Chỉ cần quan sát hiệu ứng xếp tầng khi sử dụng tỷ lệ phần trăm - 100% phần tử con sẽ bằng kích thước phông chữ của phần tử gốc.

Answer 7

Giải pháp của tôi cần phải làm việc trên các mục trình đơn mới cũng

Đầu tiên để chọn các yếu tố phù hợp cho cả menu và nút

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

Và thứ hai như trên để buộc inheiritance

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

Answer 8

Sử dụng jQuery khi chạy, không sửa đổi CSS. Điều này giúp bạn linh hoạt hơn nhiều.

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

Answer 9

Tôi đã làm điều này và hoạt động tốt.

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

Answer 10

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

và css của tôi:

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