'Javascript/jQuery' 카테고리의 글 목록

기본적으로 JavaScript 코드는 자신이 로드된 도메인만 통신이 가능하고, 크로스 도메인(다른 도메인)과는 통신할 수 없다. 이것은 동일 출처 정책이라고 한다. 이것은 AJAX 통신에도 그대로 적용된다. 보안 관점에서 동일 출처 정책은 악의적인 JavaScript 코드가 다른 도메인의 데이터에 대한 무단 액세스를 할 수 없도록 한다는 점에서는 매우 효과적이다.

이 정책은 두 가지 형태의 웹앱에서는 장애물이 된다.

첫번째는 여러가지 Open API에 접근해서 클라이언트 매시업 기능을 필요로 하는 웹액에서는 장애물이 된다.

두번째는 웹앱을 네이트브앱으로 만들 경우 기기의 로컬에서 로딩된 자바스크립트는 외부 서버에서 엑세스 할 수 없다.

$.support.cors-true 는 jQuery의 $.ajax() 메소드가 크로스 도메인 페이지를 로드할 수 있도록 해준다. 그리고 $.mobile.allowCrossDomainPage=true 는 jQuery Mobile API가 크로스 도메인 페이지를 로드할 수 있도록 해 준다.

jQuery Mobile 웹액을 네이티브앱으로 변활할 경우 주의할 점은 시작 HTML(홈페이지)에 기술된 다른 페이지로의 링크 경로를 크로스 도메인 절대 경로로 변경해야 한다.

[jQuery] naver nstore 앱 슬라이드 (app slide)

2013. 3. 21. 14:47

nstore_app_slide.zip

참고 : http://nstore.naver.com

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

.lst_thum_wrap {width:670px; float:left; margin:0 30px;}
.lst_thum_wrap .lst_thum {width:100%; margin:0; padding:16px 0 0 16px; position:relative;}
.lst_thum_wrap .lst_thum:after {display:block; clear:both; content:'';}
.lst_thum_wrap .lst_thum li {width:108px; margin:0; padding:0 26px 10px 0; float:left; position:relative; vertical-align:top;}
.lst_thum_wrap .lst_thum li .mask {display:block; overflow:hidden; position:absolute; width:102px; height:102px; background:url('images/sp_mask.png') no-repeat -325px 0;}
.lst_thum_wrap .lst_thum li .ico {top:-10px; left:-12px; position:absolute; z-index:20; width:41px; height:41px; background:url('images/sp_sub_common.png') no-repeat; font-style:normal;}
.lst_thum_wrap .lst_thum li .ico_new {background-position: -184px -299px;}
.lst_thum_wrap .lst_thum li .ico_free {background-position: -92px -299px;}
.lst_thum_wrap .lst_thum li .ico_gift {background:url('images/sp_ico.png') no-repeat -120px 0;}
.lst_thum_wrap .lst_thum li .ico_vari {line-height:22px !important; font-family:Tahoma !important; font-size:10px; font-weight:bold; padding-top:8px; color:#fff; height:41px; background-position:-46px -299px; text-align:center;}
.lst_thum_wrap .lst_thum li a img {width:101px; height:101px; margin:1px 0 5px 1px;}
.lst_thum_wrap .lst_thum li a img + strong {padding:5px 0 0; line-height:18px; word-break:break-all; display:block; color:#000; white-space:normal;}
.lst_thum_wrap .lst_thum li .writer {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.lst_thum_wrap .lst_thum li .score {margin:0 0 0 -1px; display:inline-block; position:relative; width:61px; height:12px; background:url('images/sp_sub_common.png') no-repeat -732px -249px; vertical-align:middle; font-size:11px; font-weight:bold; color:#333;}
.lst_thum_wrap .lst_thum li .score span {display:block; overflow:hidden; position:relative; height:12px; background:url('images/sp_sub_common.png') no-repeat -732px -232px; line-height:999px;}
.lst_thum_wrap .lst_thum li .score_num {display:inline-block; position:relative; top:1px; font-weight:bold; font-size:11px; color:#333; vertical-align:middle; font-style:normal; left:-2px;}
.lst_thum_wrap .lst_thum li .price {display:block; margin: 4px 0 0 -2px; line-height:16px; text-align:left; white-space: normal;}
.lst_thum_wrap .lst_thum li .price strong {word-break:break-all; color:#1b8ffc;}

.flick-carousel {width:730px; position:relative; height:244px;}
.flick-carousel .flick-carousel-outer-container {overflow:hidden; position:absolute; width:730px; height:230px;}
.flick-carousel .flick-carousel-outer-container .flick-carousel-content-container {height:230px; width:10000px; white-space:nowrap;}
.flick-carousel a.flick-button-previous,
.flick-carousel a.flick-button-next {position:absolute; top:65px; width:27px; height:43px; background:url('images/sp_alsobought_bs_v2.png') no-repeat; line-height:999px; overflow:hidden; z-index:30; display:none;}
.flick-carousel a.flick-button-previous {background-position:5px -108px;}
.flick-carousel a.flick-button-previous:hover {background-position:-22px -108px;}
.flick-carousel a.flick-button-next {background-position:-49px -108px; right:0;}
.flick-carousel a.flick-button-next:hover {background-position:-76px -108px;}
.flick-carousel .flick-nav {position:absolute; bottom:6px; left:0; width:100%; margin:0; text-align:center; display:none;}
.flick-carousel .flick-nav strong,
.flick-carousel .flick-nav a {display:inline-block; overflow:hidden; width:7px; height:7px; margin:0; line-height:999px; vertical-align:middle; background:url('images/sp_alsobought_as.png') no-repeat;}
.flick-carousel .flick-nav strong {background-position:-108px -46px;}
.flick-carousel .flick-nav a {background-position:-119px -46px;}
</style>

</head>
<body>

</body>
</html>

[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>

간단한 레이어 팝업

PREV 1 NEXT

Thë 굽은ㄴr무™