Cách đặt kích thước & vị trí của jquery Ngày biểu tượng lịch trình chọn biểu tượng kích hoạt

Question

Tôi đang sử dụng bộ chọn ngày jquery biểu tượng kích hoạt biểu tượng lịch gần hộp văn bản theo mặc định là trên đầu tôi muốn đặt kích thước hình ảnh (chiều cao) giống như hộp văn bản chiều cao hãy cho tôi một số gợi ý mã của tôi là

$(#textbox1).datepicker({ 
    showOn: "button", 
    buttonImage: "calendar_1.png", 
    buttonImageOnly: true 
)}; 

Answer 1

Kiểm tra phần tử với firebug, tôi nhận điều này:

<img class="ui-datepicker-trigger" src="http://xxxxx/officeprime/assets/img/calendar.gif" alt="..." title="..."/> 

Sau đó, bạn có thể làm việc với lớp CSS ui-datepicker-trigger.

Answer 2

Thêm tùy chỉnh CSS trong trang của bạn

<style> 
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px } 
/* {} is the value according to your need */ 
</style> 

Answer 3

Nếu bạn đang sử dụng hình ảnh được cá nhân hóa của riêng mình cho biểu tượng lịch thì bạn có thể chỉ cần tạo hình ảnh có kích thước bạn muốn. Đối với trường hợp của tôi, chiều cao của hộp nhập liệu của tôi là 24px và kích thước biểu tượng là 16X16. Tôi vừa chỉnh sửa kích thước của hình ảnh và làm cho nó 24X24 và vấn đề đã được giải quyết.

Answer 4

Không có cách nào trong số này phù hợp với tôi. Có vẻ như jQuery đặt thuộc tính chiều cao của nút hình ảnh khi rời khỏi chức năng sẵn sàng. Vì vậy, nếu bạn cố gắng thiết lập thuộc tính chiều cao trong hàm sẵn sàng, nó sẽ bị ghi đè lên 26px. Vì vậy, tôi đã tạo ra một hàm riêng biệt để chạy trong sự kiện onload của thẻ body. Nó cập nhật thuộc tính chiều cao của nút với những gì tôi muốn như thế này:

// sample jQuery datepicker button tag: <img style="margin: 0px; padding: 2px; height: 26px; vertical-align: bottom;" class="ui-datepicker-trigger" > 
var oDateCell = oTableRow.cells[2]; 
var sDateCellHTML = oDateCell.innerHTML; 
var sRevisedHTML = sDateCellHTML.replace("height: 26px;", "height: 13px;"); 
oDateCell.innerHTML = sRevisedHTML; 

tôi đã làm một số công việc nhiều hơn về vấn đề này và tôi phát hiện ra rằng đoạn mã trên có một lỗi. Điều này làm cho sự kiện nhấp không thành công và lịch không hiển thị khi nhấp vào hình ảnh. Tôi không biết tại sao, nhưng tôi tìm thấy một cách tốt hơn mà không hoạt động. Phương pháp trên là một cách thay đổi phong cách. Cách đúng là như thế này:

  var oTableRow = oTable.rows[iRow]; 
      if (oTableRow.cells.length > 2) 
      { 
       var oDateCell = oTableRow.cells[2]; 
       if (oDateCell.childNodes.length > 1) 
       { 
        var oImage = oDateCell.childNodes[1]; 
        oImage.style.height = "13px"; 
       } 
      } 

Answer 5

Bạn có thể chỉnh sửa lớp .ui-datepicker-kích hoạt với jQuery nhưng điều quan trọng là phải đảm chỉnh sửa sau khi datepicker chức năng.

Ví dụ:

$(#textbox1).datepicker({ 
     showOn: "button", 
     buttonImage: "calendar_1.png", 
     buttonImageOnly: true)}; 

$(".ui-datepicker-trigger").css("margin-bottom","-6px"); 

Answer 6

Áp dụng CSS này:

.ui-datepicker-trigger { 
    position: absolute; 
}