JqueryUI - pozycja

W tym rozdziale zobaczymy jedną z metod użyteczności jqueryUi, metodę position () . Metoda position () umożliwia pozycjonowanie elementu względem innego elementu lub zdarzenia myszy.

Interfejs użytkownika jQuery rozszerza metodę .position () z rdzenia jQuery w sposób, który pozwala opisać, w jaki sposób chcesz ustawić element w taki sam sposób, w jaki naturalnie opisałbyś go innej osobie. Zamiast pracować z liczbami i matematyką, pracujesz ze znaczącymi słowami (takimi jak lewy i prawy) oraz związkami.

Składnia

Poniżej przedstawiono składnię metody position () -

.position( options )

Gdzie opcje są typu Object i zawierają informacje określające sposób umieszczania elementów opakowanego zestawu. Poniższa tabela zawiera listę różnych opcji , których można użyć w tej metodzie -

Sr.No.	Opcja i opis
1	mój Ta opcja określa położenie zawiniętych elementów (tych, które są ponownie pozycjonowane) w celu wyrównania z docelowym elementem lub lokalizacją. Domyślnie jego wartość tocenter. Option - my Ta opcja określa położenie zawiniętych elementów (tych, które są ponownie pozycjonowane) w celu wyrównania z docelowym elementem lub lokalizacją. Domyślnie jego wartość tocenter. Dwie z tych wartości są używane do określenia lokalizacji: góra, lewo, dół, prawo i środek , oddzielone spacją, gdzie pierwsza wartość tohorizontal wartość, a druga wartość vertical. Czy pod uwagę brana jest określona pojedyncza wartośćhorizontal lub verticalzależy od użytej wartości (na przykład góra jest traktowana jako pionowa, a prawa jest pozioma). Example `top, or bottom right.`
2	w Ta opcja jest typu String i określa położenie elementu docelowego, względem którego należy wyrównać ponownie pozycjonowane elementy. Przyjmuje te same wartości, co opcja my . Domyślnie jego wartość tocenter. Option - at Ta opcja jest typu String i określa położenie elementu docelowego, względem którego należy wyrównać ponownie pozycjonowane elementy. Przyjmuje te same wartości, co opcja my . Domyślnie jego wartość tocenter. Example `"right", or "left center"`
3	z Jest to typ Selector lub Element, jQuery lub Event. Identyfikuje element docelowy, względem którego zawinięte elementy mają zostać przeniesione, lub instancję zdarzenia zawierającą współrzędne myszy, która ma być używana jako lokalizacja docelowa. Domyślnie jego wartość tonull. Option - of Jest to typ Selector lub Element, jQuery lub Event. Identyfikuje element docelowy, względem którego zawinięte elementy mają zostać przeniesione, lub instancję zdarzenia zawierającą współrzędne myszy, która ma być używana jako lokalizacja docelowa. Domyślnie jego wartość tonull. Example `#top-menu`
4	kolizja Ta opcja jest typu String i określa zasady, które mają być stosowane, gdy pozycjonowany element wystaje poza okno w dowolnym kierunku. Domyślnie jego wartość toflip. Option - collision Ta opcja jest typu String i określa zasady, które mają być stosowane, gdy pozycjonowany element wystaje poza okno w dowolnym kierunku. Domyślnie jego wartość toflip. Akceptuje dwa (poziome, a następnie pionowe) z następujących - flip- Odwraca element na przeciwną stronę i ponownie uruchamia wykrywanie kolizji w celu dopasowania. Jeśli żadna ze stron nie pasuje, środek jest używany jako rozwiązanie zastępcze. fit - Utrzymuje element w żądanym kierunku, ale dostosowuje położenie tak, aby pasował. flipfit- Najpierw stosuje logikę odwracania, umieszczając element po dowolnej stronie, dzięki czemu większa część elementu będzie widoczna. Następnie stosowana jest logika dopasowania, aby zapewnić widoczność jak największej części elementu. none - Wyłącza wykrywanie kolizji. Jeśli określona jest pojedyncza wartość, dotyczy to obu kierunków. Example `"flip", "fit", "fit flip", "fit none"`
5	za pomocą Ta opcja to funkcja, która zastępuje funkcję wewnętrzną, która zmienia pozycję elementu. Wywoływana dla każdego opakowanego elementu z pojedynczym argumentem składającym się z skrótu obiektu z właściwościami left i top ustawionymi na obliczoną pozycję docelową oraz elementem ustawionym jako kontekst funkcji. Domyślnie jego wartość tonull. Option - using Ta opcja to funkcja, która zastępuje funkcję wewnętrzną, która zmienia pozycję elementu. Wywoływana dla każdego opakowanego elementu z pojedynczym argumentem składającym się z skrótu obiektu z właściwościami left i top ustawionymi na obliczoną pozycję docelową oraz elementem ustawionym jako kontekst funkcji. Domyślnie jego wartość tonull. Example `{horizontal: "center", vertical: "left", important: "horizontal" }`
6	w ciągu Ta opcja to Selector, Element lub element jQuery i pozwala określić, który element ma być używany jako obwiednia do wykrywania kolizji. Może się to przydać, jeśli chcesz umieścić pozycjonowany element w określonej sekcji strony. Domyślnie jego wartość towindow. Option - within Ta opcja to Selector, Element lub element jQuery i pozwala określić, który element ma być używany jako obwiednia do wykrywania kolizji. Może się to przydać, jeśli chcesz umieścić pozycjonowany element w określonej sekcji strony. Domyślnie jego wartość towindow.

Przykład

Poniższy przykład demonstruje użycie metody pozycji .

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

Zapiszmy powyższy kod w pliku HTML positionmethodexample.htmi otwórz go w standardowej przeglądarce obsługującej javascript, musisz również zobaczyć następujące dane wyjściowe. Teraz możesz grać z wynikiem -

W tym przykładzie widzimy, że -

Ramka 1 jest dostosowane do środka (poziomo i pionowo) na elemencie div.
Ramka 2 jest wyrównany do lewej górnej (poziomo i pionowo) na elemencie div.
Pole 3 jest wyświetlane w prawym górnym rogu okna, ale pozostaw trochę wypełnienia, aby wiadomość bardziej się wyróżniała. Odbywa się to za pomocą poziomych i pionowych wartości my lub at .
Na polu 4 , z wartości jest ustawiona jako obiekt zdarzenia. Jest to zdarzenie powiązane ze wskaźnikiem i porusza się wraz ze zdarzeniem myszy.