JqueryUI - स्थिति

इस अध्याय में हम jqueryUi की स्थिति, () विधि की उपयोगिता विधियों में से एक देखेंगे । स्थिति () विधि यदि आप किसी अन्य तत्व या माउस घटना के संबंध में एक तत्व स्थित कर सकते हैं।

jQuery UI एक तरह से jQuery कोर से .position () विधि का विस्तार करता है जो आपको यह बताता है कि आप किसी तत्व को उसी तरह से कैसे स्थिति में लाना चाहते हैं जिस तरह से आप स्वाभाविक रूप से किसी अन्य व्यक्ति को उसका वर्णन करेंगे। संख्या और गणित के साथ काम करने के बजाय, आप सार्थक शब्दों (जैसे बाएं और दाएं) और रिश्तों के साथ काम करते हैं।

वाक्य - विन्यास

निम्नलिखित स्थिति का सिंटैक्स है () विधि -

.position( options )

जहां विकल्प प्रकार ऑब्जेक्ट का है और यह जानकारी प्रदान करता है कि लिपटे सेट के तत्वों को कैसे निर्दिष्ट किया जाना है। निम्नलिखित तालिका उन विभिन्न विकल्पों को सूचीबद्ध करती है जिनका इस पद्धति के साथ उपयोग किया जा सकता है -

अनु क्रमांक।	विकल्प और विवरण
1	मेरे यह विकल्प लिपटे तत्वों (फिर से तैनात होने वाले) के स्थान को लक्ष्य तत्व या स्थान के साथ संरेखित करने के लिए निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैcenter। Option - my यह विकल्प लिपटे तत्वों (फिर से तैनात होने वाले) के स्थान को लक्ष्य तत्व या स्थान के साथ संरेखित करने के लिए निर्दिष्ट करता है। डिफ़ॉल्ट रूप से इसका मूल्य हैcenter। इन मानों में से दो का उपयोग स्थान निर्दिष्ट करने के लिए किया जाता है: शीर्ष, बाएं, नीचे, दाएं और केंद्र , एक स्थान वर्ण द्वारा अलग किया जाता है, जहां पहला मान हैhorizontal मूल्य, और दूसरा ए vertical। क्या निर्दिष्ट एकल मान माना जाता हैhorizontal या verticalनिर्भर करता है कि आप किस मूल्य का उपयोग करते हैं (उदाहरण के लिए, शीर्ष को ऊर्ध्वाधर के रूप में लिया जाता है, जबकि दायां क्षैतिज है)। Example `top, or bottom right.`
2	पर यह विकल्प स्ट्रिंग का है और लक्ष्य तत्व के स्थान को निर्दिष्ट करता है, जिसके विरुद्ध पुनः तैनात तत्वों को संरेखित करना है। मेरे विकल्प के समान मान लेता है । डिफ़ॉल्ट रूप से इसका मूल्य हैcenter। Option - at यह विकल्प स्ट्रिंग का है और लक्ष्य तत्व के स्थान को निर्दिष्ट करता है, जिसके विरुद्ध पुनः तैनात तत्वों को संरेखित करना है। मेरे विकल्प के समान मान लेता है । डिफ़ॉल्ट रूप से इसका मूल्य हैcenter। Example `"right", or "left center"`
3	का यह Type Selector या Element या jQuery या Event का है। यह लक्ष्य तत्व की पहचान करता है जिसके खिलाफ लिपटे हुए तत्वों को फिर से तैनात किया जाना है, या एक घटना उदाहरण है जिसमें माउस निर्देशांक लक्ष्य स्थान के रूप में उपयोग करने के लिए निर्देशांक हैं। डिफ़ॉल्ट रूप से इसका मूल्य हैnull। Option - of यह Type Selector या Element या jQuery या Event का है। यह लक्ष्य तत्व की पहचान करता है जिसके खिलाफ लिपटे हुए तत्वों को फिर से तैनात किया जाना है, या एक घटना उदाहरण है जिसमें माउस निर्देशांक लक्ष्य स्थान के रूप में उपयोग करने के लिए निर्देशांक हैं। डिफ़ॉल्ट रूप से इसका मूल्य हैnull। Example `#top-menu`
4	टक्कर यह विकल्प स्ट्रिंग का प्रकार है और लागू होने वाले नियमों को निर्दिष्ट करता है जब किसी भी दिशा में विंडो से परे स्थित तत्व का विस्तार होता है। डिफ़ॉल्ट रूप से इसका मूल्य हैflip। Option - collision यह विकल्प स्ट्रिंग का प्रकार है और लागू होने वाले नियमों को निर्दिष्ट करता है जब किसी भी दिशा में विंडो से परे स्थित तत्व का विस्तार होता है। डिफ़ॉल्ट रूप से इसका मूल्य है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	अंदर यह विकल्प एक चयनकर्ता या तत्व या jQuery तत्व है, और आपको यह निर्दिष्ट करने की अनुमति देता है कि टक्कर का पता लगाने के लिए बाउंडिंग बॉक्स के रूप में किस तत्व का उपयोग किया जाए। यह आपके काम आ सकता है यदि आपको अपने पृष्ठ के किसी विशिष्ट खंड में स्थित तत्व को शामिल करने की आवश्यकता है। डिफ़ॉल्ट रूप से इसका मूल्य हैwindow। Option - within यह विकल्प एक चयनकर्ता या तत्व या 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 को दिव्य तत्व के केंद्र (क्षैतिज और लंबवत) से जोड़ा जाता है।
बॉक्स 2 को दिव्य तत्व के बाएं शीर्ष (क्षैतिज और लंबवत) से जोड़ा जाता है।
बॉक्स 3 को विंडो के ऊपरी दाएं कोने में प्रदर्शित किया गया है, लेकिन कुछ गद्दी छोड़ दें ताकि संदेश अधिक खड़ा हो। इस की क्षैतिज और ऊर्ध्वाधर मानों का उपयोग किया जाता है मेरी या पर ।
के लिए बॉक्स 4 , का मूल्य एक घटना वस्तु के रूप में स्थापित किया जाएगा। यह एक पॉइंटर से जुड़ा इवेंट है और माउस इवेंट के साथ चलता है।