우리는 가끔 특정 이벤트를 주어 클래스를 지정 태그에 적용 시킬때가 존재한다.
a 태그 클릭시 포커스를 줄때 또는 버튼 클릭시 특정 태그에 클래스를 추가 또는 제거 하는 방식으로 예를 들어서 작성해보겠음.
클래스 관련 추가/삭제/존재여부에 대한 함수를 다뤄볼텐데
클래스 추가하기 : $("").addClass("classId")
클래스 제거하기 : $("").removeClass("classId")
클래스 존재유무 체크 : $("").hasClass("classId")
로직을 가상으로 만들어보고 소스를 제작해보도록 하겠다.
1. a태그 클릭시 클래스 아이디가 focusRed 라는 놈으로 글자색 변경하기
2. 버튼 클릭시 클래스 존재유무로 클래스 존재하지 않으면 특정 글자의 font size를 늘리는 plusfontsize 클래스 아이디 추가
클래스 존재하면 특정 글자 원래대로 돌려주어야 하므로 plusfontsize 클래스 아이디 제거
이 두가지로 소스코드를 짜봅시다!
우선은 테스트용 css를 짜보도록 하자
<style type="text/css">
.focusRed {
color: red;
}
.plusfontsize{
font-size: 20pt;
}
</style>
html태그이다. body 태그내에 작성해주자
<a href="#" id="atag">빨~~~갛게</a><br/> <input type="button" value="클래스적용토글" id="classChangeButton" /><br/> <label id="fontLabel">글자11</label>
이제 마지막으로 스크립트 코드를 짜보자
$(function(){
//a태그 클릭시
$("#atag").click(function(){
//a태그에 focusRed라는 클래스를 추가한다.
$("#atag").addClass("focusRed");
});
//id가 classChangeButton이라는 버튼 클릭시
$("#classChangeButton").click(function(){
//라벨태그에 클래스가 존재하지 않는다면,
if(!$("#fontLabel").hasClass("plusfontsize")) {
//plusfontsize 클래스아이디를 fontLable 아이디를 가지고 있는 label에 클래스 추가
$("#fontLabel").addClass("plusfontsize");
//라벨태그에 클래스가 존재할경우
} else {
//plusfontsize 클래스 아이디를 fontLable 아이디를 가지고 있는 label 클래스 제거
$("#fontLabel").removeClass("plusfontsize");
}
})
})
해당 소스를 페이지에 맞춰 읽어보면서 실행을 해보면 위에서 가상으로 짠 로직에 대한 결과가 나올것이다.
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 12장] 동적으로 태그 추가 및 태그를 문자자체로 표출하기 (2) | 2014.06.10 |
|---|---|
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
| jQuery / 프로토타입 동시사용시 ... (0) | 2014.06.09 |
| [jQuery 9장] 공백 제거 $.trim() (0) | 2014.06.09 |
| [jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
아~~~ 주 기초적이긴 하지만 혹시 몰라서 필요하신분들을 위해서 게시물
넘버링하는 샘플소스 올려봅니다~
//넘버링에 필요한 변수
int listNumber, n = 0;
//db에서 select한 list객체를 for문으로 뽑는다.
for(int i=0; i<list.size(); i++) {
// listNumber가 게시물 번호를 뜻하는데
// 페이징을 하게 되면 대부분 totalcount,
// 페이징에 필요한 start,end 를 구하게 될텐데
// 다음처럼 적용해보면 된다.
listNumber = totalcount - (start + n)+1 ;
//콘솔에 값을 찍어본다
System.out.println("페이지번호:"+listNumber);
// 값이 원하는 숫자가 나오게 된다면 list 객체에 있는
// 페이지 번호변수에 set을해준다.
// 예를들어 list객체가 선언한 vo타입내에
// private int listNum; 이라고 주었다면
// list.get(i).setListNum(listNumber); 처럼 set을 해주고
// 화면에 뽑아오면 될것이다.
n++;
}
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'샘플소스 > 샘플소스(JAVA)' 카테고리의 다른 글
| json-simple 라이브러리를 이용한 ObjecToString 과 StringToObject 코드구현 (2) | 2014.07.04 |
|---|---|
| 자바 파일다운로드 - 멀티 브라우저지원 샘플코드 (0) | 2014.06.12 |
| 엑셀다운 POI 라이브러리 - 엑셀파일에서 내용 읽기 (0) | 2014.06.10 |
| 자바 썸네일 이미지 생성 (0) | 2014.06.09 |
| poi 라이브러리를 이용하여 엑셀 파일을 만들어보도록 하자 - (xls 확장자) (0) | 2014.06.05 |
예전에 jquery와 프로토타입을 동시에 사용해서 충돌났던게 생각나서 작성하게 되었다.
현재는 어떨지 모름...
jquery도 $사용 프로토 타입 역시 $를 사용하기때문에 동시에 사용시
프로토타입은 $ 그대로를 사용해주고
jquery는 $들어갈 부분에 jQuery를 사용해주면서 코딩해주어야 했다.
예를들면
$(document).ready(function(){
});
var a = $("#").val();
alert(a);
이런 소스가 있다 가정할경우
jQuery(document).ready(function(){
});
var a = jQuery("#").val();
alert(a);
이런식으로 변경을 해주었었다.
갑자기 생각나서 올려보았다..
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 11장] 태그속성값 가져오기 attr / prop (0) | 2014.06.10 |
|---|---|
| [jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
| [jQuery 9장] 공백 제거 $.trim() (0) | 2014.06.09 |
| [jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
| [jQuery 7장] 셀렉터가 모예요? (4) | 2014.05.14 |
개발을 하다보면 submit을 날리기 전에 값들의 존재유무를 파악할때가 존재하는데
if($("").val() == ""){
alert("입력하세요");
return;
}
와 같은 코드가 들어간다.
해당 태그의 값이 비어있는데 실질적으로는 여러번의 스페이스바를 눌러서 " "
이런형식의 값이라면? 위의 if문은 건너뛰게 되는것이다.
css및 특정 플러그인 스크립트를 쓸경우 text 태그에 " 값" 이런식으로 들어갈 경우도
종종 있어서 공백 제거는 필수체크를 해줘야 한다.
jquery에서 공백제거를 하려면 $.trim() 함수를 써주면 된다.
예를들어
var tempValue = " 값 " ;
이런식으로 주고
$.trim(tempValue) 라고 주게 되면 양쪽 공백이 모두 제거가 된다.
태그의 value 값의 공백을 제거하고 싶다면
$.trim($("#").val())
이렇게 지정해주면 되겠다.
샘플 소스는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
alert("공백제거전 ::"+$("#trimtest").val());
alert("공백제거후 ::"+$.trim($("#trimtest").val()));
})
</script>
</head>
<body>
<input type="text" id="trimtest" value = " abc" />
</body>
</html>
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'자바스크립트이야기 > jQuery' 카테고리의 다른 글
| [jQuery 10장]스크립트로 지정 태그에 클래스 적용하기 (0) | 2014.06.09 |
|---|---|
| jQuery / 프로토타입 동시사용시 ... (0) | 2014.06.09 |
| [jQuery 8장]숨겨진 태그 화면에 보여주기 효과 (0) | 2014.06.09 |
| [jQuery 7장] 셀렉터가 모예요? (4) | 2014.05.14 |
| [jQuery 6장] 특정 텍스트 태그에 포커스를 줘보고 키보드의 키를 눌렀을때의 이벤트 값을 확인해보자으~ (0) | 2014.05.14 |
가끔씩 작업하다보면 리스트상의 썸네일 이미지를 생성해야 할 경우가 생긴다.
원본 이미지를 억지로 이미지 사이즈를 조정해서 뿌릴수 있긴 하지만 썸네일을 생성해서 축소된 썸네일 이미지를 화면에 뿌리는게 조금더 깔끔하고 속도면에서도 괜찮다.
샘플링 소스는 다음과 같다.
아마 java 자체에서 제공해주는 api를 사용하는 방식이어서 버전을 타는것으로 알고 있다...
JDK 1.6 까지는 테스트 해보았는데 1.5에서는 될지 안될지 모른다. 안될경우 별도의 라이브러리를 이용해서 썸네일을 구현하는것으로 알고 있다.
하위 버전에서의 샘플링은 별도로 올리도록 하겠다...
샘플링은 다음과 같다.
Test.JAVA
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.File;
import javax.imageio.ImageIO;
public class Test {
public static void main(String ar[]) {
try {
File originalFileNm = new File("D:/test.jpg");
File thumbnailFileNm = new File("D:/test_thumbnail2.jpg");
int width = 50;
int height = 50;
// 썸네일 이미지 생성
BufferedImage originalImg = ImageIO.read(originalFileNm);
BufferedImage thumbnailImg = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);
// 썸네일 그리기
Graphics2D g = thumbnailImg.createGraphics();
g.drawImage(originalImg, 0, 0, width, height, null);
// 파일생성
ImageIO.write(thumbnailImg, "jpg", thumbnailFileNm);
} catch (Exception e) {
e.printStackTrace();
}
}
}
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
'샘플소스 > 샘플소스(JAVA)' 카테고리의 다른 글
| json-simple 라이브러리를 이용한 ObjecToString 과 StringToObject 코드구현 (2) | 2014.07.04 |
|---|---|
| 자바 파일다운로드 - 멀티 브라우저지원 샘플코드 (0) | 2014.06.12 |
| 엑셀다운 POI 라이브러리 - 엑셀파일에서 내용 읽기 (0) | 2014.06.10 |
| 게시물 번호 구하기 샘플소스 (0) | 2014.06.09 |
| poi 라이브러리를 이용하여 엑셀 파일을 만들어보도록 하자 - (xls 확장자) (0) | 2014.06.05 |