'jQuery' 태그의 글 목록 (13 Page)

jQuery에 해당하는 글 46건

jQuery vGrid - 브라우저 너비에 따른 가변 그리드2016.11.01
Smooth Scroll - 부드러운 스크롤 이동 ( 속도 , 위치 셋팅)2016.11.01
lightBox2 - 레이어 팝업2016.10.31

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

Open API/Jquery2016. 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>

저작자표시

Smooth Scroll - 부드러운 스크롤 이동 ( 속도 , 위치 셋팅)

Open API/Jquery2016. 11. 1. 09:14

지정위치로 스크롤바를 부드럽게 이동 시켜줍니다.

PlugIn Url : http://github.com/kswedberg/jquery-smooth-scroll

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

* 옵션 값

{
  offset: 0,
 
  // one of 'top' or 'left'
  direction: 'top',
 
  // only use if you want to override default behavior
  scrollTarget: null,
 
  // fn(opts) function to be called before scrolling occurs.
  // `this` is the element(s) being scrolled
  beforeScroll: function() {},
 
  // fn(opts) function to be called after scrolling occurs.
  // `this` is the triggering element
  afterScroll: function() {},
  easing: 'swing',
  speed: 400,
 
  // coefficient for "auto" speed
  autoCoefficent: 2
 
}

* 샘플 코드

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<script src="/test/904/jquery.smooth-scroll.js"></script> 
<style>
a {
  color: #8ad459;
  text-decoration: none;
} 
</style>
</head>
<script type="text/javascript">
$(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });  
  }); 
</script>  
<body>
<div style="position: fixed; top:50px;background: #fff"> 
<ul style="list-style: none;">
<li></li> 
<li><a href="#Red" >Red</a></li>
<li><a href="#blue">blue</a></li>
<li><a href="#pink">pink</a></li> 
</ul>
</div>
<div>
<div style="background-color:red;height:400px;" id="Red"> </div>
<div style="background-color:blue;height:400px;" id="blue"/> </div>
<div style="background-color:pink;height:400px;" id="pink"/> </div> 
<div style="height:300px;"></div> 
</div>
</body>
</html>