hộp thoại jquery lưu kiểu nút hủy

Question

Tôi đang sử dụng hộp thoại jquery ui trong ứng dụng của mình. Làm cách nào để tạo kiểu cho các nút "Lưu" và "Hủy" khác nhau trong hộp thoại jquery? Vì vậy, "Lưu" hấp dẫn hơn "Hủy". Tôi có thể sử dụng liên kết siêu cho "Hủy", nhưng làm cách nào để đặt liên kết đó trong cùng một bảng điều khiển nút?

Answer 1

Dưới đây là làm thế nào để thêm các lớp tùy chỉnh trong jQuery UI Dialog (Phiên bản 1.8+):

$('#foo').dialog({ 
    'buttons' : { 
     'cancel' : { 
      priority: 'secondary', class: 'foo bar baz', click: function() { 
       ... 
      }, 
     }, 
    } 
}); 

Answer 2

Tôi đã xem HTML được tạo bởi Hộp thoại giao diện người dùng. Nó hiển thị cửa sổ nút như sau:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
    <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button> 
    <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button> 
</div> 

Việc thêm lớp vào nút Hủy phải dễ dàng.

$ ('. Ui-dialog-buttonpane: last-child'). Css ('background-color', '#ccc');

Điều này sẽ làm cho nút Hủy nhỏ màu xám. Bạn có thể tạo kiểu cho nút này tuy nhiên bạn thích.

Mã trên giả định rằng nút Hủy là nút cuối cùng. Kẻ ngu dại cách chứng minh để làm điều đó sẽ là

$('.ui-dialog-buttonpane :button') 
    .each(
     function() 
     { 
      if($(this).text() == 'Cancel') 
      { 
       //Do your styling with 'this' object. 
      } 
     } 
    ); 

Answer 3

sau khi xem xét some other threads tôi đã đưa ra giải pháp này để thêm biểu tượng để các nút trong một hộp thoại xác nhận, mà dường như để làm việc tốt trong phiên bản 1.8.1 và có thể được sửa đổi để làm phong cách khác:

$("#confirmBox").dialog({ 
    modal:true, 
    autoOpen:false,   
    buttons: { 
     "Save": function() { ... },     
     "Cancel": function() { ... } 
     } 
}); 

var buttons = $('.ui-dialog-buttonpane').children('button'); 
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon'); 

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>"); 
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>"); 

tôi muốn thể quan tâm xem nếu có là một tốt hơn w ay để làm điều đó, nhưng điều này có vẻ khá hiệu quả.

Answer 4

Chức năng này sẽ thêm một lớp vào mỗi nút trong hộp thoại của bạn. Bạn có thể sau đó phong cách (hoặc chọn với jQuery) như bình thường:

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,'')); 
}); 

Answer 5

séc ra jquery ui 1.8.5 nó có sẵn ở đây http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js và nó có nút mới để thực hiện ui thoại

Answer 6

Những giải pháp này là tất cả rất tốt nếu bạn chỉ có một hộp thoại trong trang tại một thời điểm bất kỳ, tuy nhiên nếu bạn muốn tạo kiểu cho nhiều hộp thoại cùng một lúc thì hãy thử:

$("#element").dialog({ 
    buttons: { 
     'Save': function() {}, 
     'Cancel': function() {} 
    } 
}) 
.dialog("widget") 
.find(".ui-dialog-buttonpane button") 
.eq(0).addClass("btnSave").end() 
.eq(1).addClass("btnCancel").end(); 

Thay vì các nút chọn chung, thứ này được e widget đối tượng và tìm thấy nó là cửa sổ nút, sau đó cá nhân phong cách mỗi nút. Điều này tiết kiệm rất nhiều nỗi đau khi bạn có nhiều hộp thoại trên một trang

Answer 7

Trong jQueryUI 1.8.9 sử dụng className thay vì classes hoạt động.

$('#element').dialog({ 
    buttons:{ 
    "send":{ 
     text:'Send', 
     className:'save' 
    }, 
    "cancel":{ 
     text:'Cancel', 
     className:'cancel' 
    } 
    }); 

Answer 8

Vì phiên bản jquery ui 1.8.16 bên dưới là cách tôi làm việc.

$('#element').dialog({ 
    buttons: { 
     "Save": { 
      text: 'Save', 
      class: 'btn primary', 
      click: function() { 
       // do stuff 
      } 
     } 
}); 

Answer 9

Tôi đang sử dụng jQuery UI 1.8.13 và cấu hình sau làm việc như tôi cần:

var buttonsConfig = [ 
    { 
     text: "Ok", 
     "class": "ok", 
     click: function() { 
     } 
    }, 
    { 
     text: "Annulla", 
     "class": "cancel", 
     click: function() { 
     } 
    } 
]; 

$("#foo").dialog({ 
    buttons: buttonsConfig 
// ... 

ps: nhớ để quấn "class" với dấu ngoặc kép bởi vì nó là một từ dành riêng trong js!

Answer 10

Đã một lúc kể từ khi câu hỏi này được đăng, nhưng mã sau hoạt động trên tất cả các trình duyệt (lưu ý mặc dù câu trả lời của MattPII hoạt động trong FFox và Chrome, nó ném lỗi tập lệnh trong IE).

$('#foo').dialog({ 
    autoOpen: true, 
    buttons: [ 
    { 
     text: 'OK', 
     open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button. 
     click: function() { alert('OK Clicked')} 
    }, 
    { 
     text: "Cancel", 
     click: function() { alert('Cancel Clicked')} 
    } 
    ] 
}); 

Answer 11

tôi đã phải sử dụng những sản phẩm sau xây dựng trong jQuery UI 1.8.22:

var buttons = $('.ui-dialog-buttonset').children('button'); 
buttons.removeClass().addClass('button'); 

này loại bỏ tất cả các định dạng và áp dụng phong cách thay thế khi cần thiết.
Hoạt động ở hầu hết các trình duyệt chính.

Answer 12

Tôi có phiên bản JQuery UI 1.8.11 và đây là mã làm việc của tôi. Bạn cũng có thể tùy chỉnh chiều cao và chiều rộng tùy thuộc vào yêu cầu của bạn.

$("#divMain").dialog({ 
    modal:true, 
    autoOpen: false, 
    maxWidth: 500, 
    maxHeight: 300, 
    width: 500, 
    height: 300, 
    title: "Customize Dialog", 
     buttons: { 
      "SAVE": function() { 
       //Add your functionalities here 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() {} 
});