출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=56601
- div 및 getElementById 로 지정가능한 요소들의 제어를 위해서 제작했습니다.
- 간단한 샘플 코드가 되도록 내용을 약간 수정하였습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title> welcome wolf.zc.bz </title>
<script language="javascript">
var StyleCtrl = {};
StyleCtrl=function()
{
}
StyleCtrl.prototype={
show:function(TargetObj)
{
this.objTarget = document.getElementById(TargetObj);
this.objTarget.style.visibility = "visible";
},
hidden:function(TargetObj)
{
this.objTarget = document.getElementById(TargetObj);
this.objTarget.style.visibility = "hidden";
},
resize:function(TargetObj, valWidth, valHeight)
{
this.objTarget = document.getElementById(TargetObj);
this.objTarget.style.width = valWidth+"px";
this.objTarget.style.height = valHeight+"px";
},
reposition:function(TargetObj, xVal, yVal)
{
this.objTarget = document.getElementById(TargetObj);
this.objTarget.style.left = xVal+"px";
this.objTarget.style.top = yVal+"px";
}
/**/
}// end prototype
var objStyle = new StyleCtrl();
</script>
</head>
<body>
<div id="test">
test
</div>
<script language="javascript">
// test Div 보이기
objStyle.show("test");
// test Div 숨기기
objStyle.hidden("test");
// test Div 크기 800( width ) X 600( height )
objStyle.resize("test", 800, 600);
// test Div 위치 100( x좌표 ) , 50( y좌표 )
objStyle.reposition("test", 100, 50);
</script>
</body>
</html>
|
|
    Project-Wyvern |
07-10-09 10:23 |
visibility 보다는 display가 좋지 않나요?
document.getElementById도 따로 함수로 만드는게 어떨까요 매번 저렇게 길게 치기가 -_-; |
| visibility 보다는 display가 좋지 않나요?
document.getElementById도 따로 함수로 만드는게 어떨까요 매번 저렇게 길게 치기가 -_-; |
| |
|
   은랑 |
07-10-09 13:09 |
visibility / display 생각을 못해본 부분이네요... 정말 감사합니다...ㅠㅠ
구현하기 급급한...허접의 한계..ㅠㅠ
차이점이 정확이 어떤부분인 힌트만 주시면 안될까요...ㅠㅠ |
| visibility / display 생각을 못해본 부분이네요... 정말 감사합니다...ㅠㅠ
구현하기 급급한...허접의 한계..ㅠㅠ
차이점이 정확이 어떤부분인 힌트만 주시면 안될까요...ㅠㅠ |
| |
|
   사랑굳 |
07-10-10 14:11 |
| 차이점은.. 자리를 차지 하는냐 안하느냐 테이블이 하나 있따면 visibility 는 그부분이 공간이 뻥 뚫립니다. 자리를 잡아먹고 있어서 다른녀석들이 그부분으로 못 오죠.. |
| 차이점은.. 자리를 차지 하는냐 안하느냐 테이블이 하나 있따면 visibility 는 그부분이 공간이 뻥 뚫립니다. 자리를 잡아먹고 있어서 다른녀석들이 그부분으로 못 오죠.. |
| |
|
| 은랑 |
07-10-10 21:37 |
감사합니다.
그부분에 대한 선택이 가능하도록 한번쯤 생각을 해봐야 겠습니다.
필요한 위치에 출력하고자 하는 부분을 우선적으로 생각해서뤼
absolute 지정 해놓고 사용한다고 생각했는데 제 생각이 짧았습니다.
감사합니다. |
| 감사합니다.
그부분에 대한 선택이 가능하도록 한번쯤 생각을 해봐야 겠습니다.
필요한 위치에 출력하고자 하는 부분을 우선적으로 생각해서뤼
absolute 지정 해놓고 사용한다고 생각했는데 제 생각이 짧았습니다.
감사합니다. |
|
|
   칼솜 |
07-10-09 10:27 |
| 표현 기법이 재미있습니다. ^^ |
| 표현 기법이 재미있습니다. ^^ |
|
|
 공대여자 |
07-10-09 10:51 |
-.-?
이게 무엇을 하는건지 설명을 적어주셔야 tip/tech에 올릴 수 있을 것 같네요. |
| -.-?
이게 무엇을 하는건지 설명을 적어주셔야 tip/tech에 올릴 수 있을 것 같네요. |
|
|
   라면에소주 |
07-10-09 11:25 |
| 그냥 div 제어하는 클래스 같은데요... 아님말구... |
| 그냥 div 제어하는 클래스 같은데요... 아님말구... |
|
|
| 은랑 |
07-10-09 11:49 |
----- 공대여자님 -----
죄송합니다....제가 깜빡...ㅠㅠ 봐주세여..
- div 및 getElementById 로 지정가능한 요소들의 제어를 위해서 제작했습니다.
- 간단한 샘플 코드가 되도록 내용을 약간 수정하였습니다.
----- Project-Wyvern 님 -----
-조언 감사합니다.
-지적하신 부분을 함수로 만들까 하다가...
-잘못하면 요소마다 객체화 해야하는 경우가 있을 수 있다고 생각되어서....
-아래와 같이 한줄로 끝날 수 있는 코딩이
-개체의 변경에 따라 코딩량의 증가가 발생할지 모른다는...
-제 짧은 생각에 그냥..노가다를..ㅠㅠ
-<script>objStyle.reposition:function(TargetObj, xVal, yVal);</script>
----- 칼솜님 -----
-감사합니다.
-잘못된 점이나 고쳐야 할 부분등이 보이시면 조언을 좀 부탁드리겠습니다......ㅠㅠ
-제가 워낙 허접한 관계로...ㅠㅠ |
| ----- 공대여자님 -----
죄송합니다....제가 깜빡...ㅠㅠ 봐주세여..
- div 및 getElementById 로 지정가능한 요소들의 제어를 위해서 제작했습니다.
- 간단한 샘플 코드가 되도록 내용을 약간 수정하였습니다.
----- Project-Wyvern 님 -----
-조언 감사합니다.
-지적하신 부분을 함수로 만들까 하다가...
-잘못하면 요소마다 객체화 해야하는 경우가 있을 수 있다고 생각되어서....
-아래와 같이 한줄로 끝날 수 있는 코딩이
-개체의 변경에 따라 코딩량의 증가가 발생할지 모른다는...
-제 짧은 생각에 그냥..노가다를..ㅠㅠ
-<script>objStyle.reposition:function(TargetObj, xVal, yVal);</script>
----- 칼솜님 -----
-감사합니다.
-잘못된 점이나 고쳐야 할 부분등이 보이시면 조언을 좀 부탁드리겠습니다......ㅠㅠ
-제가 워낙 허접한 관계로...ㅠㅠ |
| |
|
  공대남자 |
07-10-09 12:06 |
| 허접하면 여따 올리지말구 qna 로 ㄱㄱ싱 |
| 허접하면 여따 올리지말구 qna 로 ㄱㄱ싱 |
| |
|
| 은랑 |
07-10-09 12:51 |
알겠습니다 아예 내용 지우도록 하지요
허접한 주제에 올려놔서 대단히 죄송합니다.
단 공대남자님의 높은 실력에 조언을 먼저 듣고 제 스스로 삭제 하겠습니다.
지적 및 개선 사항 및 방법 그리고 개선했을때 기대효과 등에 대한 지적을 부탁드리겠습니다. |
| 알겠습니다 아예 내용 지우도록 하지요
허접한 주제에 올려놔서 대단히 죄송합니다.
단 공대남자님의 높은 실력에 조언을 먼저 듣고 제 스스로 삭제 하겠습니다.
지적 및 개선 사항 및 방법 그리고 개선했을때 기대효과 등에 대한 지적을 부탁드리겠습니다. |
| |
|
| 공대남자 |
07-10-09 12:58 |
농담여 죄송 -_- 열낼필요없자나요 ;;; 농담도 못하나 ;;
글고 처음엔 -_- qna 내용인줄 알았어요 요위 글내용이 몇개 추가된거 같은데;;
처음은 위애 내용과 달랐지요 ㅡㅡ?
그거 보고 그런거니 양해하시구 ; |
| 농담여 죄송 -_- 열낼필요없자나요 ;;; 농담도 못하나 ;;
글고 처음엔 -_- qna 내용인줄 알았어요 요위 글내용이 몇개 추가된거 같은데;;
처음은 위애 내용과 달랐지요 ㅡㅡ?
그거 보고 그런거니 양해하시구 ; |
|
|
  앙드레침묵 |
07-10-09 15:48 |
열심히 만든사람 거시기 허게
말하는게참 거시기 허네 |
| 열심히 만든사람 거시기 허게
말하는게참 거시기 허네 |
| |
|
| 공대남자 |
07-10-09 17:31 |
뭘 알지도 못하면서 지껄이셔요
가뜩이나 짜증나 죽겠구만 처음에 저글나왓을땐 아무것도 없고
html 도 없어서 하는 소리였습니다.
당사자 아니면 껴들지마세요.
내가 당사자한테 사과했는데 당신이 뭔상관인데
다른사이트는 안그러는데 이싸이트만 껴들어 짱나게.
님할일이나 하세요. |
| 뭘 알지도 못하면서 지껄이셔요
가뜩이나 짜증나 죽겠구만 처음에 저글나왓을땐 아무것도 없고
html 도 없어서 하는 소리였습니다.
당사자 아니면 껴들지마세요.
내가 당사자한테 사과했는데 당신이 뭔상관인데
다른사이트는 안그러는데 이싸이트만 껴들어 짱나게.
님할일이나 하세요. |
|
|
| 앙드레침묵 |
07-10-09 18:10 |
농담여 죄송 -_- 열낼필요없자나요 ;;; 농담도 못하나 ;;
몰라서 그랬자나요
그래서 그런거니 양해하시구 ; |
| 농담여 죄송 -_- 열낼필요없자나요 ;;; 농담도 못하나 ;;
몰라서 그랬자나요
그래서 그런거니 양해하시구 ; |
| |
|
| 공대남자 |
07-10-09 18:17 |
| 이뭐병 ;;;; ㅋㅋㅋㅋㅋ |
| 이뭐병 ;;;; ㅋㅋㅋㅋㅋ |
| |
|
| 앙드레침묵 |
07-10-09 18:21 |
| 땍 병이라니~ 형한테 혼난다~ |
| 땍 병이라니~ 형한테 혼난다~ |
| |
|
 Mersia |
07-10-10 10:41 |
| 센스쟁이 |
| 센스쟁이 |
| |
|
| 아쿠아™ |
07-10-09 18:27 |
| ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ |
| ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ |
|
|
 ALC |
07-10-09 21:11 |
매너.. 예의.. 이해..
이런등등이 필요한 싯점일듯 싶습니다.
오해는 있을수 있지만
오해보다는 이해를 먼저 하는것이 좋은것 같습니다.
한 걸음 물러나서 생각해보면 모두 소중한 사람들입니다. |
| 매너.. 예의.. 이해..
이런등등이 필요한 싯점일듯 싶습니다.
오해는 있을수 있지만
오해보다는 이해를 먼저 하는것이 좋은것 같습니다.
한 걸음 물러나서 생각해보면 모두 소중한 사람들입니다. |
|
|
| ㅏㅔㅣㅗㅜ |
07-10-10 09:14 |
StyleCtrl.prototype={
show:function(TargetObj)
{
this.objTarget = document.getElementById(TargetObj);
this.objTarget.style.visibility = "visible";
},
이런 표현방식에 조금 거부감있었는데...
이거 보니 도전해 볼만 한데요 ㅋ |
| StyleCtrl.prototype={
show:function(TargetObj)
{
this.objTarget = document.getElementById(TargetObj);
this.objTarget.style.visibility = "visible";
},
이런 표현방식에 조금 거부감있었는데...
이거 보니 도전해 볼만 한데요 ㅋ |
|
|
| Shai |
07-10-10 17:14 |
잘봤습니다. 저도 비슷한 방법으로 JS를 구현하고 있는데..
객체를 생성시에 window.onload 이벤트 발생시 JS 객체를 생성하는게 나을듯 합니다.
window.onload = function () { var objStyle = new StyleCtrl(); }
JS는 onload후에 생성되거나 이벤트를 붙여주면 html 코드와 js 코드가 많이 분리되더라구요. 또한 페이지 퍼포먼스 부분으로 볼때도 좋다구 봅니다.
그리고 생성자 부분에 StyleCtrl=function() { }
빈란으로 놨는데.. 여러번 객체를 원하는 옵션값으로 생성해서 쓰기 쉽게.. 인자값을 받는건 어떤가 해서요.
ex> StyleCtrl ( config ) { this.init ( config ); }
Style.prototype = {
...
init : function ( config ) {
this.confg = config ;
....
}
}
var Style = new StyleCtrl (
{
div : { id : 'shai', tag : 'div', ... },
classes : { on : '+on', off : '_off' }
}
);
이런식으로요.. |
| 잘봤습니다. 저도 비슷한 방법으로 JS를 구현하고 있는데..
객체를 생성시에 window.onload 이벤트 발생시 JS 객체를 생성하는게 나을듯 합니다.
window.onload = function () { var objStyle = new StyleCtrl(); }
JS는 onload후에 생성되거나 이벤트를 붙여주면 html 코드와 js 코드가 많이 분리되더라구요. 또한 페이지 퍼포먼스 부분으로 볼때도 좋다구 봅니다.
그리고 생성자 부분에 StyleCtrl=function() { }
빈란으로 놨는데.. 여러번 객체를 원하는 옵션값으로 생성해서 쓰기 쉽게.. 인자값을 받는건 어떤가 해서요.
ex> StyleCtrl ( config ) { this.init ( config ); }
Style.prototype = {
...
init : function ( config ) {
this.confg = config ;
....
}
}
var Style = new StyleCtrl (
{
div : { id : 'shai', tag : 'div', ... },
classes : { on : '+on', off : '_off' }
}
);
이런식으로요.. |
| |
|
| 은랑 |
07-10-11 17:37 |
window.onload = function () { var objStyle = new StyleCtrl(); } 실행하니..
objStyle 을 찾을 수 없다는 에러가 발생하는 데요~~
좀더 자세한 설명 부탁드리겠습니다. |
| window.onload = function () { var objStyle = new StyleCtrl(); } 실행하니..
objStyle 을 찾을 수 없다는 에러가 발생하는 데요~~
좀더 자세한 설명 부탁드리겠습니다. |
|
|
| 지클 |
07-10-10 19:54 |
감사합니당~ 저같은 초보에겐 많은 도움이되는군요~
아참 그리고 reposition 함수중에서 혹시나 모를 실수를위해서
this.objTarget.style.position = "absolute";
를 넣어주면 어떨까요?? |
| 감사합니당~ 저같은 초보에겐 많은 도움이되는군요~
아참 그리고 reposition 함수중에서 혹시나 모를 실수를위해서
this.objTarget.style.position = "absolute";
를 넣어주면 어떨까요?? |
|
|
 이혁준 |
07-10-11 09:36 |
StyleCtrl=function(TargetObj)
{
this.objTarget = document.getElementById(TargetObj);
}
StyleCtrl.prototype={
show:function(TargetObj)
{
this.objTarget.style.visibility = "visible";
},
.
.
.
윗분처럼 생성자에서 한번 받으면 중간 함수에서 매번 객체를 구할 필요 없죠
자바 스크립트에선 prototype 이 class 객체화 할수 있게 하는 방법중에 하나로 알고 있습니다. |
| StyleCtrl=function(TargetObj)
{
this.objTarget = document.getElementById(TargetObj);
}
StyleCtrl.prototype={
show:function(TargetObj)
{
this.objTarget.style.visibility = "visible";
},
.
.
.
윗분처럼 생성자에서 한번 받으면 중간 함수에서 매번 객체를 구할 필요 없죠
자바 스크립트에선 prototype 이 class 객체화 할수 있게 하는 방법중에 하나로 알고 있습니다. |
| |
|
| 은랑 |
07-10-11 11:39 |
지적 감사합니다.
네 위에서 같은 질문에 한번 답을 드렸는데...
뭐 제가 허접해서 이긴 하지만...
예를들어 test1 test2 이렇게 두개의 Div 가 있을 경우
StyleCtrl=function(TargetObj)
{
this.objTarget = document.getElementById(TargetObj);
}
이 방식을 사용하면
아래1 과 같이 코딩하게 되지 않을까요...?
TargetObj 를 지정하기 위한 코드가 들어가야 할것 같아서..
또는 test1을 요소로 하는 새로운 객체를 아래2 와 같은 방법으로 만들어야 하지 않나요..?
----- 아래 1 -----
<script>
objStyle.objTarget = document.getElementById("test1");
objStyle.reposition:function(xVal, yVal);
</script>
----- 아래 2 -----
<script>
var objStyle1 = new objStyle("test1");
objStyle1.reposition:function(xVal, yVal);
</script>
제가 다른 방법을 몰라서 그렇겠지만...
아래 3 과 같이 한번 지정하고 나머지는 class 안에서 처리되거라 해버리는 편이 더
매번 객체를 생성하거나 또는 직접 Element object 를 지정해주는 방식보다
업무량이 좀더 줄어들 수 있지 않을까 하는 생각에 그냥 각 prototype 마다 별도로
document.getElementById(TargetObj); 를 실행하도록 작성하였습니다.
----- 아래 3 -----
<script>
objStyle.reposition:function(TargetObj, xVal, yVal);
</script>
아래 3 보다 더 간단히 할 수 있는 방법을 알고 계시면 죄송합니다만...공개좀...^^;;;;
제가 좀 허접하다보니....ㅠㅠ
부탁드리겠습니다. | |
