jQuery perihalan kata kunci pemalam panduan penggunaan cluetip_jquery

Laman web yang kami bangunkan sentiasa mempunyai tujuan tertentu. Sebagai contoh, laman web korporat digunakan untuk mempromosikan syarikat atau memaparkan produk, dan laman web teknikal digunakan untuk berkongsi idea dan pengalaman sendiri. Sekarang laman web itu mempunyai tujuannya, ia mempunyai kata kunci sendiri (kata kunci menerangkan kandungan utama laman web). Contohnya, kebanyakan kata kunci di tapak web perusahaan ialah nama syarikat atau nama produk, dan kebanyakan kata kunci di tapak web teknikal adalah istilah teknikal. Sama ada syarikat yang mempromosikan produk atau berkongsi idea dan pengalaman, kita semua ingin menambah penjelasan atau pautan kepada istilah tertentu (melompat ke halaman istilah), kemudian kita boleh menggunakan pemalam cluetip.

1. fungsi pemalam cluetip

Terutamanya digunakan untuk menambah pembayang dan penerangan untuk kata kunci tertentu, dan juga boleh memaparkan iklan. Pemalam cluetip boleh membaca kandungan dalam fail html lain,

sebagai

7d4405cf87860889bd069f3b2a3626c8Kata kunci5db79b134e9f6b82c0b36e0489ee08ed

Akan membaca kandungan halaman ajax3.html

Terdapat arahan untuk digunakan dalam demo alamat rasmi.

alamat rasmi 2.cluetip

https://github.com/kswedberg/jquery-cluetip

Terdapat arahan terperinci untuk menggunakan pemalam di alamat rasmi

Atribut yang paling biasa digunakan ialah:

splitTajuk: '|' pemisah antara tajuk dan kandungan

melekit: benar Sama ada untuk mendayakan tutup paksa, benar didayakan. Anda mesti mengklik Tutup untuk menutup gesaan semasa

closeTeks: 'Gambar atau teks' Gambar tertutup atau paparan teks, seperti 6b0562bf56d25452777ccbb994453b3b

Kedudukan tutup: 'tajuk' Kedudukan butang tutup

dropShadow: palsu Sama ada menambah bayang, benar bermakna menambahnya, palsu bermaksud tidak menambahnya

positionBy: 'mouse' menggesa sama ada borang bergerak mengikut kedudukan tetikus.

pangkas: 60 potong panjang Jika panjangnya terlalu panjang, hanya 60 aksara pertama akan diambil

3.Cara menggunakan cluetip

1. Fail rujukan

<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="jquery.cluetip.js"></script>

2. Tentukan gaya. Anda boleh menggunakan gaya rasmi atau menyesuaikannya. Anda perlu mengubah suai fail jquery.cluetip.css apabila menyesuaikan. Seperti yang ditunjukkan dalam contoh ini

body{
  font-size:12px;
  font-family:微软雅黑;
}
p{
  width:500px;
}
.split-body a{
  color:blue;
}

3. Kod js digunakan

$(function(){
  $('a.javascript').cluetip({splitTitle: '|',width: '200px', showTitle: false});
  $('a.html').cluetip({
      splitTitle: '|',
      sticky: true,
      closeText: '<img src="cross.png" alt="" />',
      closePosition: 'title',
      dropShadow: false,
      positionBy: 'mouse'
      //truncate: 60
  });
  
});

4. HTML digunakan

<a href='#' title='提示标题|提示内容' class='样式'>关键词</a>

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