jCallout은 버블 프롬프트를 쉽게 구현합니다.

jCallout 다운로드 주소: https://github.com/anupamsmaurya/jCallout

이 참조를 추가해야 합니다

사용자 이름 줄의 HTML 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< td class= "columnName">사용자 이름:
 

그런 다음 js에 다음 코드를 추가하세요.

코드 복사 코드는 다음과 같습니다.

$('#hTbxUserName').jCallout (
'initWithoutShow',{
메시지: "필수!",
위치: "오른쪽",
backgroundColor: "#f00",
textColor: "#fff",
showEffect: "fade",
showSpeed: 300,
hideEffect: "fade",
hideSpeed: 300,
$closeElement: $('')
});

jCallout에는 init와 initWithoutShow라는 두 가지 초기화 방법이 있습니다. 전자는 초기화 직후 거품을 표시하지만 후자는 필요할 때 표시할 코드를 즉시 추가하지 않습니다.

코드 복사 코드는 다음과 같습니다.

var $userNameInput = $("#hTbxUserName ");
$userNameInput.blur(function() {
if($userNameInput.val().length==0){
$userNameInput.jCallout('show');
}
});

$closeElement 매개변수는 버블의 닫기 버튼을 설정하는 것입니다. 플러그인 소스 코드를 보면

코드 복사 코드는 다음과 같습니다.

$closeElement: $('(X)'),

$closeElement: $('')가 설정되지 않은 경우 다음 표시가 나타납니다. 표시되고 (x)를 클릭하여 풍선을 닫습니다.

게다가 풍선에는 사진도 표시할 수 있습니다. 메시지 매개변수에 사진의 HTML 코드를 작성하면 됩니다.

코드 복사 코드는 다음과 같습니다.

메시지: "필수! "