'모듈' 태그의 글 목록 (9 Page)

'모듈'에 해당되는 글 43건

[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

[JavaScript] 카드번호 입력폼 예제[JavaScript] 카드번호 입력폼 예제

Posted at 2018. 4. 18. 10:05 | Posted in JavaScript & jQuery/JavaScript

■ 16자리(4x4) 카드번호 입력폼

아래 예제는 텍스트 박스 입력시 maxlength에 지정된 숫자를 체크하고 그 갯수만큼의 문자열이 채워지면

nextElementSibling.focus()를 통해 자동으로 다음 텍스트 박스로 이동하게 된다.

# 소스코드

<html>

<head>

.moveNumber {

text-align:center;

width:40px;

};

</style>

function inputMoveNumber(num) {

if(isFinite(num.value) == false) {
alert("카드번호는 숫자만 입력할 수 있습니다.");
num.value = "";
return false;
}

max = num.getAttribute("maxlength");

if(num.value.length >= max) {

num.nextElementSibling.focus();

}

</script>

</head>

<body>

<input type="text" class="moveNumber" onKeyup="inputMoveNumber(this);" maxlength="4"/> - 

</body>

</html>

# 출력결과

■ 카드 유효기간(MM/YY) 입력폼

다음은 MM/YY형태의 카드 유효기간을 입력하는 입력폼이다.

기본적으로 MM/YY형태의 숫자 4자리를 입력하면 자동으로 슬래시( / )기호가 삽입되게끔 제작되었다.

<html>
<head>
<title>:: 카드 유효기간 체크 ::</title>
<style type="text/css">
    .validThru {
        text-align:center;
        width:60px;
    }
</style>
<script type="text/javascript">
    function inputValidThru(period) {

        // replace 함수를 사용하여 슬래시( / )을 공백으로 치환한다.
       var replaceCard = period.value.replace(/\//g, "");

       // 텍스트박스의 입력값이 4~5글자 사이가 되는 경우에만 실행한다.
       if(replaceCard.length >= 4 && replaceCard.length < 5) {

           var inputMonth = replaceCard.substring(0, 2);   // 선언한 변수 month에 월의 정보값을 담는다.
           var inputYear = replaceCard.substring(2, 4);       // 선언한 변수 year에 년의 정보값을 담는다.

// 현재 날짜 값을 구한다.

var nowDate = new Date();

var nowMonth = autoLeftPad(nowDate.getMonth() + 1, 2);

var nowYear = autoLeftPad(nowDate.getFullYear().toString().substr(2, 2), 2);

           // isFinite함수를 사용하여 문자가 선언되었는지 확인한다.
           if(isFinite(inputMonth + inputYear) == false) {
               alert("문자는 입력하실 수 없습니다.");
                period.value = autoLeftPad((Number(nowMonth) + 1), 2) + "/" + nowYear;
               return false;
           }

           // 입력한 월이 12월 보다 큰 경우
           if(inputMonth > 12) {
               alert("12월보다 큰 월수는 입력하실 수 없습니다. ");
                period.value = "12/" + inputYear;
               return false;
           }

            // 입력한 유효기간을 현재날짜와 비교하여 사용 가능 여부를 판단한다.
           if((inputYear + inputMonth) <= (nowYear + nowMonth)) {
               alert("유효기간이 만료된 카드는 사용하실 수 없습니다.");
                period.value = inputMonth + "/" + autoLeftPad((Number(nowYear) + 1), 2);
               return false;
           }

            period.value = inputMonth + "/" + inputYear;
       }
    }

// 1자리 문자열의 경우 앞자리에 숫자 0을 자동으로 채워 00형태로 출력하기위한 함수
   function autoLeftPad(num, digit) {
       if(String(num).length < digit) {
            num = new Array(digit - String(num).length + 1).join('0') + num;
       }
       return num;
   }
</script>
</head>
<body>
    <h2>카드 유효기간</h2>
    
    <input type="text" class="validThru" onKeyup="inputValidThru(this);" placeholder="MM/YY" maxlength="5"/>
</body>
</html>

# 출력결과

# 예외처리

저작자표시

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

[JavaScript] Session 데이터 읽고, 쓰기 (0)	2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기 (4)	2018.09.03
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입 (7)	2018.08.21
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입 (0)	2018.08.20
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스 (3)	2018.08.17

Prev Next

1 ··· 6 7 8 9 10 11

'모듈'에 해당되는 글 43건

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

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

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

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

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

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

[JavaScript] 카드번호 입력폼 예제[JavaScript] 카드번호 입력폼 예제

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

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바