jQuery 키워드 설명 플러그인 힌트 사용법 가이드_jquery

우리가 개발하는 웹사이트에는 항상 특정한 목적이 있습니다. 예를 들어, 기업 홈페이지는 회사를 홍보하거나 제품을 전시하는 데 사용되고, 기술 홈페이지는 자신의 아이디어와 경험을 공유하는 데 사용됩니다. 이제 웹사이트에는 목적이 있으므로 고유한 키워드가 있습니다(키워드는 웹사이트의 주요 콘텐츠를 설명합니다). 예를 들어 기업 홈페이지의 키워드는 대부분 회사명이나 제품명이며, 기술 홈페이지의 키워드는 대부분 기술용어이다. 제품을 홍보하는 회사이든, 아이디어와 경험을 공유하는 회사이든, 우리 모두는 특정 용어에 대한 설명이나 링크를 추가하고(용어 페이지로 이동) 힌트 팁 플러그인을 사용할 수 있습니다.

1. 힌트 플러그인 기능

주로 특정 키워드에 대한 힌트와 설명을 추가하는 데 사용되며 광고를 표시할 수도 있습니다. 힌트 플러그인은 다른 HTML 파일

의 내용을 읽을 수 있습니다.

7d4405cf87860889bd069f3b2a3626c8키워드5db79b134e9f6b82c0b36e0489ee08ed

ajax3.html 페이지의 내용을 읽어보겠습니다

공식 주소 데모에 사용설명서가 있습니다.

2.cluetip 공식주소

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

공식 주소에 플러그인 사용에 대한 자세한 설명이 있습니다

가장 일반적으로 사용되는 속성은 다음과 같습니다.

splitTitle: 제목과 내용 사이의 '|' 구분 기호

sticky: true 강제 종료 활성화 여부, true가 활성화됩니다. 현재 프롬프트를 닫으려면 닫기를 클릭해야 합니다

closeText: '그림 또는 텍스트' 닫힌 그림 또는 텍스트 표시(예: 6b0562bf56d25452777ccbb994453b3b

)

closePosition: 'title' 닫기 버튼 위치

dropShadow: false 그림자 추가 여부, true는 추가, false는 추가하지 않음

positionBy: 'mouse'는 마우스 위치에 따라 폼이 움직이는지 묻는 메시지를 표시합니다.

truncate: 60 길이를 자릅니다. 길이가 너무 길면 처음 60자만 가져옵니다.

3.단서팁 활용방법

1. 참고자료

<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. 스타일을 정의합니다. 공식 스타일을 사용하거나 사용자 정의할 수 있습니다. 커스터마이징 시 jquery.cluetip.css 파일을 수정해야 합니다. 이 예에서 볼 수 있듯이

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

3. 사용된 js 코드

$(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 사용

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

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.