'JavaScript &amp; jQuery' 카테고리의 글 목록 (16 Page)

'JavaScript & jQuery'에 해당되는 글 69건

[jQuery] SNS 공유 팝업창 제작(심화)[jQuery] SNS 공유 팝업창 제작(심화)

Posted at 2018. 6. 7. 17:33 | Posted in JavaScript & jQuery/jQuery

참고 : https://opentutorials.org/course/50/190

어떤 사이트의 유지보수 업무를 맡았을때의 일이다.

사이트가 설계부터 상당히 조악했었다. include 부터가 이상하게 꼬여 있었기에.

사이트의 이벤트 페이지를 SNS에 공유하는 기능을 만들때였다.

내가 원하는건 해당 SNS공유 버튼이 있는 EVENT 페이지에서의 내용이

SNS에 잘 공유되는 것이었는데, 계속 원치 않는 메인페이지로만 공유되고.

관련 이미지도 띄울 수 없는 사태였다.

include 경로가 굉장히 이상하게 꼬여있었기에.

왠만하면 그냥 자동으로 되는 SNS Share 기능이 제대로 작동 될수가 없던 그런 상황이었다.

결국 SNS 공유 기능에 사용되는.

meta 태그의 property 속성 og: 관련 내용을 직접 설정하는 식으로 내용을 해결해 나가야 했고.

괜히 5분 10분이면 끝날작업을, 엄청 생고생 하며 만들었고.

짜증이 매우 났기에, 또 이런 상황에 대응하기위한 모듈을 만들 생각으로

이렇게 포스팅하게 되었다.

# 소스코드

encodeURIComponent

웹을 통해서 데이터를 전송할 때 특정 문자들은 특수한 기능으로 사용된다.

예를들어, http://a.com?name=egoing&job=programmer에서

&job=programmer 중 '&'는 하나의 파라미터가 끝나고 다음 파라미터가 온다는 의미이다.

그런데 다음과 같이 job의 값에 &이 포함된다면 시스템은 job의 값을 제대로 인식 할 수 없게 된다.

http://a.com?name=egoing&job=programmer&blogger

이런 문제를 회피하기 위해서 다음과 같이 치환해 준다.

http://a.com?name=egoing&job=programmer%26bloogger

그럼 시스템에서는 %26을 &으로 해석하고 의도대로 해석 할 수 있게 된다.

이러한 처리를 이스케이핑(eascaping) 라고 부른다.

# 출력결과 - sns_share.php

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta property="og:title" content="<?=$_GET["title"]?>"/>
<meta property="og:image" content="<?=$_GET["img"]?>"/>
<meta property="og:type" content="travel"/>
<meta property="og:site_name" content="HUISTENBOSCH"/>
<meta property="og:description" content=""/>
<input type="hidden" id="name" value="<?=$_GET['name']?>"/>
<input type="hidden" id="title" value="<?=$_GET['title']?>"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script language="javascript">
jQuery(document).ready(function(){

   var eventName = jQuery("#name").val();
   var eventTitle = jQuery("#title").val();
   var mobile = "";
   var smartPhones = [
          "iphone", "ipad", "lgtelecom", "windows ce", "blackberry", "skt", "mobile", "samsung", "nokia", "blackberry"
       , "android", "android", "sony", "phone", "webos", "sonyerricsson", "opera mini", "opera mobi", "iemobile"
    ];

   for(var num in smartPhones) {
       if(navigator.userAgent.toLowerCase().match(new RegExp(smartPhones[num]))) {
           mobile = "http://m.wickedmiso.com/event.php";
       }
   }

   var url = (mobile) ? mobile : "http://wickedmiso.com/events/";

   var redirect =
          "?eventName=" + eventName
       + "&eventTitle=" + eventTitle;

   location.href = url + redirect;
});
</script>
</head>
<body>
</body>
</html>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 커스텀 팝업창 오픈하기 (0)	2018.08.14
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기 (0)	2018.08.09
[jQuery] 움직이는 팝업 레이어 만들기 (0)	2018.05.29
[jQuery] 따라다니는플로팅 배너 제작 (0)	2018.04.23
[jQuery] 선택 날짜를 태그로 생성하는 모듈 (0)	2018.04.19

[jQuery] 움직이는 팝업 레이어 만들기[jQuery] 움직이는 팝업 레이어 만들기

Posted at 2018. 5. 29. 16:27 | Posted in JavaScript & jQuery/jQuery

■ jQuery :: draggable을 이용한 움직이는 모달 창 만들기

01. jQuery :: draggable();

jQuery의 draggable은 선택한 레이어를 클릭 드래그 할 수 있게 만들어 주는 기능이다.

해당 포스팅은 draggable을 사용하여특정 레이어를 팝업하고 움직일 수 있는 dialog기능과 같은 모달, 팝업창을 띄우려고 한다.

jQuery UI 데모페이지의 예제 소스는 아래와 같다.

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
    #draggable { width:150px;height:150px;padding:0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    jQuery(document).ready(function() {
        jQuery("#draggable").draggable();
    });
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
</body>
</html>

참고 : https://jqueryui.com/draggable/

02. CSS :: position

position 프로퍼티는 레이어를 겹치거나, 특정 위치에 나오게끔 지정하기위해 사용된다.

해당 포스팅에서는 팝업창의 위치를 띄울 absolute와 닫기버튼의 위치지정을위해 static을 사용하였다.

참고 : http://ko.learnlayout.com/position.html

① position:static

static은 기본값이다. position:static;이 설정된 엘리먼튼느 그다지 특별한 방식으로 위치가 지정된 것이 아니다.

정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며, static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정되었다고 표현한다.

② position:absolute

absolute는 뷰포트에 상대적으로 위치가 지정되는게 아니라 가장 가까운곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다.

절대위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다.

# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 제이쿼리 UI Draggable ::</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
    #popWindow {
        position:absolute;
        display:none;
        background-color:#000000;
        left:10%;
        top:10%;
    }

    #closeBtn {
        position:absolute;
        width:24px;
        z-index:1;
        margin-left:-16px;
        margin-top:-8px;
    }

    #popBottom {
        height:28px;
        text-align:left;
        font-weight:bold;
        color:#FFFFFF;
        padding-left:10px;
        padding-right:10px;
    }
</style>
<script type="text/javascript">
    function popWindowOpen() {
        jQuery("#popWindow").css("display", "block");
        jQuery("#popWindow").draggable();
    }

    function popWindowClose() {
        jQuery("#popWindow").css("display", "none");
    }
</script>
</head>
<body>
<div >
    <div id="popWindow">
        <div style="text-align:right;">
            <a href="javascript:;" onClick="popWindowClose();">
                <img id="closeBtn" src="./images/close_icon.png"/>
            </a>
        </div>
        <a href="javascript:;" onClick="">
            <img src="./images/an_jihyun.jpg" style="position:static;"/>
        </a>
        <div id="popBottom">
            <label>
                <input type="checkbox" onClick="popWindowClose();"> 
                오늘 하루 이 창을 열지 않습니다.
            </label>
        </div>
    </div>
</div>
<input type="button" onClick="popWindowOpen();" value="팝업창 오픈"/>
</body>
</html>

# 출력결과

위 이미지와 같이 창을 팝업하면 클릭 드래그 하여 브라우저 이곳저곳으로 움직일 수 있다.

☞ 이어지는 글 : [jQuery] 팝업 창 외에 다른 항목 선택 불가 필름 만들기

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기 (0)	2018.08.09
[jQuery] SNS 공유 팝업창 제작(심화) (0)	2018.06.07
[jQuery] 따라다니는플로팅 배너 제작 (0)	2018.04.23
[jQuery] 선택 날짜를 태그로 생성하는 모듈 (0)	2018.04.19
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기 (2)	2018.03.22

[jQuery] 따라다니는플로팅 배너 제작[jQuery] 따라다니는플로팅 배너 제작

Posted at 2018. 4. 23. 10:07 | Posted in JavaScript & jQuery/jQuery

■ CSS :: position 속성을 이용한 쫒아다니는 윙 배너 제작

#01 position : static

-. static은 기본값이다.
-. position:static;이 설정된 엘리먼트는 위치가 지정된 것이 아니다.
-. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며
-. static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현한다.

#02 position : fixed

-. 고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다.
-. top이나 right, bottom, left 프로퍼티가 사용된다.

# 소스코드

<html>
<head>
<title>:: 따라오는 스크롤 배너 ::</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
   .frame {
       width:1140px;
       margin-left:auto;
       margin-right:auto;
   }

   .main {
       float:left;
       margin-right:10px;
       width:780px;
       height:5000px;
   }

   .box { width:100%;height:1000px; }
   .box:nth-child(1) { background-color:#FF9933; }
   .box:nth-child(2) { background-color:#66CCCC; }
   .box:nth-child(3) { background-color:#9933CC; }
   .box:nth-child(4) { background-color:#006699; }
   .box:nth-child(5) { background-color:#FF00FF; }

    .banner {
       float:left;
       background-color:#CCCCCC;
       width:350px;
       height:5000px;
   }

    #chase {
       width:300px;
       overflow:hidden;
       margin-top:10px;
       margin-left:10px;
       margin-right:10px;
       margin-bottom:10px;
   }

   #chaseImg {
       width:100%;
   }

   #chaseBar {
       width:100%;
       background-color:#000000;
       color:#FFFFFF;
       font-weight:bold;
       text-align:center;
   }
</style>
<script type="text/javascript">
jQuery(window).scroll(function() {

// 브라우저 화면 스크롤의 현재 높이가 플로팅 배너의 높이보다 클경우

if(jQuery(window).scrollTop() > jQuery(".banner").offset().top) {

jQuery("#chase").css("position", "fixed");

}

// 브라우저 화면 스크롤 현재 높이가 플로팅 배너의 높이보다 작을경우

else if((jQuery(window).scrollTop() < jQuery(".banner").offset().top)) {

jQuery("#chase").css("position", "static");

    }
});
</script>
</head>
<body>
   <div class="frame">
       <div class="main">
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
       </div>
       <div class="banner">
           <div id="chase">
               <img src="./maxim.jpg" id="chaseImg"/>
               <div id="chaseBar">새해 福덩이 안지현</div>
           </div>
       </div>
   </div>
</body>
</html>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] SNS 공유 팝업창 제작(심화) (0)	2018.06.07
[jQuery] 움직이는 팝업 레이어 만들기 (0)	2018.05.29
[jQuery] 선택 날짜를 태그로 생성하는 모듈 (0)	2018.04.19
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기 (2)	2018.03.22
[jQuery] AJAX를 사용한 파일 업로드 (1)	2018.03.18

[jQuery] 선택 날짜를 태그로 생성하는 모듈[jQuery] 선택 날짜를 태그로 생성하는 모듈

Posted at 2018. 4. 19. 11:26 | Posted in JavaScript & jQuery/jQuery

■ 날짜 태그 생성하기

-. UI개발중 특정 날짜를 선택하면 그 날짜값을 태그로 생성하는 기능이 필요하게 되어 개발 후 정리한다.

-. 아래 예제 소스코드를 실행하기 위해서는 반드시 jQuery-ui에 대한 세팅이 필 수 불가결 하다.

# 소스코드

<html>

<head>

#choiceDate {

width:100px;

text-align:center;

}

#tagBox {

border:2px solid #75DBE7;

border-radius:5px;

padding-top:10px;

padding-left:10px;

padding-right:10px;

padding-bottom:10px;

width:600px;

height:300px;

}

.daysTag{

float:left;

border-radius:5px;

background-color:#7CBAC1;

height:15px;

margin-left:5px;

margin-bottom:5px;

padding-top:3px;

padding-left:5px;

padding-right:5px;

padding-bottom:2px;

font-size:13px;

font-weight:bold;

color:#FFFFFF;

display:flex;

justify-content:center;

align-items:center;

}

.delIcon {

width:14px;

height:14px;

}

</style>

jQuery(document).ready(function() {

jQuery("#choiceDate").datepicker();

});

function dayTagProduction(day) {

var getOut = true;

// 이미 등록한 날짜가 있는지 확인한다.

jQuery(".choiceDay").each(function(idx) {

if(jQuery(".choiceDay").eq(idx).val() == day) {

alert(day + "일은 이미 추가된 날짜입니다.");

getOut = false;

return false;

}

});

if(getOut == true) {

// 등록한 날짜가 없다면 날짜태그를 추가한다.

var tag = "";

tag += "<a href='javascript:;' onClick='dayTagRemove(this);'>";

tag += "<div class='daysTag'>";

tag += day;

tag += " <img class='delIcon' src='x_icon.png'/>";

// 실제로 생성된 값을 입력하기 위한 hidden 타입 설정

tag += "<input type='hidden' class='choiceDay' name='choiceDay[]' value='" + day + "'/>";

tag += "</div>";

tag += "</a>";

jQuery("#tagBox").append(tag);

}

else {

// 등록한 날짜가 존재한다면 날짜태그를 생성하지 않는다.

return false;

}

// 생성된 날짜태그를 제거한다.

function dayTagRemove(tag) {

var idx = jQuery(tag).index();

var day = jQuery(".choiceDay").eq(idx).val();

if(confirm(day + " 날짜를 삭제 하시겠습니까?") == true) {

jQuery(tag).remove();

}

jQuery("#tagBox").append(tag);

}

</script>

</head>

<body>

</body>

</html>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 움직이는 팝업 레이어 만들기 (0)	2018.05.29
[jQuery] 따라다니는플로팅 배너 제작 (0)	2018.04.23
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기 (2)	2018.03.22
[jQuery] AJAX를 사용한 파일 업로드 (1)	2018.03.18
[jQuery] 쇼핑몰 대표 이미지 상품박스 (0)	2018.03.14

Prev Next

1 ··· 13 14 15 16 17 18

'JavaScript & jQuery'에 해당되는 글 69건

[jQuery] SNS 공유 팝업창 제작(심화)[jQuery] SNS 공유 팝업창 제작(심화)

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 움직이는 팝업 레이어 만들기[jQuery] 움직이는 팝업 레이어 만들기

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 따라다니는플로팅 배너 제작[jQuery] 따라다니는플로팅 배너 제작

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 선택 날짜를 태그로 생성하는 모듈[jQuery] 선택 날짜를 태그로 생성하는 모듈

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바