jQuery Tiptip - 툴팁 ( tooltip )

Open API/Jquery|2016. 11. 1. 10:07
반응형



툴팁에 대한  플러그인 입니다.


툴팁이란 ?   

말풍선 또는 툴팁(tooltip)은 공통 그래픽 사용자 인터페이스 요소이다. 마우스 포인터라 불리는 커서와 함께 동작한다. 사용자가 커서에 항목을 클릭하지 않고 가리키면 조그마한 상자가 항목 위에 나타나서 보충 설명을 보여 준다.




API Url : http://code.drewwilson.com/entry/tiptip-jquery-plugin



샘플코드 다운로드 : 454.7z


옵션 값.

activation: string ("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover", "focus" or "click".
keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
maxWidth: string ("200px" by default) - CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or 'auto'.
edgeOffset: number (3 by default) - Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
defaultPosition: string ("bottom" by default) - Default orientation TipTip should show up as. You can set it to: "top", "bottom", "left" or "right".
delay: number (400 by default) - Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.
fadeIn: number (200 by default) - Speed at which the TipTip popup will fade into view.
fadeOut: number (200 by default) - Speed at which the TipTip popup will fade out of view.
attribute: string ("title" by default) - HTML attribute that TipTip should pull it's content from.
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
enter: callback function - Custom function that is run each time you mouseoveran element with TipTip applied to it.
exit: callback function - Custom function that is run each time you mouseout of an element with TipTip applied to it.






<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mangled date examples</title> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/test/454/jquery.tipTip.js"></script>  
<link rel="stylesheet" type="text/css" href="/test/454/tiptip.css"/>
<script type="text/javascript">
	$(function(){
		$(".someClass").tipTip();
	});
</script> 
<style type="text/css">
	.sample {padding-bottom:20px;}
</style>
</head>
<body>
<div class="sample">
	<a href="#" class="someClass" title="요거이 Text">텍스트</a>에다가 타이틀로 넣으면 되구요.
</div> 
<div class="sample">
	<img src="/files/attach/images/106/893/b0183fae643bfa50ebef8ce046e5abe8.jpg" class="someClass" title="요거이 이미지" style="width:200px;height:150px;"/>
 </div>
<div class="sample">
	<input class="someClass" title="요거이 인풋" style="width:200px;"/>
 </div>
</body>
</html>


저작자표시

댓글()

jQuery animate - 각종 애니메이션 효과

Open API/Jquery|2016. 11. 1. 10:00
반응형



애니메이션 효과


 .animate( properties [, duration] [, easing] [, complete] )


API Url : http://api.jquery.com/animate/


샘플코드 다운로드 :  967.zip


 


effect 효과에 대한것이기 때문에 캡쳐보다 샘플!


통통 튀기고 지지고 볶고..


저작자표시

댓글()

jQuery vGrid - 브라우저 너비에 따른 가변 그리드

Open API/Jquery|2016. 11. 1. 09:53
반응형



브라우저 사이즈에 따른 가변 그리드

 

PlugIn Url : http://blog.xlune.com/2009/09/jqueryvgrid.html


 

936.zip




<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" /> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<script src="/936/jquery.vgrid.js"></script>  
</head> 
<script type="text/javascript">
//<![CDATA[
$(function() { 
    $("#sample").on("change", function(){ 
		$("#isample").attr("src","/936/936-"+this.value+".html");
    }); 
}); 
//]]>
</script>

<body>   
<select id="sample">
	<option value="0"> == sample ==</option>
	<option value="1">Simple Example</option>
	<option value="2">Basic Option Example</option>
	<option value="3">Any Height Grid Example</option>
	<option value="4">FadeIn Option Example</option>
	<option value="5">Sort Example</option>
	<option value="6">Dynamic Grid, Start/Finish Event Example</option>
	<option value="7">Dynamic Image Grid, Start/Finish Event Example</option>
	<option value="8">Multi Box Grid Example</option>
	<option value="9">Grid Element Show/Hide Example</option>
	<option value="10">Drag And Drop Sort Example</option>
</select>
<iframe id="isample" src="" width="100%;" height="1200"></iframe>
</body>
</html>


저작자표시

댓글()
이전 1 ··· 20 21 22 23 24 25 26 ··· 28 다음

티스토리툴바