tornado 의 블로그 ::

http://serennz.sakura.ne.jp/toybox/lightbox/?en

DHTML/AJAX 2007/02/13 11:34

라이트

박스~

http://serennz.sakura.ne.jp/toybox/lightbox/?en

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'DHTML > AJAX' 카테고리의 다른 글

http://serennz.sakura.ne.jp/toybox/lightbox/?en (0)	2007/02/13
http://www.christofwagner.com/ (0)	2007/02/05
[참고할곳] http://www.endless.com/ (0)	2007/01/19
The Lightbox Effect without Lightbox (0)	2007/01/11
http://prototype-window.xilinus.com/ (0)	2006/11/30
[ajax] 우편번호 찾기 초보버전 (2)	2005/08/22

Posted by tornado

lightbox

0 | 0

http://www.christofwagner.com/

DHTML/AJAX 2007/02/05 18:09

http://www.christofwagner.com/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'DHTML > AJAX' 카테고리의 다른 글

http://serennz.sakura.ne.jp/toybox/lightbox/?en (0)	2007/02/13
http://www.christofwagner.com/ (0)	2007/02/05
[참고할곳] http://www.endless.com/ (0)	2007/01/19
The Lightbox Effect without Lightbox (0)	2007/01/11
http://prototype-window.xilinus.com/ (0)	2006/11/30
[ajax] 우편번호 찾기 초보버전 (2)	2005/08/22

Posted by tornado

0 | 0

[참고할곳] http://www.endless.com/

DHTML/AJAX 2007/01/19 14:00

http://www.endless.com/

잘 만들었네~

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'DHTML > AJAX' 카테고리의 다른 글

http://serennz.sakura.ne.jp/toybox/lightbox/?en (0)	2007/02/13
http://www.christofwagner.com/ (0)	2007/02/05
[참고할곳] http://www.endless.com/ (0)	2007/01/19
The Lightbox Effect without Lightbox (0)	2007/01/11
http://prototype-window.xilinus.com/ (0)	2006/11/30
[ajax] 우편번호 찾기 초보버전 (2)	2005/08/22

Posted by tornado

0 | 0

The Lightbox Effect without Lightbox

DHTML/AJAX 2007/01/11 17:47

좋습니다~

하지만~~~ 익스 특정 버전에서 div background-image 가 100% 가 안되서 자바스크립트로 살짝 고쳐주던가, explorer hack 를 알아내야 한다는거~

http://www.pjhyett.com/posts/190-the-lightbox-effect-without-lightbox

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'DHTML > AJAX' 카테고리의 다른 글

http://www.christofwagner.com/ (0)	2007/02/05
[참고할곳] http://www.endless.com/ (0)	2007/01/19
The Lightbox Effect without Lightbox (0)	2007/01/11
http://prototype-window.xilinus.com/ (0)	2006/11/30
[ajax] 우편번호 찾기 초보버전 (2)	2005/08/22
[펌] AJAX (Asynchronous Javascript and XML) (0)	2005/06/28

Posted by tornado

0 | 0

http://prototype-window.xilinus.com/

DHTML/AJAX 2006/11/30 13:49

http://prototype-window.xilinus.com/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'DHTML > AJAX' 카테고리의 다른 글

[참고할곳] http://www.endless.com/ (0)	2007/01/19
The Lightbox Effect without Lightbox (0)	2007/01/11
http://prototype-window.xilinus.com/ (0)	2006/11/30
[ajax] 우편번호 찾기 초보버전 (2)	2005/08/22
[펌] AJAX (Asynchronous Javascript and XML) (0)	2005/06/28
ajax 볼것.... (0)	2005/06/28

Posted by tornado

0 | 0

[ajax] 우편번호 찾기 초보버전

DHTML/AJAX 2005/08/22 14:26

JS 로 xml 파일 읽어오는 걸 만들다 보니.. 이것저것 손대게 되네 ^^

아래는 우편번호를 찾는 것인데..

그냥 찾는게 아니라.. 특정 주소를 입력하면 onkeyup 이벤트를 통해

ActiveXObject("Msxml2.XMLHTTP") 를 생성하고.. 그곳에서 XML 값을 리턴받아서

Table 에 add 시키는 것이다..

물론 Refresh 는 없다.

이상한거는 테이블이 길어지면 보기 안좋아서.. DIV 로 스크롤 바를 줬는데

테이블 바로 위에 공백이 생긴다 -.-;

우편번호는 postman.pe.kr 에서 받았고,

커넥션 풀은 proxool 로 했다.

화면에 디스플레이 되는 JSP 파일

FileName : Register.jsp

<%@ page language="java"
pageEncoding="euc-kr"
import="java.sql.*"
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSF 'Register.jsp' starting page</title>

function openDIV(divName){

  var obj = document.getElementById(divName);
  var x = event.clientX + parseInt(obj.offsetWidth);
  var y = event.clientY + parseInt(obj.offsetHeight);

var _x = document.body.clientWidth - x;
var _y = document.body.clientHeight - y;

  if(_x < 0){
   x = event.clientX + document.body.scrollLeft + x;
  }else{
   x = event.clientX + document.body.scrollLeft;
  }

  if(_y < 0){
   y = event.clientY + document.body.scrollTop + _y + 20;
  }else{
   y = event.clientY + document.body.scrollTop;
  }

  obj.style.top = y + 30 ;
  obj.style.left = x ;
  obj.style.display = "";

  document.forms[0].query.focus();
}

function closeDIV(divName){
var obj = document.getElementById(divName);

  if(obj.style.display != "none"){
   obj.style.display = "none";
  }
}

var req;

function zipcode_check(frm){
  var inputVal = frm.query.value;

  if(inputVal.length < 2){
   return;
  }

  req = new ActiveXObject("Msxml2.XMLHTTP");
  if(req){
   req.onreadystatechange = processStateChange;
   req.open("GET", "SearchAddr.jsp?dong=" + inputVal, false);
   req.send();
  }
}

function processStateChange(){
  if(req.readyState == 4){
   if(req.status == 200){
    var nodes = req.ResponseXML.selectNodes("//addr");
    FillNodes(nodes);
   }else{
    alert("Ooops : " + req.statusText);
   }
  }
}

// XML 을 읽어들여서 테이블에 채운다.
function FillNodes(nodes){
  var tableObj = document.getElementById("addrTbl");
  var tableBody = tableObj.childNodes[0];
  var tableRow, tableCell;

  if(tableObj.rows.length > 0){
   for(var i = 0; i < tableObj.rows.length; i++){
    tableObj.deleteRow(i);
   }
  }

for(var i = 0; i < nodes.length; i++){

   var st = nodes[i].selectSingleNode("zipcode").text + " "
      + nodes[i].selectSingleNode("sido").text + " "
      + nodes[i].selectSingleNode("gugun").text + " "
      + nodes[i].selectSingleNode("dong").text + " "
      + nodes[i].selectSingleNode("ri").text + " "
      + nodes[i].selectSingleNode("bunzi").text;

   tableRow = document.createElement("TR");
   tableBody.appendChild(tableRow);
   tableCell = document.createElement("TD");
   tableRow.appendChild(tableCell);
   tableRow.runtimeStyle.cursor = "hand";
   tableCell.innerHTML = st;
  }

</script>
</head>

<form name="registerForm" >
<table border="1" align="center" width="500" >
<tr>
  <td>우편번호 :
   <input type="text" id="zip1" name="zip1" readonly size="3" /> -
   <input type="text" id="zip2" name="zip2" readonly size="3" />
   <input type="button" id="FindZipCodeBtn" name="FineZipCodeBtn" value="우편번호 찾기" onclick="openDIV('FindZipCodePanel')" />
  </td>
</tr>
<tr>
  <td>주 소 : <input type="text" id="addr" name="addr" readonly size="40" /></td>
</tr>
<tr>
  <td>상세 주소 : <input type="text" id="addrDetail" name="addrDetail" size="40" /></td>
</tr>
</table>

<TABLE width="100%" align="center" border="1" cellpadding="0" cellspacing="0">
<TR>
  <TD align="right" bgColor="#D7DED6" height="13"><a href="javascript:closeDIV('FindZipCodePanel');">X</a></TD>
</TR>
<TR>
  <TD>주소를 입력하세요</TD>
</TR>
<TR>
  <TD><input type="text" name="query" onkeyup='zipcode_check(this.form)' ondblclick=""/></TD>
</TR>
<TR>
  <TD><div id="addrTableDIV" style="OVERFLOW-Y:scroll;WIDTH:100%;POSITION:relative;HEIGHT:200px;BORDER-TOP: gray 1px solid;">
   <table id="addrTbl" border="1" align="center" width="100%" ></table></div></TD>
</TR>
</TABLE>

</DIV>

<body>

</body>
</html>

Query String 을 통해 xml 형식으로 주소를 넘겨주는 JSP 파일

FileName : SearchAddr.jsp

<?xml version="1.0" encoding="ksc5601"?>
<Address>
<%@ page language="java"
contentType="text/xml; charset=euc-kr"
import="java.sql.*"
%><%

request.setCharacterEncoding("euc-kr");

String dong = request.getParameter("dong");

if(dong == null){
  return;
}

Connection conn = null;
Statement stmt = null;
ResultSet rs = null;

try{

  conn = DriverManager.getConnection("proxool.AjaxSample");
  stmt = conn.createStatement();

  String query = "select * from zipcode where dong like binary '%" + dong + "%'";

  rs = stmt.executeQuery(query);

  while(rs.next()){
%>
<addr>
<zipcode><%= rs.getString("zipcode") %></zipcode>
<sido><%= rs.getString("sido") %></sido>
<gugun><%= rs.getString("gugun") %></gugun>
<dong><%= rs.getString("dong") %></dong>
<ri><%= rs.getString("ri") %></ri>
<bunzi><%= rs.getString("bunzi") %></bunzi>
<seq><%= rs.getString("seq") %></seq>
</addr>
<%
  }

rs.close();
}catch(Exception e){
  e.printStackTrace();
}finally{
  if(stmt != null) stmt.close();
  if(conn != null) conn.close();
}
%></Address>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'DHTML > AJAX' 카테고리의 다른 글

[참고할곳] http://www.endless.com/ (0)	2007/01/19
The Lightbox Effect without Lightbox (0)	2007/01/11
http://prototype-window.xilinus.com/ (0)	2006/11/30
[ajax] 우편번호 찾기 초보버전 (2)	2005/08/22
[펌] AJAX (Asynchronous Javascript and XML) (0)	2005/06/28
ajax 볼것.... (0)	2005/06/28

Posted by tornado

0 | 2

[펌] AJAX (Asynchronous Javascript and XML)

DHTML/AJAX 2005/06/28 14:44

최근 웹애플리케이션의 최대화두인 Ajax에 관련된 글들을 스크랩 해 봤다.

이미 구글에서 가능성이 입증되었으니 그 활약이 기대된다.

RIA(Rich Internet Application) 환경에서 Flash의 대안이 될 수 있을까?

'DHTML > AJAX' 카테고리의 다른 글

[참고할곳] http://www.endless.com/ (0)	2007/01/19
The Lightbox Effect without Lightbox (0)	2007/01/11
http://prototype-window.xilinus.com/ (0)	2006/11/30
[ajax] 우편번호 찾기 초보버전 (2)	2005/08/22
[펌] AJAX (Asynchronous Javascript and XML) (0)	2005/06/28
ajax 볼것.... (0)	2005/06/28

Posted by tornado

0 | 0

ajax 볼것....

DHTML/AJAX 2005/06/28 14:38

https://bpcatalog.dev.java.net/nonav/ajax/textfield-jsf/frames.html

볼께 계속 쌓이고 있음...

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'DHTML > AJAX' 카테고리의 다른 글

[참고할곳] http://www.endless.com/ (0)	2007/01/19
The Lightbox Effect without Lightbox (0)	2007/01/11
http://prototype-window.xilinus.com/ (0)	2006/11/30
[ajax] 우편번호 찾기 초보버전 (2)	2005/08/22
[펌] AJAX (Asynchronous Javascript and XML) (0)	2005/06/28
ajax 볼것.... (0)	2005/06/28

Posted by tornado

0 | 0

tornado 의 블로그

카테고리

태그목록

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

링크

글 보관함

달력

072010 이전 다음

'DHTML/AJAX'에 해당되는 글 8건

http://serennz.sakura.ne.jp/toybox/lightbox/?en

'DHTML > AJAX' 카테고리의 다른 글

Trackback : http://www.javarush.com/trackback/1171424745

http://www.christofwagner.com/

'DHTML > AJAX' 카테고리의 다른 글

Trackback : http://www.javarush.com/trackback/1171424742

[참고할곳] http://www.endless.com/

'DHTML > AJAX' 카테고리의 다른 글

Trackback : http://www.javarush.com/trackback/1171424733

The Lightbox Effect without Lightbox

'DHTML > AJAX' 카테고리의 다른 글

Trackback : http://www.javarush.com/trackback/1171424728

http://prototype-window.xilinus.com/

'DHTML > AJAX' 카테고리의 다른 글

Trackback : http://www.javarush.com/trackback/1171424715

[ajax] 우편번호 찾기 초보버전

'DHTML > AJAX' 카테고리의 다른 글

Trackback : http://www.javarush.com/trackback/1171424526

[펌] AJAX (Asynchronous Javascript and XML)

'DHTML > AJAX' 카테고리의 다른 글

Trackback : http://www.javarush.com/trackback/1171424480

ajax 볼것....

'DHTML > AJAX' 카테고리의 다른 글

Trackback : http://www.javarush.com/trackback/1171424479