cari

Rumah >hujung hadapan web >tutorial js >jQuery plug-in Tooltipster melaksanakan tips_jquery alat yang cantik

jQuery plug-in Tooltipster melaksanakan tips_jquery alat yang cantik

WBOY
WBOYasal
2016-05-16 16:04:471642semak imbas

Tooltipster ialah pemalam petua alat jQuery yang ringan yang boleh membantu anda menjana petua alat yang cantik dengan pantas.

1. Muatkan fail jQuery dan pemalam termasuk Tooltipster

Selepas anda memuat turun Tooltipster, alihkan tooltipster.css dan jquery.tooltipster.min.js ke akar direktori CSS dan JavaScript. Seterusnya, muatkan jQuery dan masukkan fail CSS dan JavaScript Tooltipster di dalam teg anda: 

<head> 
... 
 
  <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> 
 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> 
  <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> 
 
... 
</head>

2. Sediakan HTML anda

Untuk membolehkan Tooltipster berfungsi, kita perlu menambah kelas .tooltip (atau apa-apa kategori/pilihan yang anda mahu gunakan) pada mana-mana elemen yang kami ingin mempunyai petua alat. Seterusnya, kami akan menetapkan atribut tajuk kepada apa sahaja yang kami mahu gesaan kami katakan. Berikut ialah beberapa contoh:
Imej untuk menambah petua alat:

Salin kod Kod adalah seperti berikut:

26aaa0a9796875d332a08cf22713b184Pautan5db79b134e9f6b82c0b36e0489ee08ed
Tambahkan petua alat pada div:

Salin kod Kod adalah seperti berikut:
99962ca91916b15adc33ad8a40efbae6 Div ini mempunyai petua alat apabila anda menuding padanya
16b28748ea4df4d9c2150843fecfba68



3, aktifkan Tooltipster

Perkara terakhir yang perlu kita lakukan ialah mengaktifkan pemalam. Untuk melakukan ini, tambahkan skrip berikut sejurus sebelum teg 9c3bca370b5104690d9ef395f2c5f8d1 penutup anda (gunakan apa sahaja pilihan yang anda mahu - dalam kes ini, kami menggunakan kelas .tooltip):


Ringkasan: 
<head> 
  ... 
  <script> 
    $(document).ready(function() { 
      $('.tooltip').tooltipster(); 
    }); 
  </script> 
</head>
1. Petua alat menyokong kandungan tag HTML


2.Ringan

3. Fleksibel dan cekap

4. Takrif gaya ringkas, 100% CSS

5. Menyokong 3 tema

6. Sokong firefox, Chrome, IE7/8/9, Opera, Safari

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pengenalan kepada jenis pembungkusan asas kemahiran javascript_javascriptArtikel seterusnya：Pengenalan kepada jenis pembungkusan asas kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi