Tôi đang sử dụng jQuery UI 1.8 và có đoạn mã sau:Làm thế nào để tránh tiêu đề hộp thoại tìm kiếm lớn trong jquery ui?
var newDiv = $(document.createElement('div'));
$(newDiv).html('hello there');
$(newDiv).attr('title','Dialog Title');
$(newDiv).css('font-size','62.5%');
$(newDiv).dialog();
Đối với một số lý do Tiêu đề trông thật sự lớn, xem this jsFiddle cho một ví dụ.
Nếu có cách nào để làm cho giao diện này giống phiên bản trong jQuery demo?
bạn có thể sử dụng quy tắc css này để áp dụng cỡ chữ nhỏ hơn:
.ui-dialog{font-size: 62.5%;}
.ui-dialog-title {
font-size:14px !important;
}
tại sao btw quan trọng? –
Nó yêu cầu trình duyệt bỏ qua bất kỳ quy tắc CSS nào khác trên thành phần đó – AlienWebguy
có, nhưng trong trường hợp này, nó không có sự khác biệt. –
Lý do có vẻ tốt trên trang web jQuery UI là họ đang sử dụng style sheet CSS để phong cách thanh tiêu đề. Nếu bạn xem nguồn của họ, bạn sẽ thấy ...
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
tôi cập nhật JSFiddle của bạn với ví dụ bằng cách sử dụng kiểu này: http://jsfiddle.net/WwVgn/5/
Trong mọi trường hợp, nếu bạn muốn tạo phong cách riêng của bạn, người đứng đầu qua trang web jQuery UI themeroller và bạn có thể dễ dàng tùy chỉnh và sau đó xuất các bảng định kiểu để sử dụng cho chính mình.
Tôi cập nhật jfiddle cơ sở của tôi sử dụng phong cách thông thường của họ và nó vẫn còn béo Tìm kiếm – foreyez
@foreyez - Bạn có thể chỉ cho tôi ví dụ mà bạn cập nhật không? (Không tìm thấy nó.) Nếu bạn nhìn vào ví dụ của tôi, nó có ổn không? – JasCav
câu trả lời của bạn là sai không may, lý do nó trông tốt là vì "
" tôi đoán css mặc định của họ khá ngu ngốc theo cách đó ... tôi phải cập nhật .ui-dialog để giảm phông chữ như những người khác được đề cập. tôi đoán hộp thoại css của họ chỉ là chất béo theo mặc định. – foreyezTôi nghĩ bạn chỉ đơn giản là sử dụng một chủ đề khác có phông chữ tiêu đề hộp thoại lớn. Hãy thử tạo một cái mới với .
Chỉ cần thêm chút này của css:
.ui-dialog-titlebar {
font-size: 80%;
}
nên không phải là phong cách được áp dụng cho '.ui-thoại-titlebar'? '.ui-dialog' sẽ ảnh hưởng đến kích thước phông chữ của toàn bộ hộp thoại. Cũng không có ai đề cập đến điều này, nhưng bạn cũng có thể thu nhỏ thanh tiêu đề một chút với '.ui-dialog-titlebar {padding: 0 0.5em! } ' –
Đã gần một năm kể từ câu trả lời này, nhưng vào thời điểm đó, điện thoại di động jQuery dường như phụ thuộc nhiều vào kích thước phông chữ cho các kích thước của nó. Vì vậy, bạn có thể áp dụng cho tiêu đề chỉ nhưng điều đó có thể gây ra một cái nhìn không cân xứng. Bạn cũng có thể áp dụng một quy tắc quan trọng cho thanh tiêu đề, nhưng lại có nguy cơ bị các phần không cân xứng. Quan trọng hơn, tuy nhiên, có thể có phong cách không sử dụng mà bạn không thể nhìn thấy. Thay vì theo đuổi tất cả chúng xuống, cá nhân, tôi muốn đặt kích thước phông chữ. Tất cả điều này có thể là tranh luận sau một năm phát triển, nhưng nếu bạn chỉ muốn thanh tiêu đề thay đổi, mã của bạn sẽ hoạt động. –