JqueryUI - ตำแหน่ง

ในบทนี้เราจะเห็นหนึ่งในวิธียูทิลิตี้ของ jqueryUi ซึ่งเป็นวิธีการposition () ตำแหน่ง ()วิธีการช่วยให้คุณสามารถวางตำแหน่งขององค์ประกอบที่เกี่ยวกับองค์ประกอบหรือเมาส์เหตุการณ์อื่น

jQuery UI ขยายเมธอด .position () จากแกน jQuery ในลักษณะที่ช่วยให้คุณสามารถอธิบายวิธีที่คุณต้องการวางตำแหน่งองค์ประกอบในลักษณะเดียวกับที่คุณอธิบายกับบุคคลอื่นโดยธรรมชาติ แทนที่จะทำงานกับตัวเลขและคณิตศาสตร์คุณใช้คำที่มีความหมาย (เช่นซ้ายและขวา) และความสัมพันธ์

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์ของposition ()วิธีการ -

.position( options )

โดยที่อ็อพชันเป็นประเภทอ็อบเจ็กต์และให้ข้อมูลที่ระบุวิธีการจัดตำแหน่งของอิลิเมนต์ของเซ็ตที่รวมไว้ ตารางต่อไปนี้แสดงตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	ของฉัน ตัวเลือกนี้ระบุตำแหน่งขององค์ประกอบที่รวมไว้ (องค์ประกอบที่ถูกจัดตำแหน่งใหม่) เพื่อให้สอดคล้องกับองค์ประกอบเป้าหมายหรือตำแหน่ง โดยค่าเริ่มต้นคือcenter. Option - my ตัวเลือกนี้ระบุตำแหน่งขององค์ประกอบที่รวมไว้ (องค์ประกอบที่ถูกจัดตำแหน่งใหม่) เพื่อให้สอดคล้องกับองค์ประกอบเป้าหมายหรือตำแหน่ง โดยค่าเริ่มต้นคือcenter. ค่าสองค่านี้ใช้เพื่อระบุตำแหน่ง: ด้านบนซ้ายล่างขวาและตรงกลางคั่นด้วยอักขระช่องว่างโดยที่ค่าแรกคือhorizontal ค่าและค่าที่สอง vertical. พิจารณาค่าเดียวที่ระบุหรือไม่horizontal หรือ verticalขึ้นอยู่กับค่าที่คุณใช้ (ตัวอย่างเช่นด้านบนจะถือเป็นแนวตั้งในขณะที่ด้านขวาเป็นแนวนอน) Example `top, or bottom right.`
2	ที่ ตัวเลือกนี้เป็นประเภท String และระบุตำแหน่งขององค์ประกอบเป้าหมายที่จะจัดตำแหน่งองค์ประกอบใหม่ ใช้ค่าเดียวกับตัวเลือกของฉัน โดยค่าเริ่มต้นคือcenter. Option - at ตัวเลือกนี้เป็นประเภท String และระบุตำแหน่งขององค์ประกอบเป้าหมายที่จะจัดตำแหน่งองค์ประกอบใหม่ ใช้ค่าเดียวกับตัวเลือกของฉัน โดยค่าเริ่มต้นคือcenter. Example `"right", or "left center"`
3	ของ เป็นประเภท Selector หรือ Element หรือ jQuery หรือ Event ระบุองค์ประกอบเป้าหมายที่องค์ประกอบที่ห่อไว้จะถูกจัดตำแหน่งใหม่หรืออินสแตนซ์เหตุการณ์ที่มีพิกัดของเมาส์เพื่อใช้เป็นตำแหน่งเป้าหมาย โดยค่าเริ่มต้นคือnull. Option - of เป็นประเภท Selector หรือ Element หรือ jQuery หรือ Event ระบุองค์ประกอบเป้าหมายที่องค์ประกอบที่ห่อไว้จะถูกจัดตำแหน่งใหม่หรืออินสแตนซ์เหตุการณ์ที่มีพิกัดของเมาส์เพื่อใช้เป็นตำแหน่งเป้าหมาย โดยค่าเริ่มต้นคือnull. Example `#top-menu`
4	การปะทะกัน ตัวเลือกนี้เป็นประเภท String และระบุกฎที่จะใช้เมื่อองค์ประกอบที่อยู่ในตำแหน่งขยายออกไปนอกหน้าต่างในทิศทางใดก็ได้ โดยค่าเริ่มต้นคือflip. Option - collision ตัวเลือกนี้เป็นประเภท String และระบุกฎที่จะใช้เมื่อองค์ประกอบที่อยู่ในตำแหน่งขยายออกไปนอกหน้าต่างในทิศทางใดก็ได้ โดยค่าเริ่มต้นคือflip. ยอมรับสองสิ่งต่อไปนี้ (แนวนอนตามด้วยแนวตั้ง) - flip- พลิกองค์ประกอบไปทางด้านตรงข้ามและเรียกใช้การตรวจจับการชนอีกครั้งเพื่อความพอดี หากทั้งสองด้านไม่พอดีระบบจะใช้ศูนย์เป็นทางเลือก fit - ทำให้องค์ประกอบอยู่ในทิศทางที่ต้องการ แต่ปรับตำแหน่งให้พอดี flipfit- ขั้นแรกใช้ตรรกะการพลิกโดยวางองค์ประกอบไว้ด้านใดก็ได้ที่ช่วยให้มองเห็นองค์ประกอบได้มากขึ้น จากนั้นจึงใช้ตรรกะความพอดีเพื่อให้แน่ใจว่าองค์ประกอบจะมองเห็นได้มากที่สุด none - ปิดใช้งานการตรวจจับการชนกัน หากระบุค่าเดียวจะใช้กับทั้งสองทิศทาง Example `"flip", "fit", "fit flip", "fit none"`
5	โดยใช้ ตัวเลือกนี้เป็นฟังก์ชันที่แทนที่ฟังก์ชันภายในที่เปลี่ยนตำแหน่งองค์ประกอบ เรียกสำหรับแต่ละองค์ประกอบที่ห่อด้วยอาร์กิวเมนต์เดียวที่ประกอบด้วยแฮชวัตถุที่มีคุณสมบัติด้านซ้ายและด้านบนที่กำหนดเป็นตำแหน่งเป้าหมายที่คำนวณและองค์ประกอบที่ตั้งค่าเป็นบริบทของฟังก์ชัน โดยค่าเริ่มต้นคือnull. Option - using ตัวเลือกนี้เป็นฟังก์ชันที่แทนที่ฟังก์ชันภายในที่เปลี่ยนตำแหน่งองค์ประกอบ เรียกสำหรับแต่ละองค์ประกอบที่ห่อด้วยอาร์กิวเมนต์เดียวที่ประกอบด้วยแฮชวัตถุที่มีคุณสมบัติด้านซ้ายและด้านบนที่กำหนดเป็นตำแหน่งเป้าหมายที่คำนวณและองค์ประกอบที่ตั้งค่าเป็นบริบทของฟังก์ชัน โดยค่าเริ่มต้นคือnull. Example `{horizontal: "center", vertical: "left", important: "horizontal" }`
6	ภายใน ตัวเลือกนี้คือ Selector หรือ Element หรือองค์ประกอบ jQuery และช่วยให้คุณสามารถระบุองค์ประกอบที่จะใช้เป็นกล่องขอบเขตสำหรับการตรวจจับการชนกัน สิ่งนี้มีประโยชน์หากคุณจำเป็นต้องมีองค์ประกอบที่อยู่ในตำแหน่งเฉพาะในส่วนเฉพาะของเพจของคุณ โดยค่าเริ่มต้นคือwindow. Option - within ตัวเลือกนี้คือ Selector หรือ Element หรือองค์ประกอบ jQuery และช่วยให้คุณสามารถระบุองค์ประกอบที่จะใช้เป็นกล่องขอบเขตสำหรับการตรวจจับการชนกัน สิ่งนี้มีประโยชน์หากคุณจำเป็นต้องมีองค์ประกอบที่อยู่ในตำแหน่งเฉพาะในส่วนเฉพาะของเพจของคุณ โดยค่าเริ่มต้นคือwindow.

ตัวอย่าง

ตัวอย่างต่อไปนี้ไม่แสดงให้เห็นถึงการใช้วิธีการกำหนดตำแหน่ง

<!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>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML positionmethodexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ในตัวอย่างนี้เราจะเห็นว่า -

ช่อง 1จัดแนวตรงกลาง (แนวนอนและแนวตั้ง) ขององค์ประกอบ div
ช่อง 2จัดชิดซ้ายบนสุด (แนวนอนและแนวตั้ง) ขององค์ประกอบ div
ช่อง 3จะปรากฏที่มุมขวาบนของหน้าต่าง แต่เว้นระยะห่างบางส่วนไว้เพื่อให้ข้อความโดดเด่นมากขึ้น นี้จะกระทำโดยใช้ค่าแนวนอนและแนวตั้งของฉันหรือที่
สำหรับ4 กล่องที่ของถูกตั้งค่าเป็นวัตถุเหตุการณ์ นี่คือเหตุการณ์ที่เกี่ยวข้องกับตัวชี้และเลื่อนไปพร้อมกับเหตุการณ์ของเมาส์