'jquery'에 해당되는 글 15건

 
  1. 2014.04.25 [HTML/JAVASCRIPT/JQUERY] TAG REPLACE
  2. 2014.03.14 [MAP/DAUM] 다음 맵 API 한 화면에 지도 여러개 띄우기 샘플, 코드
  3. 2014.03.03 [JS/JQUERY] 자바스크립트 제이쿼리로 3자리마다 콤마, 숫자 통화 변경
  4. 2014.02.20 [JS/JQUERY] 제이쿼리로 자바스크립트 페이지 온로드 샘플 예제, Javascript onload function as Jquery
  5. 2014.02.17 [JS/JQUERY] 제이쿼리 셀렉터 예제, jQuery Selector Example, siblings, prevAll, append, parent, css
  6. 2013.09.16 [JavaScript/jQuery] 자바스크립트 제이쿼리 숫자에 천단위 콤마, 통화형식으로 변환 (1)
  7. 2013.06.19 [JQUERY/JS] 페이지 안에서 검색, Ctrl+F 검색기능
  8. 2013.06.18 [JS/IE7] 인터넷 익스플로어 7 용 JSON 라이브러리 파일 (1)
  9. 2013.05.23 [JQUERY/JS] jQuery로 JSON타입 오브젝트를 복사하는 방법, JSON Copy, Clone, JSON.stringify, JSON.parse
  10. 2012.04.09 [JavaScript/JQuery] 체크박스 이벤트, 객체 디세이블
  11. 2012.01.05 [JQuery/JS] 로그인용 엔터키 자동 포커스 이동 서브밋 스크립트, Enterkey Event Auto-Focusing For Login Form
  12. 2012.01.04 [JQuery/JS] 셀렉트박스 변경할때 글 읽어오기, Selectbox onChange Ajax
  13. 2010.10.12 [JQUERY] jQuery 플러그인 시리즈 홈페이지, 다운로드 (1)
  14. 2010.10.07 [JQUERY] JTree 사용 예제, 노드 추가/삭제 (1)
  15. 2010.10.05 [JQUERY] JQuery Selector, 객체 선택 (9)
2014. 4. 25. 15:32

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

2014. 3. 14. 14:49 COMPUTER/JAVASCRIPT, JQUERY
[MAP/DAUM] 다음 맵 API 한 화면에 지도 여러개 띄우기 샘플, 코드

다음지도를 한 화면에서 2개이상 띄우는 코드 입니다.

좌표는 당근 2개씩 있어야겠죠.

확대축소 컨트롤이랑 '지도/스카이뷰' 버튼은 함께 쓸수 있습니다.


좌표중 하나는 서울역이고, 다른하나는 광화문 근처입니다.



스크립트:

$(window).load(function(){
	var zoomControl=new daum.maps.ZoomControl();
	var mapTypeControl=new daum.maps.MapTypeControl();

	var longitude='126.980101';
	var latitude='37.571982';
	var mapLongitude='126.978456';
	var mapLatitude='37.571702';

	map=new daum.maps.Map(document.getElementById('map1'),{
		center:new daum.maps.LatLng(mapLatitude,mapLongitude),
		level:4
	});

	map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT);
	map.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT);
	
	var marker=new daum.maps.Marker({position:new daum.maps.LatLng(latitude, longitude)});
	marker.setMap(map);



	var longitude2='126.9740458';
	var latitude2='37.5542316';

	map2=new daum.maps.Map(document.getElementById('map2'),{
		center:new daum.maps.LatLng(latitude2,longitude2),
		level:3
	});

	map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT);
	map2.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT);

	var marker2=new daum.maps.Marker({position:new daum.maps.LatLng(latitude2,longitude2)});
	marker2.setMap(map2);
});




HTML:
<div class="map_area" id="map1" style="width:100%;height:400px;">
<div class="map_area" id="map2" style="width:100%;height:400px;">


댓글을 달아 주세요

2014. 3. 3. 17:44 COMPUTER/JAVASCRIPT, JQUERY
[JS/JQUERY] 자바스크립트 제이쿼리로 3자리마다 콤마, 숫자 통화 변경
전에도 한번 쓴거 같긴한데;;;
고리짝 코드입니다.
전 요즘에 싸이코 기질이 발동해서 이렇겐 안씁니다만, 코드가 알아보기 쉽고 좆네욤;;;


정규 표현식을 이용한 자바스크립트로 3자리마다 콤마넣기의 한 예
//콤마찍기
function numberFormat(num) {
var pattern = /(-?[0-9]+)([0-9]{3})/;
while(pattern.test(num)) {
num = num.replace(pattern,"$1,$2");
}
return num;
}
 
//콤마제거
function unNumberFormat(num) {
return (num.replace(/\,/g,""));
}




toLocaleString를 이용한 제이쿼리로 3자리마다 콤마 넣기
var funcSetCurrency=function($){
$('#tableData td').each(function(){
if(!isNaN(Number($(this).text())) && $(this).text()) $(this).text(Number($(this).text()).toLocaleString().split('.')[0]);
});
};

$(document).ready(function(){
funcSetCurrency($);
});



댓글을 달아 주세요

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>





댓글을 달아 주세요

  1. 개발자

    안녕하세요. 찾고 있었는데 6자리 금액일 경우 ,700,000 이렇게 붙어요.
    유용한 정보 감사합니다^^

    2013.10.23 10:28 [ ADDR : EDIT/ DEL : REPLY ]

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을 사용할 수 있습니다.


댓글을 달아 주세요

  1. 개발자

    감사합니다. 많은 도움 되었습니다.

    2016.01.28 14:32 [ ADDR : EDIT/ DEL : REPLY ]

2013. 5. 23. 14:26 COMPUTER/JAVASCRIPT, JQUERY
[JQUERY/JS] jQuery로 JSON타입 오브젝트를 복사하는 방법, JSON Copy, Clone, JSON.stringify, JSON.parse

json을 var 변수2=변수1; 라고 코딩하면 복사가 되는게 아니고 이름이 두개가 됩니다.

그래서 JSON.stringify로 문자열로 변환했다가, JSON.parse로 JSON객체로 변화해준 값을 넣어주면 서로 다른 JSON객체가 생깁니다.

 

 

srchParams에 xtenSearchObj.param을 복사한 후 srchParams의 변수 두개를 1로 셋팅했습니다.

그리고 얼랏창으로 확인하면 xtenSearchObj.param.outmax값이 20, 그대로 남아있습니다.

 

 

댓글을 달아 주세요

2012. 4. 9. 13:18 COMPUTER/JAVASCRIPT, JQUERY
[JavaScript/JQuery] 체크박스 이벤트, 객체 디세이블

체크되면 사용금지, 해제되면 사용가능으로 바뀌는 JQuery 스크립트 입니다.

 

코드

<SCRIPT>
$(function(){

	$('input[name="test"]').click(function(){
		if($(this).attr('checked')){
			$('input[name="dis1"]').attr('disabled','disabled');
			$('input[name="dis2"]').attr('disabled','disabled');
		}else{
			$('input[name="dis1"]').removeAttr('disabled');
			$('input[name="dis2"]').removeAttr('disabled');
		}
	});

});
</SCRIPT>
<INPUT id=test type=checkbox name=test>
<INPUT id=dis1 value=zzz name=dis1>
<INPUT id=dis2 value=ggg name=dis2>

 

 

예제

 

댓글을 달아 주세요

2012. 1. 5. 13:06 COMPUTER/JAVASCRIPT, JQUERY
[JQuery/JS] 로그인용 엔터키 자동 포커스 이동 서브밋 스크립트, Enterkey Event Auto-Focusing For Login Form
엔터키를 누르면 아이디와 비밀번호값을 입력하게끔 포커스를 이동시켜줍니다.
다 입력됬으면 전송!

$(document).ready(function(){
$('body').keypress(function(e){
if(e.keyCode!=13) return;
if(!$('input[name="loginId"]').val()) $('input[name="loginId"]').focus();
if(!$('input[name="password"]').val()) $('input[name="password"]').focus();
$('form:eq(0)').submit();
});
});

댓글을 달아 주세요

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);
}


댓글을 달아 주세요

2010. 10. 12. 18:06 COMPUTER
[JQUERY] jQuery 플러그인 시리즈 홈페이지, 다운로드
jQuery가 대세?

jqueryUI (jquery.js)
http://jqueryui.com/themeroller/

jqGrid (jquery.jqgrid.js)
http://www.trirand.com/blog/?page_id=6

jquery tablednd (jquery.tablednd.js)
http://code.google.com/p/tablednd/

jquery context menu (jquery.contextmenu.js)
http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

댓글을 달아 주세요

  1. 플러그인 시리즈 홈페이지, 다운로드

    2011.06.10 18:00 [ ADDR : EDIT/ DEL : REPLY ]

2010. 10. 7. 15:48 COMPUTER/JAVASCRIPT, JQUERY
[JQUERY] JTree 사용 예제, 노드 추가/삭제

트리메뉴중에선 기능이 상당히 많은 오픈소스입니다.
데이타 타입은 html, json, xml등 거의대부분 지원합니다.
복잡한 기능을 구현하려면 jquery를 알고있는게 좋습니다. 

홈페이지: http://www.jstree.com/


예제에선 _xml_nest.xml이란 데이타 파일을 읽어들이고,
노드 추가/삭제를 할 수 있습니다.

예제 페이지 소스
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jsTree v.1.0 - full featured demo</title>
 <script type="text/javascript" src="_lib/jquery.js"></script>
 <script type="text/javascript" src="_lib/jquery.cookie.js"></script>
 <script type="text/javascript" src="_lib/jquery.hotkeys.js"></script>
 <script type="text/javascript" src="jquery.jstree.js"></script>

 <style type="text/css">
 html, body { margin:0; padding:0; }
 body, td, th, pre, code, select, option, input, textarea { font-family:verdana,arial,sans-serif; font-size:10px; }
 .demo, .demo input, .jstree-dnd-helper, #vakata-contextmenu { font-size:10px; font-family:Verdana; }
 #container { width:780px; margin:10px auto; overflow:hidden; position:relative; }
 #demo { width:auto; height:400px; overflow:auto; border:1px solid gray; }

 #text { margin-top:1px; }

 #alog { font-size:9px !important; margin:5px; border:1px solid silver; }
 </style>
</head>

<body>
<div id="demo" class="demo"></div>
<div id="menu">
<button id="addFolder">add folder</button><br/>
<button id="addItem">add item</button><br/>
<button id="deleteItem">delete item</button><br/>
</div>

<script>
$(function () {
 $("#demo").jstree({
  "xml_data" : {
   "ajax" : {
    "url" : "_xml_nest.xml"
   },
   "xsl" : "nest"
  },
  "plugins" : [ "themes", "xml_data","ui","crrm"],
  "ui" : {
   // this makes the node with ID node_4 selected onload
   "initially_select" : [ "pxml_6" ]
  }
 });
});

$(function(){
 $("#demo").bind("create.jstree", function (event, data) {
  data.rslt.obj.attr("id","testid");
  alert(data.rslt.obj.attr("id"));
 });
});

$(function(){
 $('#menu button').click(function(){
  switch(this.id){
  case "addFolder":
   //alert("addFolder");
   //$("#demo").jstree("create", null, "last", { "attr" : { "rel" : "folder" } });
   //$("#demo").jstree("create",-1,false,"CREATED NODE",false,true);
   $("#demo").jstree("create","#pxml_5","last","CREATED NODE",false,true);
   break;
  case "addItem":
   //alert("addItem");
   $("#demo").jstree("create", null, "last", { "attr" : { "rel" : "default" } });
   break;
  case "deleteItem":
   $("#demo").jstree("remove","#testid");
  default:
   break;
  }
 });
});
</script>
</body>
</html>


xml 데이타
<?xml version="1.0" encoding="UTF-8"?>
<root>
 <item id="pxml_1">
  <content><name><![CDATA[Root node 1]]></name></content>
  <item id="pxml_2">
   <content><name><![CDATA[Child node 1]]></name></content>
  </item>
  <item id="pxml_3">
   <content><name><![CDATA[zzzzzz]]></name></content>
  </item>
  <item id="pxml_4">
   <content><name><![CDATA[Some other child node]]></name></content>
  </item>
 </item>
 <item id="pxml_5">
  <content><name><![CDATA[Root node 222]]></name></content>
 </item>
 <item id="pxml_6">
  <content><name><![CDATA[menu2]]></name></content>
 </item>
 <item id="pxml_7">
  <content><name><![CDATA[kkkkkk]]></name></content>
 </item>
</root>

댓글을 달아 주세요

  1. 사람과 브랜드 모두 양피 부츠 마르크 새로운 최하점의 쉐인 e의 채택합니까? 당신이 결정합니다.

    2011.11.04 22:38 [ ADDR : EDIT/ DEL : REPLY ]

2010. 10. 5. 15:08 COMPUTER/JAVASCRIPT, JQUERY
[JQUERY] JQuery Selector, 객체 선택
제이쿼리를 이용할때 절대 잊으면 안되는것.
바로 html의 객체들을 선택할줄 알아야 뭔가 하겠죠.


$("font")
태그타입(Element)으로 찾기 - <font>안두볼</font>

$("div,a")
div와 a태그들을 선택합니다.

$("#kaudo")
아이디로 선택 - <a id="kaudo" class="link" href="http://www.kaudo.com">안두리</a>

$(".link")
CSS 클래스명으로 선택 - <a id="kaudo" class="link" href="http://www.kaudo.com">안두리</a>

$("*")
모든 태그(Element)를 선택합니다.

등록할때는 이런식으로
var objTest=$("#test");

 
John Resig @ Kings of Code 08
John Resig @ Kings of Code 08 by jaf 저작자 표시비영리동일조건 변경허락

댓글을 달아 주세요

  1. UGG 영국의 온라인 판매는 자유롭게 백퍼센트 정품 보증과 함께 여러분의 개성을 보여주 UGGS 영국 부츠를 선택, 다양한 색상, 크기와 종류의 부츠를 제공합니다.

    2011.11.14 16:26 [ ADDR : EDIT/ DEL : REPLY ]
  2. 이용약관위배로 관리자 삭제된 댓글입니다.

    2014.12.04 18:30 [ ADDR : EDIT/ DEL : REPLY ]
  3. 이용약관위배로 관리자 삭제된 댓글입니다.

    2014.12.05 02:31 [ ADDR : EDIT/ DEL : REPLY ]
  4. 이용약관위배로 관리자 삭제된 댓글입니다.

    2014.12.07 08:05 [ ADDR : EDIT/ DEL : REPLY ]
  5. 이용약관위배로 관리자 삭제된 댓글입니다.

    2014.12.09 12:26 [ ADDR : EDIT/ DEL : REPLY ]
  6. 이용약관위배로 관리자 삭제된 댓글입니다.

    2014.12.10 03:07 [ ADDR : EDIT/ DEL : REPLY ]
  7. 이용약관위배로 관리자 삭제된 댓글입니다.

    2014.12.10 23:41 [ ADDR : EDIT/ DEL : REPLY ]
  8. 이용약관위배로 관리자 삭제된 댓글입니다.

    2014.12.12 00:07 [ ADDR : EDIT/ DEL : REPLY ]
  9. 이용약관위배로 관리자 삭제된 댓글입니다.

    2014.12.13 09:21 [ ADDR : EDIT/ DEL : REPLY ]

최근에 올라온 글

최근에 달린 댓글