JqueryUI - Vị trí

Trong chương này, chúng ta sẽ thấy một trong những phương thức hữu ích của jqueryUi, phương thức position () . Phương thức position () cho phép bạn định vị một phần tử so với phần tử khác hoặc sự kiện chuột.

jQuery UI mở rộng phương thức .position () từ lõi jQuery theo cách cho phép bạn mô tả cách bạn muốn định vị một phần tử giống như cách bạn thường mô tả nó cho người khác. Thay vì làm việc với các con số và toán học, bạn làm việc với các từ có nghĩa (chẳng hạn như trái và phải) và các mối quan hệ.

Cú pháp

Sau đây là cú pháp của phương thức position () -

.position( options )

Nơi các tùy chọn thuộc loại Đối tượng và cung cấp thông tin chỉ định cách các phần tử của tập hợp được bao bọc được định vị. Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này:

Sr.No.	Tùy chọn & Mô tả
1	của tôi Tùy chọn này chỉ định vị trí của các phần tử được bao bọc (những phần tử đang được định vị lại) để căn chỉnh với phần tử mục tiêu hoặc vị trí. Theo mặc định, giá trị của nó làcenter. Option - my Tùy chọn này chỉ định vị trí của các phần tử được bao bọc (những phần tử đang được định vị lại) để căn chỉnh với phần tử mục tiêu hoặc vị trí. Theo mặc định, giá trị của nó làcenter. Hai trong số các giá trị này được sử dụng để chỉ định vị trí: trên cùng, trái, dưới, phải và giữa , được phân tách bằng ký tự khoảng trắng, trong đó giá trị đầu tiên làhorizontal giá trị và thứ hai là vertical. Liệu giá trị đơn được chỉ định có được xem xét hay khônghorizontal hoặc là verticalphụ thuộc vào giá trị bạn sử dụng (ví dụ: trên cùng được lấy là chiều dọc, trong khi bên phải là chiều ngang). Example `top, or bottom right.`
2	tại Tùy chọn này thuộc loại Chuỗi và chỉ định vị trí của phần tử mục tiêu để căn chỉnh các phần tử được định vị lại. Nhận các giá trị giống như tùy chọn của tôi . Theo mặc định, giá trị của nó làcenter. Option - at Tùy chọn này thuộc loại Chuỗi và chỉ định vị trí của phần tử mục tiêu để căn chỉnh các phần tử được định vị lại. Nhận các giá trị giống như tùy chọn của tôi . Theo mặc định, giá trị của nó làcenter. Example `"right", or "left center"`
3	của Đây là loại Bộ chọn hoặc Phần tử hoặc jQuery hoặc Sự kiện. Nó xác định phần tử mục tiêu mà các phần tử được bọc sẽ được định vị lại, hoặc một cá thể Sự kiện có chứa tọa độ chuột để sử dụng làm vị trí đích. Theo mặc định, giá trị của nó lànull. Option - of Đây là loại Bộ chọn hoặc Phần tử hoặc jQuery hoặc Sự kiện. Nó xác định phần tử mục tiêu mà các phần tử được bọc sẽ được định vị lại, hoặc một cá thể Sự kiện có chứa tọa độ chuột để sử dụng làm vị trí đích. Theo mặc định, giá trị của nó lànull. Example `#top-menu`
4	va chạm Tùy chọn này thuộc loại Chuỗi và chỉ định các quy tắc được áp dụng khi phần tử được định vị mở rộng ra ngoài cửa sổ theo bất kỳ hướng nào. Theo mặc định, giá trị của nó làflip. Option - collision Tùy chọn này thuộc loại Chuỗi và chỉ định các quy tắc được áp dụng khi phần tử được định vị mở rộng ra ngoài cửa sổ theo bất kỳ hướng nào. Theo mặc định, giá trị của nó làflip. Chấp nhận hai (theo chiều ngang theo chiều dọc) trong số sau: flip- Lật phần tử sang phía đối diện và chạy lại phát hiện va chạm cho vừa vặn. Nếu không bên nào phù hợp, trung tâm được sử dụng làm dự phòng. fit - Giữ phần tử theo hướng mong muốn, nhưng điều chỉnh vị trí sao cho vừa vặn. flipfit- Đầu tiên áp dụng logic lật, đặt phần tử ở bên nào cho phép phần tử hiển thị nhiều hơn. Sau đó, logic phù hợp được áp dụng để đảm bảo phần tử hiển thị nhiều nhất có thể. none - Vô hiệu hóa tính năng phát hiện va chạm. Nếu một giá trị được chỉ định, nó sẽ áp dụng cho cả hai hướng. Example `"flip", "fit", "fit flip", "fit none"`
5	sử dụng Tùy chọn này là một hàm thay thế hàm bên trong thay đổi vị trí phần tử. Được gọi cho mỗi phần tử được bao bọc với một đối số bao gồm một băm đối tượng với các thuộc tính bên trái và trên cùng được đặt thành vị trí mục tiêu được tính toán và phần tử được đặt làm ngữ cảnh hàm. Theo mặc định, giá trị của nó lànull. Option - using Tùy chọn này là một hàm thay thế hàm bên trong thay đổi vị trí phần tử. Được gọi cho mỗi phần tử được bao bọc với một đối số bao gồm một băm đối tượng với các thuộc tính bên trái và trên cùng được đặt thành vị trí mục tiêu được tính toán và phần tử được đặt làm ngữ cảnh hàm. Theo mặc định, giá trị của nó lànull. Example `{horizontal: "center", vertical: "left", important: "horizontal" }`
6	trong Tùy chọn này là Bộ chọn hoặc Phần tử hoặc phần tử jQuery và cho phép bạn chỉ định phần tử nào sẽ sử dụng làm hộp giới hạn để phát hiện va chạm. Điều này có thể hữu ích nếu bạn cần chứa phần tử được định vị trong một phần cụ thể trên trang của bạn. Theo mặc định, giá trị của nó làwindow. Option - within Tùy chọn này là Bộ chọn hoặc Phần tử hoặc phần tử jQuery và cho phép bạn chỉ định phần tử nào sẽ sử dụng làm hộp giới hạn để phát hiện va chạm. Điều này có thể hữu ích nếu bạn cần chứa phần tử được định vị trong một phần cụ thể trên trang của bạn. Theo mặc định, giá trị của nó làwindow.

Thí dụ

Ví dụ sau giải phóng dữ liệu sử dụng phương pháp vị trí .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI position method Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .positionDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #b9cd6d;
         }
         #targetElement {
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>
      
      <script>
         $(function() {
            // Position the dialog offscreen to the left, but centered vertically
            $( "#position1" ).position({
               my: "center",
               at: "center",
               of: "#targetElement"
            });
            $( "#position2" ).position({
               my: "left top",
               at: "left top",
               of: "#targetElement"
            });
            $( "#position3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#targetElement"
            });
            $( document ).mousemove(function( event ) {
               $( "#position4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "targetElement">
         <div class = "positionDiv" id = "position1">Box 1</div>
         <div class = "positionDiv" id = "position2">Box 2</div>
         <div class = "positionDiv" id = "position3">Box 3</div>
         <div class = "positionDiv" id = "position4">Box 4</div>
      </div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML positionmethodexample.htmvà mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ này, chúng ta thấy rằng -

Hộp 1 được căn chỉnh đến chính giữa (theo chiều ngang và chiều dọc) của phần tử div.
Hộp 2 được căn chỉnh ở trên cùng bên trái (theo chiều ngang và chiều dọc) của phần tử div.
Ô 3 được hiển thị ở góc trên cùng bên phải của cửa sổ, nhưng hãy để lại một số khoảng đệm để thông báo nổi bật hơn. Điều này được thực hiện bằng cách sử dụng các giá trị ngang và dọc của tôi hoặc tại .
Đối với Box 4 , các của giá trị được thiết lập như là một đối tượng sự kiện. Đây là một sự kiện được liên kết với một con trỏ và di chuyển với sự kiện chuột.