Latest web development tutorials

jQuery UI misalnya - kotak tooltip (Tooltip)

Disesuaikan, kotak tooltip berganti tema, mengganti kotak tooltip asli.

Untuk rincian lebih lanjut tentang anggota tooltip, lihat dokumentasi API anggota kotak tooltip (Tooltip Widget) .

Fungsi standar

Arahkan pada link, atau gunakan tombol tab untuk siklus melalui fokus pada setiap elemen.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI keterangan alat box (Tooltip) - 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">
  <Script>
  $ (Fungsi () {
    $ (Dokumen) .tooltip ();
  });
  </ Script>
  <Gaya>
  label {
    display: inline-block;
    width: 5em;
  }
  </ Style>
</ Kepala>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltips </a> dapat terikat untuk setiap elemen. Ketika Anda membawa lebih elemen, properti judul akan ditampilkan dalam sebuah kotak kecil di samping elemen, sebagai pribumi sebagai tool box tip. </ P>
<P> Namun, karena tidak kotak tooltip asli sehingga dapat didefinisikan gaya. Didukung oleh <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> dibuat juga dapat didefinisikan gaya kotak sesuai tooltip. </ P>
<P> kotak keterangan alat juga dapat digunakan untuk membentuk elemen untuk menampilkan di setiap daerah beberapa informasi tambahan. </ P>
<P> <label for = "usia"> usia Anda: </ label> <input id = "usia" title = ". Umur hanya digunakan untuk statistik"> </ p>
<P> hover atas wilayah yang sesuai untuk melihat kotak alat tip. </ P>
 
 
</ Body>
</ Html>

Gaya kustom

Arahkan pada link, atau gunakan tombol tab untuk siklus melalui fokus pada setiap elemen.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI keterangan alat box (Tooltip) - Kustom Style </ 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">
  <Script>
  $ (Fungsi () {
    $ (Dokumen) .tooltip ({
      Posisi: {
        saya: "tengah bawah-20",
        di: "tengah atas",
        menggunakan: function (posisi, umpan balik) {
          $ (Ini) Css (posisi);
          $ ( "<Div>")
            .addClass ( "panah")
            .addClass (feedback.vertical)
            .addClass (feedback.horizontal)
            .appendTo (ini);
        }
      }
    });
  });
  </ Script>
  <Gaya>
  Ui-tooltip, .arrow: setelah {
    background: black;
    border: 2px putih solid;
  }
  Ui-tooltip {
    padding: 10px 20px;
    warna: putih;
    border-radius: 20px;
    Font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: huruf besar;
    box-shadow: 0 0 7px hitam;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    kiri: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    kiri: 20%;
  }
  .arrow: setelah {
    konten: "";
    position: absolute;
    kiri: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px hitam;
    -webkit-transform: rotate (45deg);
    -moz-transform: rotate (45deg);
    -MS-transform: rotate (45deg);
    -o-transform: rotate (45deg);
    transform: rotate (45deg);
  }
  .arrow.top: setelah {
    bottom: -20px;
    top: auto;
  }
  </ Style>
</ Kepala>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltips </a> dapat terikat untuk setiap elemen. Ketika Anda membawa lebih elemen, properti judul akan ditampilkan dalam sebuah kotak kecil di samping elemen, sebagai pribumi sebagai tool box tip. </ P>
<P> Namun, karena tidak kotak tooltip asli sehingga dapat didefinisikan gaya. Didukung oleh <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> dibuat juga dapat didefinisikan gaya kotak sesuai tooltip. </ P>
<P> kotak keterangan alat juga dapat digunakan untuk membentuk elemen untuk menampilkan di setiap daerah beberapa informasi tambahan. </ P>
<P> <label for = "usia"> usia Anda: </ label> <input id = "usia" title = ". Umur hanya digunakan untuk statistik"> </ p>
<P> hover atas wilayah yang sesuai untuk melihat kotak alat tip. </ P>
 
 
</ Body>
</ Html>

Custom Animation

Contoh ini menunjukkan bagaimana menggunakan acara dan menyembunyikan opsi untuk menyesuaikan animasi, Anda juga dapat menggunakan acara terbuka untuk menyesuaikan animasi.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI keterangan alat box (Tooltip) - Custom Animation </ 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">
  <Script>
  $ (Fungsi () {
    $ ( "# Show-opsi") .tooltip ({
      Acara: {
        Efek: "slideDown",
        delay: 250
      }
    });
    $ ( "# Hide-opsi") .tooltip ({
      menyembunyikan: {
        Efek: "meledak",
        delay: 250
      }
    });
    $ ( "# Open-event") .tooltip ({
      Acara: null,
      Posisi: {
        saya: "kiri atas",
        di: "kiri bawah"
      },
      terbuka: function (event, ui) {
        ui.tooltip.animate ({top: ui.tooltip.position () atas + 10.}, "cepat");
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<P> Ada sejumlah cara untuk menyesuaikan tooltip kotak animasi. </ P>
<P> Anda dapat menggunakan <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> acara </a> dan <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> menyembunyikan opsi </a>. </ P>
<P> Anda juga dapat menggunakan <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> terbuka </a> acara. </ P>
 
 
</ Body>
</ Html>

Konten kustom

Menunjukkan bagaimana menyesuaikan item dan pilihan konten untuk menggabungkan kotak tooltip acara delegasi yang berbeda untuk satu contoh.

Anda mungkin perlu untuk memetakan interaksi kotak tooltip, yang merupakan versi masa depan dari fungsi untuk direalisasikan.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI keterangan alat box (Tooltip) - Content Kustom </ 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>
  .photo {
    width: 300px;
    text-align: center;
  }
  .photo Ui-widget-header {
    margin: 1em 0;
  }
  .map {
    width: 350px;
    height: 350px;
  }
  Ui-tooltip {
    max-width: 350px;
  }
  </ Style>
  <Script>
  $ (Fungsi () {
    $ (Dokumen) .tooltip ({
      item: "img, [Data-geo], [title]",
      konten: function () {
        var elemen = $ (ini);
        jika (element.is ( "[Data-geo]")) {
          var text = element.text ();
          kembali "<img class = 'peta' alt = '" + teks +
            " 'Src =' http: //maps.google.com/maps/api/staticmap?" +
            "Zoom = 11 & size = 350x350 & tipemap = medan & sensor = false & pusat =" +
            teks + " '>";
        }
        jika (element.is ( "[title]")) {
          kembali element.attr ( "title");
        }
        jika (element.is ( "img")) {
          kembali element.attr ( "alt");
        }
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Class Div = "ui-widget foto">
  <Class Div = "ui-widget-header ui-sudut-semua">
    <H2> Katedral St Stephen (Katedral St. Stephen) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo=""> Wina, Austria (Wina, Austria) </a> < / h3>
  </ Div>
  <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
    <Img src = "../ wp-content / uploads / 2014/03 / st-stephens.jpg" alt = "Katedral St Stephen (St Stephen & apos; s Cathedral)" class = "ui-sudut-semua">
  </a>
</ Div>
 
<Class Div = "ui-widget foto">
  <Class Div = "ui-widget-header ui-sudut-semua">
    <H2> Tower Bridge (Tower Bridge) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo=""> London (London, Inggris) </a> < / h3>
  </ Div>
  <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
    <Img src = "../ wp-content / uploads / 2014/03 / menara-bridge.jpg" alt = "Tower Bridge (Tower Bridge)" class = "ui-sudut-semua">
  </a>
</ Div>
 
<P> Semua gambar dari <a href="http://commons.wikimedia.org/wiki/Main_Page"> Wikimedia Commons </a>, dan dimiliki oleh <a href = "http://creativecommons.org/ lisensi / by-sa / 3.0 / deed.en "title =" Creative Commons Atribusi-Berbagi Serupa 3.0 "> CC bY-SA 3.0 </a> bawah pemegang hak cipta. </ P>
 
 
</ Body>
</ Html>

bentuk

Gunakan tombol di bawah untuk menampilkan teks bantuan, atau hanya membiarkan melayang mouse di atas kotak input atau memiliki kotak input telah fokus, Anda dapat menampilkan teks bantuan kotak input yang sesuai.

Menentukan lebar tetap di CSS, sehingga secara bersamaan menampilkan semua teks bantuan terlihat lebih konsisten.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI keterangan alat box (Tooltip) - Bentuk </ 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>
  label {
    display: inline-block; width: 5em;
  }
  fieldset div {
    margin-bottom: 2em;
  }
  .help fieldset {
    display: inline-block;
  }
  Ui-tooltip {
    width: 210px;
  }
  </ Style>
  <Script>
  $ (Fungsi () {
    var tooltips = $ ( "[title]") .tooltip ();
    $ ( "<Tombol>")
      .text ( "Tampilkan bantuan")
      .button ()
      .Klik (function () {
        tooltips.tooltip ( "open");
      })
      .insertAfter ( "bentuk");
  });
  </ Script>
</ Kepala>
<Body>
 
<Form>
  <Fieldset>
    <Div>
      <Label untuk = "firstname"> nama </ label>
      <Input id = "firstname" name = "firstname" title = "Sebutkan nama depan Anda.">
    </ Div>
    <Div>
      <Label untuk = "nama belakang"> Nama terakhir </ label>
      <Input id = "nama belakang" name = "nama belakang" title = "Berikan nama belakang Anda.">
    </ Div>
    <Div>
      <Label untuk = "alamat"> alamat </ label>
      <Input id = "alamat" name = "alamat" title = "alamat rumah atau kantor Anda.">
    </ Div>
  </ Fieldset>
</ Form>
 
 
</ Body>
</ Html>

Tikus pelacakan

Dalam kotak tooltip contoh diposisikan relatif terhadap mouse, ketika mouse bergerak di atas elemen, itu akan mengikuti gerakan mouse.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI keterangan alat box (Tooltip) - Pelacakan mouse </ 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>
  label {
    display: inline-block;
    width: 5em;
  }
  </ Style>
  <Script>
  $ (Fungsi () {
    $ (Dokumen) .tooltip ({
      track: true
    });
  });
  </ Script>
</ Kepala>
<Body>

<P> <a href="#" title="部件的名称"> Tooltips </a> dapat terikat untuk setiap elemen. Ketika Anda membawa lebih elemen, properti judul akan ditampilkan dalam sebuah kotak kecil di samping elemen, sebagai pribumi sebagai tool box tip. </ P>
<P> Namun, karena tidak kotak tooltip asli sehingga dapat didefinisikan gaya. Didukung oleh <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> dibuat juga dapat didefinisikan gaya kotak sesuai tooltip. </ P>
<P> kotak keterangan alat juga dapat digunakan untuk membentuk elemen untuk menampilkan di setiap daerah beberapa informasi tambahan. </ P>
<P> <label for = "usia"> usia Anda: </ label> <input id = "usia" title = ". Umur hanya digunakan untuk statistik"> </ p>
<P> hover atas wilayah yang sesuai untuk melihat kotak alat tip. </ P>
 
 
</ Body>
</ Html>

Video Player

Sebuah pemutar video virtual dengan seperti share button / / Statistik, masing-masing tombol dengan kotak gaya kustom tooltip.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI keterangan alat box (Tooltip) - Video Player </ 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>
  .player {
    width: 500px;
    height: 300px;
    border: 2px groove abu-abu;
    background: rgb (200, 200, 200);
    text-align: center;
    line-height: 300px;
  }
  Ui-tooltip {
    border: 1px solid white;
    background: RGBA (20, 20, 20, 1);
    warna: putih;
  }
  .set {
    display: inline-block;
  }
  .notification {
    position: absolute;
    display: inline-block;
    font-size: 2em;
    padding: .5em;
    box-shadow: 2px 2px 5px -2px RGBA (0,0,0,0.5);
  }
  </ Style>
  <Script>
  $ (Fungsi () {
    Fungsi memberitahukan (input) {
      var msg = "Dipilih" + $ .trim (input.data ( "tooltip-title") || input.text ());
      $ ( "<Div>")
        .appendTo (document.body)
        .text (msg)
        .addClass ( "pemberitahuan ui-negara-default ui-sudut-bottom")
        .position ({
          "Tengah atas",: saya
          di: "tengah atas",
          dari: window
        })
        .show ({
          Efek: "buta"
        })
        .delay (1000)
        .hide ({
          Efek: "buta",
          Durasi: "slow"
        }, Fungsi () {
          $ (Ini) .remove ();
        });
    }
 
    $ ( "Button") .each (function () {
      Tombol var = $ (ini) .button ({
        ikon: {
          primer: $ (ini) DATA ( "icon")
        },
        Teks: !! $ (ini) attr ( "title")
      });
      button.click (function () {
        memberitahukan (tombol);
      });
    });
    $ ( ".set") .buttonset ({
      item: "tombol"
    });
 
    $ (Dokumen) .tooltip ({
      Posisi: {
        "Tengah atas",: saya
        di: "tengah bawah + 5",
      },
      Acara: {
        Durasi: "cepat"
      },
      menyembunyikan: {
        Efek: "menyembunyikan"
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div class = "pemain"> Berikut adalah video (HTML5?) </ Div>
<Div class = "alat">
  <Span class = "set">
    <Tombol Data-icon = "ui-icon-lingkaran-panah-n" title = "Saya suka video ini"> seperti </ button>
    <Tombol Data-icon = "ui-icon-lingkaran-panah-s"> Saya tidak suka video ini </ button>
  </ Span>
  <Div class = "set">
    <Tombol Data-icon = "ui-icon-lingkaran-plus" title = "Add to Playlist"> Tambahkan ke </ button>
    <Button kelas = "menu" Data-icon = "ui-icon-segitiga-1-s"> Tambahkan ke Favorit </ button>
  </ Div>
  <Title Tombol = "Bagi video ini"> Share </ button>
  <Tombol Data-icon = "ui-icon-alert"> ditandai sebagai tidak pantas </ button>
</ Div>
 
 
</ Body>
</ Html>