'Javascript' 카테고리의 글 목록 (2 Page)

Javascript

[jQuery] google store 스크린샷 이미지 갤러리 (screenshot image gallery) 2013.03.19
[jQuery] tstore 스크린샷 슬라이드 이미지 갤러리(slide image gallery) 구현 2013.03.19
[jQuery] 갤러리 이미지 Sliding Box 구현하기 2013.03.10
[jQuery] 제이쿼리 SelectBox 테스트 2012.11.18
[jQuery] jQuery를 사용하여 Div 화면 중앙에 띄우기 2012.03.30
[Javascript] 날짜 포맷 (Date Format) 2011.12.22
[Javascript] 자바스크립트 날짜간 계산 2011.12.22

PREV 1 2 NEXT

[jQuery] google store 스크린샷 이미지 갤러리 (screenshot image gallery)

2013. 3. 19. 16:15

google_screenshot.zip

index.html

출처 : https://play.google.com/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>

jQuery(function($) {
$('.screenshot-carousel').screenshot();
});
</script>

</head>
<body>

</body>
</html>

[jQuery] tstore 스크린샷 슬라이드 이미지 갤러리(slide image gallery) 구현

2013. 3. 19. 11:44

tstore_screenshot1.zip

tstore_screenshot2.zip

tstore_screenshot1 : tstore에 있는 방식대로 처리, 속도가 느리고 이미지 하나씩 슬라이딩 됨
tstore_screenshot2 : tstore에 있는 방식을 개선하여 처리, 속도 및 이미지 맞춤 개선

출처 : http://www.tstore.co.kr

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>

jQuery(function($) {
$('.scnshot_wrap').thumbnailSlide();
});
</script>

</head>
<body>

</body>
</html>

[jQuery] 갤러리 이미지 Sliding Box 구현하기

2013. 3. 10. 20:53

참고 : http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/
데모 : http://s3.amazonaws.com/buildinternet/live-tutorials/sliding-boxes/index.htm

Source : slidingBoxes.zip

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>

</head>
<body>

<section class="img_box">
<article class="captionfull">
  <img src="images/florian.jpg" />
  <div class="cover boxcaption">
   <h3>타이틀1</h3>
   <p>
    내용입니다.<br />
    <a href="">내용입니다.</a>
   </p>
  </div>
</article>

<article class="caption">
  <img src="images/jareck.jpg" />
  <div class="cover boxcaption">
   <h3>타이틀2</h3>
   <p>
    내용입니다.<br />
    <a href="">내용입니다.</a>
   </p>
  </div>
</article>

<article class="slideright">
  <img src="images/kamil.jpg" class="cover" />
  <div>
   <h3>타이틀3</h3>
   <p>
    내용입니다.<br />
    <a href="">내용입니다.</a>
   </p>
  </div>
</article>

<article class="thecombo">
  <img src="images/martin.jpg" class="cover" />
  <div>
   <h3>타이틀4</h3>
   <p>
    내용입니다.<br />
    <a href="">내용입니다.</a>
   </p>
  </div>
</article>

<article class="slideup">
  <img src="images/nonsense.jpg" class="cover" />
  <div>
   <h3>타이틀5</h3>
   <p>
    내용입니다.<br />
    <a href="">내용입니다.</a>
   </p>
  </div>
</article>

<article class="peek">
  <img src="images/birss.jpg" style="height:90px;" />
  <img src="images/buildinternet.jpg" class="cover" />
</article>

</section>

</body>
</html>

[jQuery] 제이쿼리 SelectBox 테스트

2012. 11. 18. 20:53

참고 : http://stackoverflow.com/questions/1275383/jquery-remove-select-options-based-on-another-select-selected-need-support-for

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

jQuery(function($) {
    $('#sel1').on('change', function() {
        var val = this.value;

        if(val) {
            $.ajax({
                url:val + '.xml',
                type:'POST',
                dataType:'xml',
                success:function(xml) {
                    var sel2 = $('#sel2');
                    $('option', sel2).each(function(i) {
                        if(i > 0) {
                            $(this).remove();
                        }
                    });
                    $(xml).find('list data').each(function() {
                        sel2.append(
                            $('<option>').text($(this).text()).val($(this).text())
                        );
                    });
                },
                error:function() {
                    alert('error');
                }
            });
        } else {
            // selectbox 모두 비우기 $(select).empty();
            var sel2 = $('#sel2');
            $('option', sel2).each(function(i) {
                if(i > 0) {
                    $(this).remove();
                }
            });
        }
    });
});

</script>
</head>
<body>

</body>
</html>

<?xml version="1.0" encoding="UTF-8" ?>
<list>
<data>korea1</data>
<data>korea2</data>
</list>

<?xml version="1.0" encoding="UTF-8" ?>
<list>
    <data>usa1</data>
    <data>usa2</data>
    <data>usa3</data>
</list>

[jQuery] jQuery를 사용하여 Div 화면 중앙에 띄우기

2012. 3. 30. 05:24

출처 : http://mytory.co.kr/archives/812
http://mytory.co.kr/archives/783
http://stackoverflow.com/questions/3220995/jquery-document-onclick-doesnt-work-when-clicking-an-embed-flash-on-ie-bu

var $layerPopupObj = $('.layerPopupBox'); var left = ( $(window).scrollLeft() + ($(window).width() - $layerPopupObj.width()) / 2 ); var top = ( $(window).scrollTop() + ($(window).height() - $layerPopupObj.height()) / 2 ); $layerPopupObj.css({'left':left,'top':top, 'position':'absolute'}); $('body').css('position','relative').append($layerPopupObj);

jQuery의 .scrollLeft() 함수는 좌우로 스크롤된 화면이 왼쪽부터 몇 px인지 구하는 함수다. 보통은 0일 거다.

jQuery의 .scrollTop() 함수는 스크롤된 화면이 맨 위에서부터 몇 px인지 구하는 함수다.

jQuery의 .width() 함수는 너비를 구하는 함수인데, $(window).width() 를 하면 현재 화면의 너비를 구한다. 윈도우를 전체화면으로 하지 말고 사이즈를 줄여 놓고 값을 구해 보면 전체 가로 사이즈보다 작게 나오는 것을 알 수 있다.

jQuery의 .height() 함수 역시 마찬가지인데, $(window).height() 라고 하면 윈도우에서 메뉴바 같은 것들을 빼고 실제 사용되는 부분의 높이만 구해 준다. 나는 높이 800px 화면의 노트북을 사용한데, 실제 사용되는 영역은 675px이었다.

레이어를 Modal 처럼 띄우기 위한 배경 검은 막 씌우기

jQuery modal window를 만드는 튜토리얼에서 그 방법을 발견했다. 우리가 해왔던 방식하고 크게 다르지 않았다. 이것만 가지고 플러그인을 만들어 볼까 하는 생각도 들었다.

자, 반투명 검은 막을 만드는 방법은 간단하다.(예제부터 보길 바라면 아래 파일을 사용하면 된다.)

cfile25.uf.13211E484D4BC96836139F.html

일단, HTML의 어딘가에 아래 코드를 끼워 넣는다. 어디든 별 상관 없지만 찾기 편한 곳에 둬야 할 거다.

<div id="mask"></div>

다음은 CSS인데 아래처럼 해 준다.

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}

마지막으로 jQuery 코드를 짜 보자.

function wrapWindowByMask(){
//화면의 높이와 너비를 구한다.
var maskHeight = $(document).height();
var maskWidth = $(window).width(); 
//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
$('#mask').css({'width':maskWidth,'height':maskHeight}); 
//애니메이션 효과
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
}

자, 위 함수를 사용하면 반투명의 검은 마스크가 나타날 것이다. 그럼 어떻게 닫을까?

두 가지가 있을 것이다.

1.mordal window의 닫기 버튼을 눌렀을 때

2.반투명 검은 막을 눌렀을 때

두 경우 모두를 지원하기 위해서 click할 때 일어나는 이벤트를 두 군데 걸어야겠다.

이건 원본에서 그냥 긁어 온 코드다. .window는 검은 막 위에 뜬 mordal window다.

//닫기 버튼을 눌렀을 때
$('.window .close').click(function (e) {
//링크 기본동작은 작동하지 않도록 한다.
e.preventDefault();
$('#mask, .window').hide();
}); 
//검은 막을 눌렀을 때
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

위 코드들은 당연히 jQuery(document).ready(function(){ /*코드 넣는 부분*/ }) 으로 감싸 줘야 한다.

완성된 코드는 아래와 같다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#mask {
position:absolute;
z-index:9000;
background-color:#000;
display:none;
left:0;
top:0;
}
.window{
display: none;
position:absolute;
left:100px;
top:100px;
z-index:10000;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function wrapWindowByMask(){
//화면의 높이와 너비를 구한다.
var maskHeight = $(document).height();
var maskWidth = $(window).width(); 
//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
$('#mask').css({'width':maskWidth,'height':maskHeight}); 
//애니메이션 효과 - 일단 1초동안 까맣게 됐다가 80% 불투명도로 간다.
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8); 
//윈도우 같은 거 띄운다.
$('.window').show();
}
$(document).ready(function(){
//검은 막 띄우기
$('.openMask').click(function(e){
e.preventDefault();
wrapWindowByMask();
});
//닫기 버튼을 눌렀을 때
$('.window .close').click(function (e) {
//링크 기본동작은 작동하지 않도록 한다.
e.preventDefault();
$('#mask, .window').hide();
}); 
//검은 막을 눌렀을 때
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
</head>
<body>
<div id="mask"></div>
<div class="window">
<input type="button" href="#" class="close" value="나는야 닫기 버튼(.window .close)"/>
</div>
<a href="#" class="openMask">검은 막 띄우기</a>
</body>
</html>

간단한 레이어 팝업

[Javascript] 날짜 포맷 (Date Format)

2011. 12. 22. 15:12

Datejs

홈페이지 : http://www.datejs.com/

다운로드 : http://code.google.com/p/datejs/

API : http://code.google.com/p/datejs/wiki/APIDocumentation

[Javascript] 자바스크립트 날짜간 계산

2011. 12. 22. 11:32

PREV 1 2 NEXT

Thë 굽은ㄴr무™

Javascript

[jQuery] google store 스크린샷 이미지 갤러리 (screenshot image gallery)

[jQuery] tstore 스크린샷 슬라이드 이미지 갤러리(slide image gallery) 구현

[jQuery] 갤러리 이미지 Sliding Box 구현하기

[jQuery] 제이쿼리 SelectBox 테스트

[jQuery] jQuery를 사용하여 Div 화면 중앙에 띄우기

[Javascript] 날짜 포맷 (Date Format)

[Javascript] 자바스크립트 날짜간 계산

+ Recent posts

티스토리툴바