'JavaScript &amp; jQuery/jQuery' 카테고리의 글 목록

'JavaScript & jQuery/jQuery'에 해당되는 글 24건

[jQuery] TextBox에서 다중 선택 기능 제작[jQuery] TextBox에서 다중 선택 기능 제작

Posted at 2020. 7. 24. 07:54 | Posted in JavaScript & jQuery/jQuery

■ 텍스트 입력박스 다중 선택 기능 만들기

jQuery UI 중에는 다중 선택을 위한 Autocomplete - Multiple values 기능이 존재한다.

여러개의 항목중 원하는 몇가지를 선택하는것에 적합한데.

샘플코드( https://jqueryui.com/autocomplete/#multiple ) 를 보면 쉽게 알 수 있을 것이다.

그렇지만 위 샘플코드에서는 선택 입력한 값의 내용이 다시 선택이 가능하다는 단점이 존재하여.

한번 선택한 항목은 선택에서 배제될 수 있게 내용을 조금 수정해 보았다.

# 소스코드

<head>

<title>jQuery UI Autocomplete - 다중 선택</title>

jQuery(document).ready(function() {

jQuery( "#tags" ).on( "keydown" , function( event ) {

// 항목을 선택할때 탭으로 이동하지 못하게 한다.

if( event.keyCode === jQuery.ui.keyCode.TAB && jQuery(this).autocomplete("instance").menu.active ) {

event.preventDefault();

}

}).autocomplete({

minLength : 0

, source : function( request, response ) {

// Autocomplete 자동완성 문자 리스트 - 초기값 ( 변경되지 않는 절대값 )

const availableTags = [

"파이어폭스", "크롬", "오페라", "웨일", "사파리", "익스플로러", "엣지"

, "비발디", "브레이브", "돌핀", "토치", "미도리", "아반트", "맥스톤"

];

// Autocomplete 자동완성 문자 리스트 - 변경값 ( 검색이 이루어지는 실제 배열의 삭제 및 재생산이 이루어짐 )

let unfoldTags = availableTags;

// 콤마( , )로 구분되는 문자열을 배열로 만든다.

let arrTrem = request.term.split(",");

// 문자 리스트에서 이미 선택된 문자열은 삭제한다.

arrTrem.forEach(function(trem) {

let search = unfoldTags.indexOf( trem.trim() );

if(search != -1) {

unfoldTags.splice(search, 1);

}

});

// 자동 완성을 다시 실행하지만, 마지막 용어를 추출한다.

response(jQuery.ui.autocomplete.filter(unfoldTags, extractLast(request.term)));

unfoldTags = null;

}

, focus : function() {

return false;

}

, select : function(event, ui) {

let terms = split(this.value);

// 현재 입력값을 제거한다.

terms.pop();

// 선택된 아이템을 추가한다.

terms.push(ui.item.value);

// 끝에 콤마와 공백을 추가한다.

terms.push("");

this.value = terms.join(", ");

return false;

}

});

// 공백문자에 대응

function split(val) {

return val.split( /,\s*/ );

}

// 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환

function extractLast(term) {

return split(term).pop();

}

});

</script>

</head>

<body>

<label for="tags">프로그래밍 언어 : </label>

</div>

</body>

</html>

# 출력결과

저작자표시

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

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0)	2020.03.02
[jQuery] JCROP을 이용한 이미지 자르기 - Sample (5)	2020.02.11
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0)	2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영

Posted at 2020. 3. 2. 19:03 | Posted in JavaScript & jQuery/jQuery

■ 새로고침 없이변경된 데이터 조회하기

Ajax 통신을 사용한 비동기 통신으로

웹 브라우저의 새로고침 없이 데이터를 조회하거나, 변경 및 이벤트를 실행하는 경우는 많이 보아 왔을 것이다.

또한 iframe을 통해 작업되어져 있는 다른 페이지의 정보를 가져오는 방식으로도

새로고침 없이 작업을 진행 할 수 있지만.

여기서 설명할 .load( ) 메소드는 Ajax와 iframe은 비슷한 기능을 수행하면서도, 좀 하위 호한의 느낌이 강하지만.

사용여부와 방법에따라서 직관적이고 단순한 사용의 장점이 있다.

단순히 가져올 데이터가 명확하다면 .load( ) 메소드는 큰 힘을 발휘 하게 된다.

load_front.php

<html>

<head>

<title>:: jQuery load() 함수 ::</title>

jQuery(document).ready(function() {

backLoadAgainCall();

});

function backLoadAgainCall() {

jQuery(".output").load("load_back.php");

}

</script>

</head>

<body>

<hr/>

</body>

</html>

load_back.php

<html>

<head>

<title>:: jQuery load() 함수 ::</title>

#turnImg { transform:rotate(0deg); }

/* #turnImg { transform:rotate(90deg); } */

/* #turnImg { transform:rotate(180deg); } */

/* #turnImg { transform:rotate(270deg); } */

</style>

</head>

<body>

</body>

</html>

코드를 다 작성했다면.

load_front.php 를 실행한다.

이후 load_back.php에서 #turnImg { transform : rotate ( 0deg ); } 를

0 → 90 → 180 → 270 순서로 한번씩 변경하면서

브라우저의 재호출 버튼을 클릭해 보자.

load_front.php를 새로고침 하지 않고 load_back.php의 변경된 사항을 반영하여

이미지가 계속 회전하는 것을 확인 할 수 있다.

위와같이 jQuery의 .load( ) 를 사용하면

이미 만들어진 결과를 페이지의 새로고침 없이 가져올 수 있어.

경우의 따라서는 Ajax 호출과 구분하여 사용할 수 있다.

저작자표시

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

[jQuery] TextBox에서 다중 선택 기능 제작 (0)	2020.07.24
[jQuery] JCROP을 이용한 이미지 자르기 - Sample (5)	2020.02.11
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0)	2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31

[jQuery] JCROP을 이용한 이미지 자르기 - Sample[jQuery] JCROP을 이용한 이미지 자르기 - Sample

Posted at 2020. 2. 11. 13:29 | Posted in JavaScript & jQuery/jQuery

Jcrop 다운 : http://deepliquid.com/content/Jcrop.html

Jcrop API : https://jcrop.com/

GitHub : https://github.com/tapmodo/Jcrop

■ JCROP을 이용한 업로드한 크롭( CROP ) 하기

웹 브라우저 상에서 이미지를 업로드하고, 해당 이미지를 편집 하는 기능을 제작하게 되었다.

HTML5의 캔버스를 통해 업로드한 이미지를 똑같이 복사하여, 작업영역을 만들고.

캔버스에서 작업이 완료된 그림을 다시 원본 이미지와 교체하는형태로 서버에 업로드 하지 않고 작업하는것을 마무리 하였다.

# 소스코드

<html>
<head>
<meta charset="UTF-8">
<title>:: JavaScript 캔버스 이미지 업로드 ::</title>
<meta name="viewport" content="width=device-width">
<link type="text/css" rel="stylesheet" href="./css/modern.css"/>
<link type="text/css" rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.min.css"/>
<style type="text/css">
.imgArea { text-align:center; }
canvas, #uploadFile, #editBtn, #cutBtn { display:none; }
body { overflow:hidden };
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">

let jcropApi = null;

  // @breif 이미지 크롭 영역지정 UI 나타내기
function imgCropDesignate() {

let editWidth = jQuery("#editImg").width();
let editHeight = jQuery("#editImg").height();

// @breif jcrop 실행시 크롭영역을 미리 세팅
let x1 = window.screen.width / 2 - editWidth;
let y1 = window.screen.height / 2 - editHeight;
let x2 = editWidth / 1.5;
let y2 = editHeight / 1.5;

// @breif jcrop 실행
jQuery("#editImg").Jcrop({
bgFade : true
, bgOpacity : .2
, setSelect : [ x1, y1, x2, y2 ]
, onSelect : updateCoords
}, function() {
jcropApi = this;
});

jQuery("#editBtn").css("display", "none");
jQuery("#cutBtn").css("display", "inline");
}

  // @breif 지정된 크롭 한 영역( 좌표, 넓이, 높이 )의 값을 보관하는 함수
function updateCoords(crap) {
jQuery("#xAxis").val(crap.x);
jQuery("#yAxis").val(crap.y);
jQuery("#wLength").val(crap.w);
jQuery("#hLength").val(crap.h);
}

  // @breif 크롭한 영역 잘라내고 추출하기
function imgCropApply() {

if(parseInt(jQuery("#wLength").val()) == "NaN") {
alert("이미지를 크롭한 이후\n자르기 버튼을 클릭하세요.");
return false;
} else {

      let editImage = new Image();
editImage.src = jQuery("#editImg").attr("src");

editImage.onload = function() {

// @breif 캔버스 위에 이미지 그리기
let canvas = document.querySelector("canvas");
let canvasContext = canvas.getContext("2d");

// @breif 캔버스 크기를 이미지 크기와 동일하게 지정
canvas.width = jQuery("#wLength").val();
canvas.height = jQuery("#hLength").val();

canvasContext.drawImage(
this
, jQuery("#xAxis").val()       // 자르기를 시작할 x좌표
, jQuery("#yAxis").val()       // 자르기를 시작할 y좌표
, jQuery("#wLength").val()   // 잘라낸 이미지의 넓이
, jQuery("#hLength").val()   // 잘라낸 이미지의 높이
, 0      // 캔버스에 이미지를 배치할 x좌표
, 0      // 캔버스에 이미지를 배치할 y좌표
, jQuery("#wLength").val()   // 사용할 이미지의 넓이(이미지 스트레칭 또는 축소)
, jQuery("#hLength").val()   // 사용할 이미지의 높이(이미지 스트레칭 또는 축소)
);

// @breif 편집한 캔버스의 이미지를 화면에 출력한다.
let dataURI = canvas.toDataURL("image/jpeg");
jQuery("#editImg").attr("src", dataURI);

// @breif 이미지의 크기는 자른 이미지와 동일하게 지정
jQuery("#editImg").css("width", jQuery("#wLength").val());
jQuery("#editImg").css("height", jQuery("#hLength").val());
};

      jQuery("#cutBtn").css("display", "none");

// @details JCROP을 종료한다.
      jcropApi.destroy();
  jcropApi = null;
}
}

// @breif 이미지 업로드 함수
function uploadImgFilePrinted() {

// @details 업로드 파일 정보를 받아온다.
let fileInfo = document.getElementById("uploadFile").files[0];
let reader = new FileReader();

reader.onload = function() {

// @details 업로드 이미지 출력
jQuery("#editImg").attr("src", reader.result);

// @details 이미지 크기를 제목 영영과 같게 출력
jQuery("#editImg").css("width", jQuery("h1").width());

// @details 이미지 업로드 기능 제거, 추가 업로드 방지
jQuery("#editImg").parent("a").removeAttr("onClick");

// @details 편집버튼 노출
jQuery("#editBtn").css("display", "inline");

canvasDrawImage(function() {
alert("이미지 업로드가 완료되었습니다.");
});
};

if(fileInfo) {
// @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.
reader.readAsDataURL(fileInfo);
}
}

// @breif 캔버스 이미지 생성
function canvasDrawImage(callback) {

let prepImage = new Image();
prepImage.src = jQuery("#editImg").attr("src");

prepImage.onload = function() {

// @details 캔버스 위에 이미지 그리기
  // jQuery("canvas") 와같은 명령은 사용할 수 없다.
let canvas = document.querySelector("canvas");
let canvasContext = canvas.getContext("2d");

canvas.width = jQuery("#editImg").width();
canvas.height = jQuery("#editImg").height();
canvasContext.drawImage(this, 0, 0, jQuery("#editImg").width(), jQuery("#editImg").height());

  // @details 캔버스의 이미지
let dataURI = canvas.toDataURL("image/jpeg");
jQuery("#editImg").attr("src", dataURI);

callback();
};
}
</script>
</head>
<body>
<input type="hidden" id="xAxis" value="0" placeholder="선택영여역의_x좌표"/>
<input type="hidden" id="yAxis" value="0" placeholder="선택영여역의_y좌표"/>
<input type="hidden" id="wLength" value="0" placeholder="선택영여역의_w넓이"/>
<input type="hidden" id="hLength" value="0" placeholder="선택영여역의_h높이"/>
<input type="file" id="uploadFile" onChange="uploadImgFilePrinted();" accept="image/*"/>
<div class="contents">
<h1>이미지 자르기<span>샘플</span></h1>
<div class="imgArea">
<a href="javascript:;" onClick="jQuery('#uploadFile').click();">
<img id="editImg" src="./user-anonymous.png"/>
</a>
<br/><br/>
<input id="editBtn" type="button" onClick="imgCropDesignate();" value="편집"/>
<input id="cutBtn" type="button" onClick="imgCropApply();" value="자르기"/>
</div>
<canvas></canvas>
<div class="copyright" style="bottom:0;">
<p>Producer © 사악미소</p>
</div>
</div>
</body>
</html>

# 출력결과

관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample

저작자표시

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

[jQuery] TextBox에서 다중 선택 기능 제작 (0)	2020.07.24
[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0)	2020.03.02
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0)	2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31

[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작

Posted at 2019. 6. 18. 14:47 | Posted in JavaScript & jQuery/jQuery

※ 참고

해당 예제는 jQuery Mobile의 HTML TABLE을 반응형으로 바꿔 모바일 화면에 맞게 출력할 수 도 있게 해주는 예제이다.

그렇기에 해당 예제는 jQuery.mobile.css 파일이 반드시 필요하기에. 사전에 제작중인 사이트에서 사용할 경우 CSS의 충돌은 염두해 두어야 할것이다.

■ 모바일 화면 크기에 맞는 테이블 레이아웃 변경

실제 사이트를 제작하고 운영하는 단계에서

요즘 반드시 고려하게 되는것이,

디바이스 화면에 맞추어 화면을 변화시키는 것이고,

그중 가장 귀찮게 하는것이 바로 HTML TABLE일 것이다.

컴퓨터와 모바일 디바이스에서의 보여주어야 하는 정보를 어떻게 처리해야 할지 상당히 귀찮고.

피곤한데, 이 고민을 jQuery Mobile을 사용하면 어느정도 덜어 낼 수 있다.

# HTML 소스 코드

table_reaction.html

<html>

<head>

</script>

</head>

<body>

<thead>

<tr>

<th>미디어지수</th><th>소통지수</th><th>커뮤니티지수</th><th>총합</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

TABLE에 data-role="table" 속성을 추가하면

thead의 제목 필드값이 tbody의 td 값들 앞에 붙여지게 되지만.

그것은 jQuery.mobile.css 에서 노출을 막아주고 있기에

화면 사이즈의 변화에 따라서만 노출되게 된다.

# CSS 디자인

custom_table.css

/* 화면 사이즈 조절 */

@media screen and (min-width:36em) {

/* 화면의 사이즈가 560px 이상일 경우 table의 텍스트를 가운데 정렬 한다.*/

.ui-responsive th, .ui-responsive td {

text-align:center;

}

/* 테이블 디자인 */

table {

width:100%;

text-align:center;

border-collapse:collapse;

}

th {

background:linear-gradient(#333333 0%, #444444 100%);

color:#FFFFFF;

font-weight:bold;

height:60px;

font-size:20px;

}

td {

height:40px;

}

/* 홀수행 백그루안드 색상 */

tr:nth-child(even) td {

background:#EEEEEE;

}

/* 짝수행 백그루안드 색상 */

tr:nth-child(odd) td {

background:#FDFDFD;

}

코드의 준비가 끝났다면

브라우저를 통해 해당 HTML 코드를 불러와 보자.

# 출력결과01 - 풀 사이즈

처음 풀 사이즈로 본 화면은 평소 컴퓨터를 할때 자주 접하게 되는

HTML TABLE과 다른 부분을 찾아볼 수 없다.

그럼 이제 해당 화면이의 가로 넓이 사이즈를 줄여 나가 보자.

# 출력결과 - 모바일 사이즈

그럼 위와같이 모바일 화면에 맞게 새로 정의된 TABLE의 내용을 확인 할 수 있다.

저작자표시

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

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0)	2020.03.02
[jQuery] JCROP을 이용한 이미지 자르기 - Sample (5)	2020.02.11
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크 (0)	2018.11.17

Prev Next

1 2 3 4 ··· 6

'JavaScript & jQuery/jQuery'에 해당되는 글 24건

[jQuery] TextBox에서 다중 선택 기능 제작[jQuery] TextBox에서 다중 선택 기능 제작

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

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영

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

[jQuery] JCROP을 이용한 이미지 자르기 - Sample[jQuery] JCROP을 이용한 이미지 자르기 - Sample

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

[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작

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

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바