jQuery plug-in Tooltipster melaksanakan tips_jquery alat yang cantik-tutorial js-php.cn

jQuery plug-in Tooltipster melaksanakan tips_jquery alat yang cantik

WBOY

Lepaskan： 2016-05-16 16:04:47

asal

1685 orang telah melayarinya

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>

Salin selepas log masuk

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:

Tambahkan pautan pada petua alat yang sudah mempunyai kelas:

Salin kod Kod adalah seperti berikut:

" class="petua alat ketchup" title="Ini ialah mesej petua alat pautan saya!">Pautan

Tambahkan petua alat pada div:

Salin kod Kod adalah seperti berikut:

Perkara terakhir yang perlu kita lakukan ialah mengaktifkan pemalam. Untuk melakukan ini, tambahkan skrip berikut sejurus sebelum teg 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>

Salin selepas log masuk

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.