Làm thế nào để thay đổi vị trí của thanh công cụ jquery ui?

Question

Có thể thay đổi các vị trí top và left (lấy giá trị hiện tại và thay đổi chúng) của jQuery UI datepicker. Xin lưu ý rằng tôi cần phải thay đổi vị trí, không được đặt margin vì nó nằm trong các ví dụ khác.

Answer 1

Chắc chắn là vậy. Như luôn có chỉ có một datepicker hoạt động, bạn có thể chọn datepicker hoạt động với:

var $datepicker = $('#ui-datepicker-div'); 

và thay đổi vị trí của nó:

$datepicker.css({ 
    top: 10, 
    left: 10 
}); 

EDIT

Whoah, một khó khăn. Nếu bạn đặt vị trí trên cùng hoặc bên trái trong beforeShow, vị trí này sẽ bị tràn ngập một lần nữa bởi plugin datepicker. Bạn có phải đặt thay đổi css trong một setTimeout:

$("#datepicker").datepicker({ 
    beforeShow: function (input, inst) { 
     setTimeout(function() { 
      inst.dpDiv.css({ 
       top: 100, 
       left: 200 
      }); 
     }, 0); 
    } 
}); 

DEMO: http://jsfiddle.net/BWfwf/4/

Giải thích về setTimeout(function() {}, 0): Why is setTimeout(fn, 0) sometimes useful?

Answer 2

Nếu bạn nhận được thực sự khó khăn, bạn có thể chỉnh sửa jquery-ui- [version] của bạn. custom.js. Chức năng điều khiển vị trí nơi lịch sẽ xuất hiện là:

_findPos: function (obj) {var vị trí, inst = this._getInst (obj), isRTL = this._get (inst, "isRTL");

while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) { 
     obj = obj[isRTL ? "previousSibling" : "nextSibling"]; 
    } 

    position = $(obj).offset(); 
    return [position.left, position.top]; 
}, 

Tôi có một số mã tùy chỉnh sử dụng chuyển đổi CSS3 để phóng to hoặc thu nhỏ trang dựa trên chiều rộng của nó. Thao tác này sẽ đưa ra các tọa độ màn hình mà tiện ích lịch dựa vào. Tôi đã thêm một số mã tùy chỉnh vào _findPos để phát hiện và xử lý mức thu phóng. Mã được sửa đổi trông giống như sau:

_findPos: function(obj) { 
    var position, 
     inst = this._getInst(obj), 
     isRTL = this._get(inst, "isRTL"); 

    while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.hidden(obj))) { 
     obj = obj[isRTL ? "previousSibling" : "nextSibling"]; 
    } 

    position = $(obj).offset(); 
    /* Custom Code for Zoom */ 
    var zoomLevel = 1; 
    var minW = 1024; 
    if ($(window).width() > minW) 
       { zoomLevel = $(window).width()/minW;} 
    return [position.left, position.top/zoomLevel]; 
}, 

Answer 3

Có thể là một câu hỏi cũ, nhưng tự mình gặp vấn đề ngay hôm nay và không thể nhận được các đề xuất khác để hoạt động. Cố định nó cách khác (sử dụng .click(function(){}) và muốn thêm hai xu của tôi.

Tôi có trường nhập với id sDate trong đó, khi được nhấp, hiển thị trình ghi ngày tháng.

Điều tôi đã làm để giải quyết vấn đề là thêm thói quen nhấp chuột vào trường #sDate.

$('#sDate').click(function(){ //CHANGE sDate TO THE ID OF YOUR INPUT FIELD 
    var pTop = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR TOP POSITIONING 
    var pLeft = '10px'; //CHANGE TO WHATEVER VALUE YOU WANT FOR LEFT POSITIONING 
    $('#ui-datepicker-div').css({'left':pLeft, 'top':pTop}); 
});