Giao diện người dùng jQuery Hộp thoại CSS cá nhân

Question

Tôi đang tìm cách tạo kiểu cho một hộp thoại phương thức (sử dụng Hộp thoại giao diện người dùng) với CSS duy nhất tách biệt với hộp thoại truyền thống, do đó, có hai hộp thoại jQuery trông khác nhau.

Tôi đã theo kiểu một, ví dụ,

<div id="dialog_style1" class="dialog1 hidden">One content</div> 

và một

<div id="dialog_style2" class="dialog2 hidden">Another content</div> 

Đáng tiếc là tôi đã nhận thấy rằng việc sử dụng CSS riêng biệt đến các bộ phận phong cách của hộp thoại, như

.dialog1 .ui-dialog-titlebar { display:none; } 
.dialog2 .ui-dialog-titlebar { color:#aaa; } 

không hoạt động vì .ui-dialog-titlebar không có lớp .dialog1 và tôi không thể thực hiện một số addClass mà không cần đột nhập vào plugin.

Một giải pháp thay thế sẽ là có một thành phần như body có một lớp/id duy nhất (tùy thuộc vào loại nào tôi muốn), nhưng điều đó sẽ loại trừ cả hai hộp thoại trong cùng một trang.

Tôi làm cách nào để thực hiện việc này?

Answer 1

Run sau ngay sau khi hộp thoại được gọi trong Ajax:

$(".ui-dialog-titlebar").hide(); 
    $(".ui-dialog").addClass("customclass"); 

này áp dụng chỉ để hộp thoại được mở ra, để nó có thể được thay đổi cho mỗi người sử dụng.

(câu trả lời nhanh này được dựa trên một phản ứng trên Stack   Overflow.)

Answer 2

Bạn có thể thêm lớp để tiêu đề như thế này:

$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1'); 

Answer 3

Hãy thử những:

#dialog_style1 .ui-dialog-titlebar { display:none; } 
#dialog_style2 .ui-dialog-titlebar { color:#aaa; } 

Các khuyến nghị tốt nhất mà tôi có thể cung cấp cho bạn là tải trang trong Firefox, mở hộp thoại và kiểm tra nó bằng Firebug, sau đó thử các bộ chọn khác nhau trong bảng điều khiển và xem những gì hoạt động. Bạn có thể cần phải sử dụng một số khác descendant selectors.

Answer 4

Cách thông thường để làm điều này là với jQuery UI của CSS Scopes:

<div class="myCssScope"> 
    <!-- dialog goes here --> 
</div> 

Thật không may, hộp thoại jQuery UI di chuyển hộp thoại phần tử DOM vào cuối tài liệu, để khắc phục các vấn đề về chỉ mục z tiềm năng. Điều này có nghĩa là phạm vi sẽ không hoạt động (nó sẽ không còn có tổ tiên ".myCssScope") nữa.

Christoph Herold designed a workaround mà tôi đã implemented as a jQuery plugin, có thể điều đó sẽ hữu ích.

Answer 5

Theo UI dialog documentation, plugin thoại tạo ra một cái gì đó như thế này:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"> 
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
     <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span> 
     <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a> 
    </div> 
    <div class="ui-dialog-content ui-widget-content" id="dialog_style1"> 
     <p>One content</p> 
    </div> 
</div> 

Điều đó có nghĩa những gì bạn có thể thêm vào bất kỳ lớp chính xác đến thoại đầu tiên hoặc thứ hai sử dụng gần nhất() phương pháp của jQuery.Ví dụ:

$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1'); 

$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2'); 

rồi CSS nó.

Answer 6

Phiên bản hiện tại của hộp thoại có tùy chọn "dialogClass" mà bạn có thể sử dụng với id của mình. Ví dụ,

$('foo').dialog({dialogClass:'dialog_style1'}); 

Sau đó CSS sẽ

.dialog_style1 {color:#aaa;} 

Answer 7

Vấn đề này bật lên cho tôi khi tôi đang cố gắng tìm một câu trả lời tương tự. Xem xét:

$('.ui-dialog').wrap('<div class="abc" />'); 
    $('.ui-widget-overlay').wrap('<div class="abc" />'); 

đâu abc là tên của 'CSS wrapper' của bạn - xem Stack Overflow câu hỏi Custom CSS scope and jQuery UI dialog themes nơi tôi tìm thấy câu trả lời từ Evgeni Nabokov. Để biết thêm thông tin về trình bao bọc CSS được sử dụng với hộp thoại jQuery UI - hãy xem phần sau (nhưng lưu ý rằng chúng KHÔNG thực sự giải quyết vấn đề của trình bao bọc CSS với hộp thoại - bạn cần các nhận xét ở trên để trợ giúp ở đó, Using Multiple jQuery UI Themes on a Single Page . (Filament blog)

Answer 8

tôi tạo ra phong cách tùy chỉnh bằng cách chỉ trọng lớp jQuery trong phong cách nội tuyến Vì vậy, trên đầu trang, bạn có CSS ​​jQuery liên kết và ngay sau đó ghi đè lên lớp bạn cần phải sửa đổi:.

<head> 
    <link href="/Content/theme/base/jquery.ui.all.css" rel="stylesheet"/> 

    <style type="text/css"> 
     .ui-dialog .ui-dialog-content 
     { 
      position: relative; 
      border: 0; 
      padding: .5em 1em; 
      background: none; 
      overflow: auto; 
      zoom: 1; 
      background-color: #ffd; 
      border: solid 1px #ea7; 
     } 

     .ui-dialog .ui-dialog-titlebar 
     { 
      display:none; 
     } 

     .ui-widget-content 
     { 
      border:none; 
     } 
    </style> 
</head>