Latest web development tutorials

jQuery UI contoh - Lokasi (Posisi)

Relatif jendela, dokumen, jangkar, kursor / mouse dan unsur-unsur lain dari elemen positioning.

Untuk informasi lebih lanjut tentang .position() rincian metode, lihat dokumentasi API .position () .

Fungsi standar

Gunakan bentuk kontrol posisi tata letak, atau elemen tarik diposisikan untuk memodifikasi offset. Seret untuk elemen induk sekitarnya untuk melihat tabrakan. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Lokasi (Posisi) - The fungsi default </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  #parent {
    width: 60%;
    height: 40px;
    margin: 10px auto;
    padding: 5px;
    border: 1px solid # 777;
    background-color: # fbca93;
    text-align: center;
  }
  .positionable {
    position: absolute;
    display: block;
    kanan: 0;
    bottom: 0;
    background-color: # bcd5e6;
    text-align: center;
  }
  # Positionable1 {
    width: 75px;
    height: 75px;
  }
  # Positionable2 {
    width: 120px;
    height: 40px;
  }
  pilih, masukan {
    margin-left: 15px;
  }
  </ Style>
  <Script>
  $ (Fungsi () {
    Posisi function () {
      $ ( ".positionable") .position ({
        dari: $ ( "#parent"),
        saya: $ ( "#my_horizontal") val () + "" + $ ( "#my_vertical") val (),
        di: $ ( "#at_horizontal") val () + "" + $ ( "#at_vertical") val (),
        tabrakan: $ ( "#collision_horizontal") val () + "" + $ ( "#collision_vertical") val ()
      });
    }
 
    $ ( ".positionable") Css ( "Opacity", 0,5);
 
    $ ( "Select, masukan") .bind ( "klik keyup perubahan", posisi);
 
    $ ( "#parent") .draggable ({
      tarik: Posisi
    });
 
    Posisi ();
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "orang tua">
  <P>
  Ini adalah lokasi elemen induk.
  </ P>
</ Div>
 
<Div class = "positionable" id = "positionable1">
  <P>
  untuk posisi
  </ P>
</ Div>
 
<Div class = "positionable" id = "positionable2">
  <P>
  ke posisi 2
  </ P>
</ Div>
 
<Div style = "padding: 20px; margin-top: 75px;">
  Lokasi ...
  <Div style = "padding-bottom: 20px;">
    <B> saya: </ b>
    <Pilih id = "my_horizontal">
      <Value Option = "left"> meninggalkan </ option>
      <Value Option = "center"> pusat </ option>
      <Value Option = "right"> kanan </ option>
    </ Pilih>
    <Pilih id = "my_vertical">
      <Value Option = "top"> atas </ option>
      <Value Option = "center"> pusat </ option>
      <Value Option = "bottom"> bawah </ option>
    </ Pilih>
  </ Div>
  <Div style = "padding-bottom: 20px;">
    <B> di: </ b>
    <Pilih id = "at_horizontal">
      <Value Option = "left"> meninggalkan </ option>
      <Value Option = "center"> pusat </ option>
      <Value Option = "right"> kanan </ option>
    </ Pilih>
    <Pilih id = "at_vertical">
      <Value Option = "top"> atas </ option>
      <Value Option = "center"> pusat </ option>
      <Value Option = "bottom"> bawah </ option>
    </ Pilih>
  </ Div>
  <Div style = "padding-bottom: 20px;">
    <B> tabrakan: </ b>
    <Pilih id = "collision_horizontal">
      <Value Option = "flip"> sandal </ option>
      <Value Option = "cocok"> fit </ option>
      <Value Option = "flipfit"> flipfit </ option>
      <Value Option = "none"> tidak </ option>
    </ Pilih>
    <Pilih id = "collision_vertical">
      <Value Option = "flip"> sandal </ option>
      <Value Option = "cocok"> fit </ option>
      <Value Option = "flipfit"> flipfit </ option>
      <Value Option = "none"> tidak </ option>
    </ Pilih>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

siklus gambar

Browser foto prototipe, masing-masing, dengan menggunakan posisi sebagai gambar di sebelah kiri, tengah, kanan dan kemudian siklus. Gunakan link di bagian atas untuk siklus melalui gambar, atau gambar di klik kiri atau kanan untuk siklus melalui gambar. Perhatikan bahwa ketika jendela adalah ukurannya, re-posisi gambar. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Lokasi (Posisi) - sirkulasi Gambar </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  body {
    margin: 0;
  }
  #container {
    overflow: hidden;
    position: relative;
    height: 400px;
  }
 
  img {
    position: absolute;
  }
  </ Style>
  <Script>
  $ (Fungsi () {
    // Rekonstruksi berarti penghapusan plug-in metode ini $ .fn.left = function (menggunakan) {
      kembali this.position ({
        saya: "benar tengah",
        di: "kiri + 25 tengah",
        dari: "#container",
        tabrakan: "tidak ada",
        menggunakan: menggunakan
      });
    };
    $ .fn.right = Fungsi (menggunakan) {
      kembali this.position ({
        saya: "kiri tengah",
        di: "benar-25 tengah",
        dari: "#container",
        tabrakan: "tidak ada",
        menggunakan: menggunakan
      });
    };
    $ .fn.center = Fungsi (menggunakan) {
      kembali this.position ({
        saya: "center tengah",
        di: "center tengah",
        dari: "#container",
        menggunakan: menggunakan
      });
    };
 
    $ ( "Img: eq (0)") .left ();
    $ ( "Img: eq (1)") .center ();
    $ ( "Img: eq (2)") .right ();
 
    fungsi bernyawa (ke) {
      $ (Ini) .Stop (true, false) .animate (ke);
    }
    berfungsi berikutnya (event) {
      event.preventDefault ();
      $ ( "Img: eq (2)") .center (bernyawa);
      $ ( "Img: eq (1)") .left (bernyawa);
      . $ ( "Img: eq (0)") .right () appendTo ( "#container");
    }
    berfungsi sebelumnya (event) {
      event.preventDefault ();
      $ ( "Img: eq (0)") .center (bernyawa);
      $ ( "Img: eq (1)") .right (bernyawa);
      . $ ( "Img: eq (2)") .left () prependTo ( "#container");
    }
    $ ( "#previous") .Klik (Sebelumnya);
    $ ( "#berikutnya") .Klik (Berikutnya);
 
    $ ( "Img") .Klik (function (event) {
      $ ( "Img") .index (ini) === 0 sebelumnya (event): berikutnya (event) ;?
    });
 
    $ (Window) .resize (function () {
      $ ( "Img: eq (0)") .left (bernyawa);
      $ ( "Img: eq (1)") .center (bernyawa);
      $ ( "Img: eq (2)") .right (bernyawa);
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "container">
  <Img src = "../ wp-content / uploads / 2014/03 / earth.jpg" width = "458" height = "308" alt = "bumi">
  <Img src = "../ wp-content / uploads / 2014/03 / flight.jpg" width = "512" height = "307" alt = "pesawat">
  <Img src = "../ wp-content / uploads / 2014/03 / rocket.jpg" width = "300" height = "353" alt = "roket">
 
  Pada <a id="previous" href="#"> </a>
  Dengan <a id="next" href="#"> </a>
</ Div>
 
 
</ Body>
</ Html>