Penjelasan terperinci tentang fungsi jQuery position() dan aplikasi fungsi position dalam jQuery_jquery

Fungsi

kedudukan() digunakan untuk mengembalikan offset elemen padanan semasa berbanding dengan elemen nenek moyang yang diposisikan, iaitu, koordinat relatif kepada elemen nenek moyang yang diposisikan. Fungsi ini hanya berfungsi pada elemen yang boleh dilihat.

Apa yang dipanggil "elemen kedudukan" bermakna nilai atribut kedudukan CSS elemen adalah mutlak, relatif atau tetap (selagi ia bukan statik lalai).

Fungsi ini mengembalikan objek koordinat, yang mempunyai atribut kiri dan atribut atas. Nilai harta ialah semua nombor, dan semuanya dalam piksel (px).

Perbezaan daripada offset() ialah position() mengembalikan koordinat relatif kepada elemen nenek moyang yang diposisikan, dan offset() mengembalikan koordinat relatif kepada dokumen semasa. Selain itu, fungsi position() tidak boleh digunakan untuk menetapkan operasi. Jika semua elemen nenek moyang elemen semasa adalah diposisikan lalai (statik), maka kedudukan offset yang dikembalikan oleh fungsi ini adalah sama dengan fungsi offset().

Fungsi ini tergolong dalam objek jQuery (contoh).

Tatabahasa

Fungsi ini baharu dalam jQuery 1.2.

jQueryObject.position( )

Nilai pulangan

Nilai pulangan fungsi position() adalah jenis Object, mengembalikan objek koordinat mengimbangi relatif kepada elemen nenek moyang "berkedudukan" yang terdekat. Objek ini mempunyai atribut kiri dan atas.

Jika objek jQuery semasa sepadan dengan berbilang elemen, apabila mengembalikan koordinat, fungsi position() hanya menggunakan elemen padanan pertama. Jika tiada unsur padanan, undefined dikembalikan.

Sistem rujukan koordinat dalam kedudukan() adalah berdasarkan sudut kiri atas unsur nenek moyang yang diposisikan sebagai asalan (0,0), positif ke kanan dan positif ke bawah.

Contoh & Arahan

Ambil kod HTML berikut sebagai contoh:

<br>
<br>
<p id="n1"><span id="n2">专注于编程开发技术分享</span></p>

Kod sampel jQuery berikut digunakan untuk menunjukkan penggunaan fungsi position() dan fungsi offset():

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(8, 60)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

Daripada keputusan operasi jQuery di atas, kita dapat melihat bahawa position() tidak memperoleh kedudukan offset berbanding dengan elemen induknya. Jika semua elemen nenek moyang n2 diposisikan lalai, kedudukan offset dikembalikan oleh position() adalah konsisten dengan fungsi offset().

Seterusnya, kami menambah kedudukan relatif kepada n1 dalam kod HTML di atas:

<br>
<br>
<p id="n1" style="position: relative;" ><span id="n2">专注于编程开发技术分享</span></p>

Kemudian, kami melaksanakan semula kod jQuery di atas dan anda boleh melihat keputusan berikut:

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(0, 0)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

Pada masa ini, antara unsur nenek moyang n2, n1 ialah unsur nenek moyang berkedudukan terdekat dengan n2 (di sini ia adalah relatif, begitu juga untuk mutlak dan tetap), jadi position() mengembalikan kedudukan offset bagi n2 relatif kepada n1.

Aplikasi fungsi kedudukan dalam jQuery (pemusatan, pemprosesan luar skrin, dll.)

jQuery menyediakan fungsi Position, yang boleh meletakkan elemen Html dengan mudah Kaedah penggunaan mudah adalah seperti berikut:

$(".daygrid").click(function(event){
  clickedGrid = $(this);
  $(".modal").modal("show");
  $(".modal").position({
    of:clickedGrid,
    offset:" ",
    collision:"fit"
  });
});

Perkara di atas adalah penggunaan yang sangat biasa, daftarkan masa klik, dan kemudian apabila peristiwa klik berlaku, dapatkan elemen yang diklik, dan kemudian paparkan kotak dialog ke antara muka menggunakan kaedah kedudukan.

Fungsi kedudukan menerima objek pilihan dengan banyak parameter

daripada: Menunjukkan objek untuk diletakkan, anda juga boleh melepasi objek acara klik

Saya dan di: Kedua-dua ini tidak mudah difahami, sebenarnya, ia adalah objek rujukan dan objek rujukan Parameter saya menunjukkan kedudukan yang digunakan untuk rujukan dan pada menunjukkan kedudukan sasaran rujukan. Julat nilai ialah mana-mana satu atau dua "kiri tengah kanan atas bawah". Contohnya: my:"top left",at:"left buttom", konfigurasi ini bermaksud sudut kiri atas elemen yang akan ditetapkan diletakkan di sudut kiri bawah elemen sasaran.

perlanggaran: Menunjukkan cara mengendalikan perlanggaran Julat nilai ialah: "tiada muat terbalik". Perihalan bahasa Inggeris rasmi flip tidak begitu jelas Kesan ujian sebenar ialah jika ia melebihi julat yang dijangkakan (seperti tetingkap), ia akan cuba meletakkan elemen pada kedudukan bertentangan dengan kawasan sasaran. Fit ialah penyesuaian, yang bermaksud bahawa elemen akan diletakkan sepenuhnya dalam julat yang dijangkakan tanpa membiarkan elemen melimpah. Dan tiada yang tidak melakukan sebarang pemprosesan perlanggaran.

mengimbang menunjukkan jarak yang perlu diimbangi selepas menjajarkan elemen dengan saya, di, dan daripada Sebagai contoh, menetapkannya kepada "100 100" bermakna bergerak ke kedudukan sasaran dan kemudian mengimbangi 100px ke bawah dan ke kanan

.

Kegunaan biasa ialah kedudukan kotak dialog pop timbul Untuk menjadikan kotak dialog dipaparkan pada kedudukan di mana tetikus mengklik, anda boleh menghantar objek acara yang dilalui dengan klik ke parameter, dan mengikut urutan. untuk memastikan kotak dialog berada dalam skop tetingkap, anda boleh menggunakan Set perlanggaran untuk dimuatkan. Akhir sekali, tetapkan parameter penjajaran saya dan pada mengikut keperluan sebenar, dan gunakan offset untuk memperhalusi offset. Contoh menetapkan kotak dialog pop timbul di tengah tetingkap:

$("#myDialog").position({
  my: "center",
  at: "center",
  of: window,
  collision:"fit"
});

Kandungan di atas adalah penjelasan terperinci tentang fungsi jQuery position() dan keseluruhan huraian aplikasi fungsi kedudukan dalam jQuery yang telah dikongsi oleh editor dengan anda.