jQuery UI | position () Метод

Опубликовано: 22 Декабря, 2021

Инфраструктура пользовательского интерфейса jQuery предоставляет пользователю множество служебных функций, одна из которых - метод postion (). Метод position () помогает позиционировать любой элемент относительно любого целевого элемента на странице, например окна, любого родительского элемента, документа или мыши. Он описывает положение любого элемента на основе таких свойств, как «верхний», «левый», «правый» и «нижний».

Примечание:

Он не поддерживает функции позиционирования скрытых элементов.
Только дочерние элементы позиционируются относительно любого другого элемента или цели.

Синтаксис:

 $ (селектор) .position (параметры)

где параметры относятся к типу объектов, который определяет, как элементы должны быть расположены по отношению к целевому или родительскому элементу. Мы объясним только некоторые из них, которые обычно используются:

Параметры:

my: Это строковый тип. Эта опция упоминает позицию элемента, которая требуется для выравнивания с родительским целевым элементом. Его значение по умолчанию - центр.
at: Это строковый тип. Эта опция упоминает позицию или расположение родительского целевого элемента, по отношению к которому позиционируется дочерний элемент. Его значение по умолчанию - центр.
of: Тип - селекторный или родительский элемент. Эта опция упоминает родительские или целевые элементы, которые нужно расположить напротив них. Его значение по умолчанию - null .
столкновение: это строковый тип. Этот параметр упоминает правила, применяемые, когда позиционируемый элемент выходит за пределы окна документа. Значение по умолчанию - перевернуть .

Ссылки для jQuery UI:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link
href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />

Пример 1. В следующем примере демонстрируется базовый метод position () по умолчанию. «DivID1» и «divID2» фиксируются с их местоположениями «my» и «at» относительно родительского элемента «mainDivID». Событие мыши обрабатывается для «divID3». Позиция предназначена для перемещения по документу, сохраняя зазор 10 слева и сверху.

 <!DOCTYPE html>
 < html lang = "en" >
 
< head >
    < meta charset = "utf-8" >
    < meta name = "viewport"
          content = "width=device-width, initial-scale=1" >
    < title >jQuery UI position method</ title >
    < link href =
 " http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css "
          rel = "stylesheet" >
    < script src = " http://code.jquery.com/jquery-1.10.2.js " ></ script >
    < script src = " http://code.jquery.com/ui/1.10.4/jquery-ui.js " ></ script >
 
    < style >
        .class {
            .height: 10px;
        }
         
        .subDivClass {
            position: absolute;
            width: 80px;
            height: 80px;
            background: green;
            padding: 10px 10px;
        }
         
        #mainDivID {
            width: 300px;
            height: 300px;
            padding-top: 50px;
            background: #e9e9e9;
            border: 1px solid black
        }
    </ style >
    < script >
        $(function() {
            // Position to the center with repect to the parent mainDivID
            $("#divID1").position({
                my: "center",
                at: "center",
                of: "#mainDivID"
            });
            // Position to the top right keeping a gap of 10
            $("#divID2").position({
                my: "right-10 top+10",
                at: "right top",
                of: "#mainDivID"
            });
            /* Position to move around
            keeping a gap of 10 at the left and top */
            $(document).mousemove(function(event) {
                $("#divID3").position({
                    my: "left+10 top+10",
                    of: event,
                    collision: "fit"
                });
            });
        });
    </ script >
 </ head >
 
< body >
    < h1 style = "color:green" >GeeksforGeeks</ h1 >
    < b >jQuery UI position utility </ b >
    < div class = "height" > </ div >
    < div id = "mainDivID" >
        < div class = "subDivClass" id = "divID1" >Position 1</ div >
        < div class = "subDivClass" id = "divID2" >Position 2</ div >
        < div class = "subDivClass" id = "divID3" >Position 3</ div >
    </ div >
 </ body >
 
</ html > 

Выход:

Пример 2: В следующем примере демонстрируется метод позиции кода вместе со всеми вышеупомянутыми опциями или параметрами.

 <!DOCTYPE html>
 < html lang = "en" >
 
< head >
    < meta charset = "utf-8" >
    < meta name = "viewport"
          content = "width=device-width, initial-scale=1" >
    < title >jQuery UI position method</ title >
    < link href =
 " http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css "
          rel = "stylesheet" >
    < script src = " http://code.jquery.com/jquery-1.10.2.js " ></ script >
    < script src = " http://code.jquery.com/ui/1.10.4/jquery-ui.js " ></ script >
 
    < style >
        .height {
            height: 10px;
        }
         
        #parentDivID {
            width: 500px;
            height: 120px;
            padding: 15px;
            border: 1px solid black;
            background-color: green;
            text-align: center;
        }
         
        .positionableClass {
            position: absolute;
            display: block;
            border-radius: 25%;
            background-color: #e9e9e9;
            text-align: center;
        }
         
        #positionableId {
            width: 80px;
            height: 80px;
        }
         
        #optionsDivID {
            padding: 10px;
            margin-top: 20px;
        }
         
        .selectDiv {
            padding-bottom: 20px;
        }
         
        select {
            margin-left: 15px;
        }
    </ style >
    < script >
        $(function() {
            function position() {
                $(".positionableClass").position({
 
                    my: $("#myHorizontalID").val() +
                  " " + $("#myVerticalID").val(),
                    at: $("#atHorizontalID").val()
                  + " " + $("#atVerticalID").val(),
                    of: $("#parentDivID"),
                    collision: $("#collHorizontalID").val() +
                  " " + $("#collVerticalID").val()
 
                });
            }
 
            $("select").on("click keyup change", position);
 
            $("#parentDivID").draggable({
                drag: position
            });
 
            position();
        });
    </ script >
 </ head >
 
< body >
    < h1 style = "color:green" >GeeksforGeeks</ h1 >
    < b >jQuery UI position method </ b >
    < div class = "height" > </ div >
 
    < div id = "parentDivID" >
        < p >
            This is the parent target element.
        </ p >
    </ div >
 
    < div class = "positionableClass" id = "positionableId" >
        < p >
            Change my position
        </ p >
    </ div >
 
    < div id = "optionsDivID" >
 
        < div class = "selectDiv" >
            < b >Select "my" positions :</ b >
            < select id = "myHorizontalID" >
                < option value = "left" >left</ option >
                < option value = "center" >center</ option >
                < option value = "right" >right</ option >
            </ select >
            < select id = "myVerticalID" >
                < option value = "top" >top</ option >
                < option value = "center" >center</ option >
                < option value = "bottom" >bottom</ option >
            </ select >
        </ div >
        < div class = "selectDiv" >
            < b >Select "at" positions :</ b >
            < select id = "atHorizontalID" >
                < option value = "left" >left</ option >
                < option value = "center" >center</ option >
                < option value = "right" >right</ option >
            </ select >
            < select id = "atVerticalID" >
                < option value = "top" >top</ option >
                < option value = "center" >center</ option >
                < option value = "bottom" >bottom</ option >
            </ select >
        </ div >
        < div class = "selectDiv" >
            < b >Select collision options:</ b >
            < select id = "collHorizontalID" >
                < option value = "flip" >flip</ option >
                < option value = "fit" >fit</ option >
                < option value = "flipfit" >flipfit</ option >
                < option value = "none" >fit none</ option >
            </ select >
            < select id = "collVerticalID" >
                < option value = "flip" >flip</ option >
                < option value = "fit" >fit</ option >
                < option value = "flipfit" >flipfit</ option >
                < option value = "none" >none</ option >
            </ select >
        </ div >
    </ div >
 
</ body >
 
</ html > 

Выход:

JQuery jQuery-UI

jQuery UI | position () Метод

РЕКОМЕНДУЕМЫЕ СТАТЬИ