Làm cách nào để cung cấp cho một vị trí tuyệt đối của phần tử jQuery trên một trang?

Làm thế nào để áp dụng định vị tuyệt đối đến một yếu tố jQuery jQuery kịch bản hiện tại của tôi làLàm cách nào để cung cấp cho một vị trí tuyệt đối của phần tử jQuery trên một trang?

<head> 
    ... 
    <script type="text/javascript" src="slidemenu.js"></script> 
    <script type="text/javascript"> 
     $('#sm').css({ 
      position: 'absolute', 
      top: '10px', 
      left: '10px' 
     }); 
    </script> 
</head> 
<body onload="slideMenu.build('sm',286,10,10,1)"> 
    <ul id="sm" class="sm"> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
     <li><img src=".gif" alt="" /></li> 
    </ul> 
    ...

Và css hiện tại của tôi là:

#sm { 
    margin:0; 
    padding:0; 
} 
#sm { 
    list-style:none; 
    top:240px; 
    left:300px; 
    width:604px; 
    height:286px; 
    display:block; 
    overflow:hidden;z-index: 200; 
    position:absolute; 
} 
#sm li { 
    float:left; 
    display:inline; 
    overflow:hidden;z-index: 200; 
    position:relative; 
}

Nguồn

2011-01-18 Stephanie

Tại sao bạn cần để tạo kiểu phần tử của bạn với jQuery ? Tại sao không phải CSS? '#sm {position: cố định; trên cùng: 10px; trái: 10px; } ' –

Sử dụng .css chức năng:

$('#yourelement').css({ 
    position: 'absolute', 
    top: '10px', 
    left: '10px' 
});

Nguồn

2011-01-18 13:49:42

có lẽ nên lấy một số thông tin vị trí với' .position() 'hoặc' .offset() '. – jAndy

i am new to jquery làm thế nào tôi sẽ kết hợp các .position() hoặc .offset() vào kịch bản này? – Stephanie

@Stephanie: xem câu trả lời của tôi. – jAndy

nên trông giống như:

var $elem = $('#someelement_id'); 

$elem.css({ 
    position: 'absolute', 
    top:  $elem.position().top, 
    left:  $elem.position().left 
});

Điều này nên đảm bảo rằng phần tử sẽ ở vị trí trước đó.

Nguồn

2011-01-18 14:04:12 jAndy

Tôi có đặt các giá trị bên trong các phần tử position() không? Ví dụ vị trí (10px) .top, – Stephanie

Tôi cũng nhầm lẫn về cách kết hợp này vào mã trên của tôi, nơi nào tôi đặt nó và đó là $ elem. và đó là #someelement_id – Stephanie

Stephanie, đây chỉ là để làm rõ những gì jAndy đã chứng minh, với một chút câu trả lời của riêng tôi. Nhưng, vẫn còn tương đối mới đối với jQuery, tôi có thể liên quan đến sự nhầm lẫn của bạn. Hãy lấy mã của jAndy ra và trả lời các bình luận của bạn.

Tôi cũng bối rối về cách kết hợp này vào mã trên của mình, tôi đặt nó ở đâu và là $ elem. và #someelement_id

Trong mã của jAndy, $ elem là thành phần bạn đang cố định vị trí. Ông đang sử dụng #someelement_id chỉ để làm ví dụ chung chung của mình. Vì vậy, cụ thể đối với mã của bạn, mình

var $elem = $('#someelement_id');

sẽ trở thành

var $elem = $('#sm');

trong mã của bạn. Tất cả những gì anh ta làm là lưu trữ tham chiếu phần tử (đối tượng) vào biến $elem. Không có gì ưa thích ở đó tôi không nghĩ. Bạn không chắc chắn lý do tại sao anh ta thêm $ vào tên biến ...? Tôi tin rằng var elem = $('#sm'); sẽ hoạt động tương tự, trừ khi tôi thiếu điều gì đó. Vì vậy, điều đó giúp bạn trở thành yếu tố bạn muốn làm việc.

Tôi có đặt giá trị bên trong các phần tử position() không? Ví dụ: vị trí (10px) .top

No. Không phải nếu mục tiêu của bạn là giữ nguyên tố hoàn toàn ở vị trí hiện tại. Nếu chúng ta tách rời dòng mã đó, $elem.position() sẽ trả về một đối tượng có chứa các thuộc tính top và left. Bạn có thể đọc về phương pháp vị trí ở đây jQuery API position (Kiểm tra jQuery API offset cũng vì nó cung cấp thông tin khác nhau và cho phép bạn cung cấp tọa độ cho vị trí mới cho phần tử). Vì vậy, như xa như tôi có thể nói, như jAndy nói trong câu trả lời của mình, mã của ông sẽ thiết lập vị trí tuyệt đối của các yếu tố đến vị trí hiện tại của nó, do đó giữ nó tại chỗ.

Tôi không nghĩ rằng đây sẽ là những gì bạn muốn nếu bạn thực sự muốn di chuyển một phần tử từ vị trí hiện tại của nó đến một vị trí khác. Cho rằng bạn sẽ thiết lập trên cùng và bên trái như được trả lời bởi Matt Asbury, hoặc bạn có thể sử dụng một số kết hợp của hai câu trả lời nếu bạn muốn di chuyển phần tử đến một vị trí mới liên quan đến vị trí hiện tại của nó.Ví dụ,

$elem.css({ 
    position: 'absolute', 
    top:  $elem.position().top + 10, 
    left:  $elem.position().left + 10 
});

Hoặc, với jQuery API offset, và kết hợp hai, tôi tin rằng bạn có thể làm một cái gì đó như:

var newCoords = { 
    top: $elem.position().top + 10, 
    left: $elem.position().left + 10 
}; 
$elem.offset(newCoords);

Không chắc đó là cách tiếp cận "tốt hơn".

Liên kết được cung cấp bởi Nikkelman cũng tốt, nhưng có thể có rất nhiều điều để tìm hiểu ở đó nếu bạn mới sử dụng jQuery.

Một điều khác tôi nhận thấy, và có lẽ bạn lại những điều này ra vì họ có vẻ hiển nhiên, nhưng chỉ trong trường hợp:

Bạn cần phải bao gồm jQuery.js từ nơi nào đó, như bạn đã bao gồm của bạn slidemenu js.
Và thông thường bạn sẽ có mã jQuery của mình được bao bọc trong khối $(document).ready(function() {...});, nhưng điều này không phải lúc nào cũng cần thiết.

Hy vọng điều này sẽ giúp và tôi đã không chỉ làm ngập nước cho bạn!

Nguồn

2011-01-19 17:51:46

Có vẻ như bạn đang thực hiện chính xác, nhưng bạn quên đặt tập lệnh của mình vào bên trong $(document).ready().

$(document).ready(function() { 
    $('#sm').css({ 
     position: 'absolute', 
     top: '10px', 
     left: '10px' 
    }); 
});

Điều này đảm bảo tập lệnh của bạn không chạy cho đến khi toàn bộ DOM được tải trong trình duyệt. Nếu không, nó sẽ cố gắng áp dụng CSS trước khi nó biết về phần tử #sm. Vì tất cả những gì bạn đang làm là thiết lập một số kiểu dáng, có một lý do nào đó bạn không thể chỉ thêm nó vào tệp CSS của bạn thay vào đó?

Tôi cũng khuyên bạn nên xóa onload khỏi thẻ <body> của mình và chuyển cuộc gọi tới slideMenu.build() vào chức năng $(document).ready().

Nguồn

2011-01-19 18:26:13 keithjgrant

Ah, tôi hiểu, bạn đã chỉnh sửa nội dung đó. Câu trả lời này áp dụng cho jQuery bạn đã chỉnh sửa vào câu hỏi của mình. – keithjgrant

nếu bạn sử dụng

position: absolute;

vùng chứa tuyệt đối của bạn sẽ tăng lên khi bạn cuộn trang.

thử với

position: fixed;

đây là giải pháp tốt nhất. Và chứa vị trí của bạn sẽ được hiển thị ngay cả khi bạn di chuyển trang

Nguồn

2013-05-20 15:10:33 PonrajPaul

Đây là một cách chung chung của absolutizing bất kỳ yếu tố:

function absolutize(selector_expression) { 
    element = jQuery(selector_expression).eq(0); 

    if (element.css('position') == 'absolute') { 
     return element; 
    } 

    element.css({ 
     position: 'absolute', 
     top: element.offset().top + 'px', 
     left: element.offset().left + 'px', 
     width: element.width() + 'px', 
     height: element.height() + 'px' 
    }); 

    return element; 
}

Để sử dụng nó: absolutize('#sm');

Nguồn

2013-09-13 13:32:21

Làm cách nào để cung cấp cho một vị trí tuyệt đối của phần tử jQuery trên một trang?

Trả lời

Các vấn đề liên quan