2014. 3. 6. 09:27 COMPUTER/JAVASCRIPT, JQUERY
[CSS] 커스텀 체크박스 스타일시트 예제, 모바일용, ✔

누군가 만들어놓은 커스텀 체크박스 스타일 시트 입니다.

사용법은 <input type="checkbox" class="custom-check"........

처럼 쓰면 됩니다.





input[type=checkbox].custom-check{ 
    position: absolute; overflow:hidden; width:1px;height:1px; 
    clip:rect(0 0 0 0);margin:-1px;padding:0;border:0; 
} 

input[type=checkbox].custom-check + label.custom-check{ 
    display:inline-block; 
    padding-left:1em; 
} 

input[type=checkbox].custom-check:checked + label.custom-check:before{ 
    position:absolute;margin-left:-1em; 
    content:'✔'; 
}


2014. 2. 20. 22:36 COMPUTER/JAVASCRIPT, JQUERY
[JS/JQUERY] 제이쿼리로 자바스크립트 페이지 온로드 샘플 예제, Javascript onload function as Jquery
jquery로 페이지가 로딩 되었을 때 스크립트를 수행합니다.
안에 있는 코드는 jqgrid를 100%넓이로 맹그러주기 위해 창 리사이즈를 이벤트로 잡은 코드입니다.

$(function(){}); 요것만 쓰면 됩니다.

<body onload="alert()"> 과 같습니다.


<script type="text/javascript" src="/library/jquery-1.7.2.js"></script>
<script>
//<![CDATA[
$(function(){
	$(window).bind('resize', function() {
    	$("#jqgrid1").setGridWidth($(window).width()-16);
	}).trigger('resize');
});
//]]>
</script>








2014. 2. 17. 09:30 COMPUTER/JAVASCRIPT, JQUERY
[JS/JQUERY] 제이쿼리 셀렉터 예제, jQuery Selector Example, siblings, prevAll, append, parent, css

나(this)의 상위를 제외한 같은레벨의 백그라운드 컬러를 빨간색으로 변경

$(this).parent().siblings().css("background-color", "red");


나의 상위중 클래스가 .txt_2인 가장 가까운 객체의 백그라운드 컬러를 빨간색으로 변경

$(this).parent().prevAll('.txt_2:first').css("background-color", "red");


div의 lang속성에 안두리를 포함한 태그안에 html추가

$('div[lang*="kaudo"]').append('<p class="title_3">안녕하세요.</p>');



2013. 9. 16. 10:25 COMPUTER/JAVASCRIPT, JQUERY
[JavaScript/jQuery] 자바스크립트 제이쿼리 숫자에 천단위 콤마, 통화형식으로 변환

가격으로 된 숫자에 콤마를 찍어주는 스크립트 입니다.

2000 > 2,000

1123000 > 1,123,000



이전 스크립트는 아이폰 사파리에서 작동하지 않습니다.

2011/06/13 - [SCRIPTING/JAVASCRIPT/JQUERY] - [JavaScript/JS] 자바스크립트 숫자에 천단위 콤마, 통화형식으로 변환 toLocaleString



<script>

$(document).ready(function(){ $('.intCurrency').each(function(index){ $(this).text($(this).text().split(/(?=(?:\d{3})+(?:\.|$))/g).join(',')); }); }); </script>

<span class="red intCurrency">2000</span> <span class="intCurrency sibol kkk">123000</span>





2013. 6. 19. 13:21 PROGRAMMING
[JQUERY/JS] 페이지 안에서 검색, Ctrl+F 검색기능

화면안에서 검색할 수 있게 해주는 스크립트 입니다.

DOM방식으로 작동하는 스크립트 소스를 수정한 것입니다.

이 소스는 인풋박스 한개와 버튼 한개를 사용하고 있습니다.



contsrch.js




$('a[name="btnContSrch"]').unbind('click').click(function(){
	var strContSrch=$('input[name="txtContSrch"]').val();
	if(strContSrch==$strContSrchInit || !strContSrch){
		alert('검색어를 입력하세요.');
		$('input[name="txtContSrch"]').focus();
		return false;}
	if(navigator.appName.indexOf("Microsoft")<0){
		if(!window.find(strContSrch,false,false,true,false,false,true)){
		}
		return false;
	}
	bodySearchAll('areaDetail'/*bodySideContent*/,strContSrch,'txtContSrch'/*bdySearch 버튼*/, 'down'/*chkMode*/);
	return false;
});
$('input[name="txtContSrch"]').val($strContSrchInit).bind('focus',function(){
	if($(this).val()==$strContSrchInit) $(this).val('');
}).bind('blur',function(){
	if(!$(this).val()) $(this).val($strContSrchInit);
}).bind('keyup',function(){
	if(event.keyCode!=13) return;
	return $('a[name="btnContSrch"]').click();
	return false;
});
끝;
2013. 6. 18. 13:10 COMPUTER/JAVASCRIPT, JQUERY
[JS/IE7] 인터넷 익스플로어 7 용 JSON 라이브러리 파일

JSON.parse(), JSON.stringify(), JSON.encode()



json2.js


JSON 오브젝트를 생성하거나 스트링형태로 변환하거나 등등등 할때 쓰는 JSON.method들이 있습니다.

다른 브라우저들은 잘 되는데 IE7같은 고물 브라우저에서는 에러가 납니다.


<script type="text/javascript" src="json2.js" ></script>

처럼 첨부해주면 IE7에서도 JSON을 사용할 수 있습니다.


2012. 9. 6. 09:30 COMPUTER/JAVASCRIPT, JQUERY
[JAVASCRIPT] Javascript setCookie getCookie deleteCookie, 자바스크립트 함수

말이 필요없는 함수

 

쿠키 저장

setCookie('변수명','값','만료일','도메인','보안');

 

쿠키 로드

getCookie('변수명');

 

쿠키 삭제

deleteCookie('변수명');

 

 
<script>

function setCookie(cookieName, cookieValue, cookieExpire, cookiePath, cookieDomain, cookieSecure){
	var cookieText=escape(cookieName)+'='+escape(cookieValue);
	cookieText+=(cookieExpire ? '; EXPIRES='+cookieExpire.toGMTString() : '');
	cookieText+=(cookiePath ? '; PATH='+cookiePath : '');
	cookieText+=(cookieDomain ? '; DOMAIN='+cookieDomain : '');
	cookieText+=(cookieSecure ? '; SECURE' : '');
	document.cookie=cookieText;
}

function getCookie(cookieName){
	var cookieValue=null;
	if(document.cookie){
		var array=document.cookie.split((escape(cookieName)+'=')); 
		if(array.length >= 2){
			var arraySub=array[1].split(';');
			cookieValue=unescape(arraySub[0]);
		}
	}
	return cookieValue;
}

function deleteCookie(cookieName){
	var temp=getCookie(cookieName);
	if(temp){
		setCookie(cookieName,temp,(new Date(1)));
	}
}

</script>
 

 

 

 

... ...

2012. 9. 3. 15:46 COMPUTER/JAVASCRIPT, JQUERY
[RegEx/JS] 자바스크립트로 언더바 문자를 낙타표기법으로 변환 (JavaScript, Camel Notation, Underscore

네이밍 변환 스크립트(정규표현식) 입니다.

 

데이타베이스에서 많이쓰는 컬럼명 대문자_대문자
예를들면 - SEQ_NUM, ORDER_COST, USER_PHONE_NO...

 

프로그램 네이밍시 많이쓰는 변수/함수명

예를들면 - userId, tableName...

 

서로 변환할 수 있는 함수 입니다.

정규표현식이므로 어떤 언어에서도 적용할 수 있습니다.

 

 

대문자 언더바구분 형식으로 낙타표기법으로 변환

RESULT: kaudoAhndoori

<script>

var under2camel=function(str){
	return str.toLowerCase().replace(/(\_[a-z])/g, function(arg){
		return arg.toUpperCase().replace('_','');
	});
}

var result=under2camel('kaudo_ahndoori');
document.write(result);

<script>

 

낙타표기법을 대문자 언더바구분 형식으로 변환

RESULT: AHNDOORI_KAUDO

<script>

var camel2under=function(str){
	return str.replace(/([A-Z])/g, function(arg){
		return "_"+arg.toLowerCase();
	}).toUpperCase();
}

var result=camel2under('ahndooriKaudo');
document.write(result);

<script>
2012. 8. 31. 13:49 COMPUTER/JAVASCRIPT, JQUERY
[JavaScript/JS] 자바스크립트 소숫점 반올림하기 Math.round()

자바스크립트로 소숫점 숫자 표현하는 방법입니다.

 

Math.round(값) - 값을 반올림합니다.

Math.ceil(값) - 값을 올림합니다.

Math.floor(값) - 값을 내림합니다.

Math.parseInt(값) - 값을 정수로 바꿉니다. (값이 소숫점이 있는 숫자일 경우엔 소숫점 이하를 잘라버립니다. 내림)

 

10의 n승을 곱하고 반올림 한 결과를 다시 10의 n승으로 나누면

원하는 소숫점 자릴수를 표현할 수 있습니다.

 

<body/>
<script>

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'반올림 (소숫점0번째까지)<br/>'+
	'Math.round(45.67890) : '+
	Math.round(45.67890);

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'올림 (소숫점0번째까지)<br/>'+
	'Math.ceil(45.67890) : '+
	Math.ceil(45.67890);

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'내림 (소숫점0번째까지)<br/>'+
	'Math.floor(45.67890) : '+
	Math.floor(45.67890);

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'내림 (소숫점0번째까지)<br/>'+
	'parseInt(45.67890) : '+
	parseInt(45.67890);


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 2번째까지 반올림<br/>'+
	'Math.round(123.4567) : '+
	Math.round(123.4567*100)/100;

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 4번째까지 올림<br/>'+
	'Math.ceil(123.4567) : '+
	Math.ceil(123.4567*10000)/10000;

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 4번째까지 내림<br/>'+
	'Math.floor(123.4567) : '+
	Math.floor(123.4567*10000)/10000;

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점 3번째까지 내림<br/>'+
	'parseInt(123.4567) : '+
	parseInt(123.4567*1000)/1000;


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'소숫점있는 문자열을 숫자(float)로 변환<br/>'+
	'parseFloat("12.3456789") : '+
	parseFloat("12.3456789");


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'앞에 0이 있는 문자열을 숫자(float)로 변환<br/>'+
	'parseInt("098.765") : '+
	parseInt("098.765");

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'앞에 0이 있는 문자열을 숫자(integer)로 변환<br/>'+
	'parseInt("011") : '+
	parseInt("011");


document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'문자를 숫자(float)로 변환<br/>'+
	'parseFloat("안두리") : '+
	parseFloat("안두리");

document.body.innerHTML=document.body.innerHTML+'<br/><br/>'+
	'문자를 숫자(integer)로 변환<br/>'+
	'parseInt("ahndoori") : '+
	parseInt("ahndoori");

</script>
2012. 1. 4. 22:54 COMPUTER/JAVASCRIPT, JQUERY
[JQuery/JS] 셀렉트박스 변경할때 글 읽어오기, Selectbox onChange Ajax


$('#[아이디]').change([함수명]=function(){
$.ajax({
url:'[주소]',
data:'변수명='+$(this).val(),
dataType:'json',
success:function(data){
if(!data.data || data.data=='' || data.data.length<1) return false;
$('#[대상]').html(data.[컬럼명]);
},
}); // $.ajax
});



SCRIPT

$('#boardDivnCd').change(changeBoardDivnCd=function(){
$.ajax({
url:'<c:url value="/0001/selectGftctPupl.do" />',
data:'boardDivnCd='+$(this).val(),
dataType:'json',
success:function(data){
if(!data.data || data.data=='' || data.data.length<1) return false;
$('#content').html(data.data[0].CONTENT);
},
}); // $.ajax
});


HTML

<select id="boardDivnCd" name="boardDivnCd">
<option value="55">일반게시판</option>
<option value="56">QnA게시판</option>
<option value="57">게시판</option>
</select>
<td id="content">내용내용내용</td>


JAVA

@RequestMapping("0001/selectGftctPupl.do")
public ModelAndView selectGftctPupl(HttpServletRequest request, HttpServletResponse response, Map<String, Object> model,0001Model 0001Model){
try{
List<DataMap> data=0001Service.selectGftctPupl(0001Model); // 데이터 조회
if(data==null || data.size()==0) return new ModelAndView("jsonView",model);
model.put("data",data);
}catch (Exception e){}
return new ModelAndView("jsonView",model);
}


2011. 6. 13. 08:50 COMPUTER/JAVASCRIPT, JQUERY
[JavaScript/JS] 자바스크립트 숫자에 천단위 콤마, 통화형식으로 변환 toLocaleString
초간단 자바스크립트


<script>
document.write(
Number('25625623452345').toLocaleString().split(".")[0]
);
</script>

결과: 25,625,623,452,345


이 스크립트는 아이폰의 모바일 사파리에서 작동하지 않습니다.

아래 글을 참고하세요.

2013/09/16 - [SCRIPTING/JAVASCRIPT/JQUERY] - [JavaScript/jQuery] 자바스크립트 제이쿼리 숫자에 천단위 콤마, 통화형식으로 변환


2010. 10. 11. 10:01 COMPUTER/JAVASCRIPT, JQUERY
[AJAX] 기본 예제, httpRequest Sample

ajax의 가장 기본이자 핵심인 httpRequest,
함수로 만들어서 쓰면 코드를 줄일 수 있습니다.

var httpRequest=null;

function getXMLHttpRequest(){
 if (window.ActiveXObject){
  try{
   return new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try{
    return new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e1){ return null; }
  }
 }else if (window.XMLHttpRequest) return new XMLHttpRequest();
 else return null;
}

function sendRequest(url,params,callback,method){
 httpRequest=getXMLHttpRequest();
 var httpMethod=method ? method : 'GET';
 if(httpMethod!='GET' && httpMethod!='POST') httpMethod='GET';
 var httpParams=(params==null || params=='') ? null : params;
 var httpUrl=url;
 if (httpMethod=='GET' && httpParams != null) httpUrl=httpUrl+"?"+httpParams;
 httpRequest.open(httpMethod,httpUrl,true);
 httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 httpRequest.onreadystatechange=callback;
 httpRequest.send(httpMethod=='POST' ? httpParams : null);
}


사용법

sendRequest("test.jsp", "attr=10&value=안두리", funcReceived, "POST");

function funcReceived() {
 if (httpRequest.readyState == 4) {
  if (httpRequest.status == 200) {
   alert(httpRequest.responseText);
  }
 }
}
2010. 3. 8. 23:36 COMPUTER/JAVASCRIPT, JQUERY
[JS,CSS] 잘까먹는 속성, 함수들
객체로 지정한 태그들의 위치값을 알아낼 수 있다

TAG.clientLeft
TAG.clientTop
TAG.clientWidth
TAG.clientHeight
TAG.offsetLeft
TAG.offsetTop

영역안에서 글씨가 넘어가버릴때 여러줄로 강제
word-wrap:break-word;word-break:break-all

한줄로 표시하고 점점점처리

NOBR width:WIDTH;text-overflow:ellipsis;overflow:hidden


페이지에서 루프 돌릴때 사용

ID=setInterval("FUNCTION()",INTERVAL);
ID=setTimeout("FUNCTION()",INTERVAL);
clearInterval(ID);
2009. 6. 26. 11:01 PROGRAMMING
javascript cross domain access
도메인이 서로 다른 페이지들끼리 통신하려면,
보안문제로 "사용 권한이 없습니다"라는 오류가 발생합니다.

www.kaudo.com과 blog.kaudo.com이 자바스크립트로 통신하려면 도메인을 맞춰주면 됩니다.
둘다 www와 blog의 서브도메인들이기때문에,
양쪽 페이지에
<script>
document.domain="kaudo.com";
</script>

처럼 코딩하면 문제없이 사용할 수 있습니다.

* www없는 kaudo.com과 같은 도메인도 www와는 다른도메인으로 인식합니다. www와 루트도메인을 섞어쓸때는 페이지 상단에 항상 document.domain="[루트도메인]";을 써주는게 좋습니다. (물론 도메인을 하나만 쓰는게 가장 이상적이죠__)

최근에 올라온 글

최근에 달린 댓글