'JavaScript'에 해당되는 글 3건

  1. 2007.10.22 펼첬다 닫히는 고런~ 꼬라지~ 2탄!!! (2)
  2. 2007.10.01 펼첬다 닫히는 고런~ 꼬라지~
  3. 2007.10.01 얍실한 paging script
Web/JavaScript2007.10.22 16:59

펼첬다 닫히는 고런~ 꼬라지~ 2탄!!!

이전 스크립트는 리스트 갯수를 명확히 알아야 에러가 안나게 돌았으나
이번꺼는 어느정도 예상하는 max값을 넣어주고 그 이상이 아니라면
에러없이 돌수 있게 null값인가 아닌가를 비교해줬다.
그리고 한 사이트에 요딴식의 코드가 많이 들어갈 지도 모르기때문에
listClick()만 페이지에 심어주고 list()는 공통으로 뺄 수 있게
maxCnt, dname으로 리스트 갯수나 id이름을 밖으로 빼서 제어할 수 있게 했다.

대략 간단한거지만 팀장님께 개념부터 다시 설명들어가며
옴팡지게 배웠다 뿌하하하하!
-_- 과연.. 다음번에는 개념 정리가 되어있을 것인가....

<script type="text/javascript">
function listClick(num) {
   var maxCnt = 20;
   var dname = "listView";
   list(num,maxCnt,dname);
}

function list(num,maxCnt,dname) {
   for (var i=1;i<=maxCnt;i++) {
       var boxObj = document.getElementById(dname+i);
       if( boxObj == null ) { continue; }
       boxObj.style.display = (num == i) ? "" : "none";
   }   
}
</script>


<a href="javascript:listClick(1);">1~</a>
<a href="javascript:listClick(2);">2~</a>
<a href="javascript:listClick(3);">3~</a>
<a href="javascript:listClick(4);">4~</a>

<div id="listView1" style="display:none">1</div>
<div id="listView2" style="display:none">2</div>
<div id="listView3" style="display:none">3</div>
<div id="listView4" style="display:none">4</div>



'Web > JavaScript' 카테고리의 다른 글

펼첬다 닫히는 고런~ 꼬라지~ 2탄!!!  (2) 2007.10.22
png와 함께해요~  (0) 2007.10.02
펼첬다 닫히는 고런~ 꼬라지~  (0) 2007.10.01
얍실한 paging script  (0) 2007.10.01
Posted by bitty
TAG JavaScript, JavaScript 팁..
Trackback 0 Comment 2
Web/JavaScript2007.10.01 18:02

펼첬다 닫히는 고런~ 꼬라지~

이번에 작업했던 사이트에서 공지사항이 DB로 연동되지 않고 HTML로만 작업했다.

(음... 별로 공지할 것들이 없었나보다.. 'ㅂ')

그때 짠 스크립트인데 갱장히 간단하면서 가끔 요딴 꼬라지로 해달라는 경우가 종종있어 함 올려본당.

 

리스트에서 제목을 클릭하면 하단에 관련 내용이 간략하게 뿌려지고 다른 제목을 클릭하면 이전에 펼처졌던게 닫혀지는 우리가 늘상 보아오고 매우 단순한 스크립트이다.

항상 어디서 퍼다 쓰다가 허접하지만 함 직접 만들어봤는데..

이 스크립트의 최대 단점은 개시물의 수를 알아야 한다는것~

올려진 개시물의 최대치를 알아야 그만큼 비교를해서 닫아준다.

 

<script language="javascript">

function listClick(num) {   
 
 for (var i=1;i<=4;i++) { 
  var boxObj = document.getElementById("listView"+i);
  if( num == i ) boxObj.style.display = ""; else boxObj.style.display = "none";
 }

}

</script>

 

<a href="javascript:listClick(1);">클릭해보라지~</a>

<div id="listView1" style="display:"></div>

 

요런식으로 게시물  수 만큼 링크와 보여지는 내용이 들어간 div 혹은 기타 택스트 박스들이랑 한셋트로 쓰시면 된다.

 

 

'Web > JavaScript' 카테고리의 다른 글

펼첬다 닫히는 고런~ 꼬라지~ 2탄!!!  (2) 2007.10.22
png와 함께해요~  (0) 2007.10.02
펼첬다 닫히는 고런~ 꼬라지~  (0) 2007.10.01
얍실한 paging script  (0) 2007.10.01
Posted by bitty
TAG JavaScript, JavaScript 팁..
Trackback 0 Comment 0
Web/JavaScript2007.10.01 17:58

얍실한 paging script

요놈은 이전에 모 프로젝트를 유지보수할때 나의 귀차니즘으로 만들어진 애다.

(물론 늘 허접하다.'ㅂ')

갑자기 겔러리 게시판 같은 페이지가 생겼는데 3페이지밖에 안된다고 개발은 붙지 않는다기에

3개 페이지를 만들까 하다가 급 귀차니즘이 발동하여 한페이지에 다 때려넣기 위해

주먹구구로 짜봤었다. 그래도 나름 짜놓구선 뿌듯해했었다는~ ㅋㅋ


그때 겔러리 관련 팝업 연동해서 띄우는 무언가도 함께 짰던 것 같은뎅...

(물론 그것도 일일이 팝업창을 만들기 시러허 한창에 쑤셔넣기 위한 귀차니즘에서 발생한...'ㅂ';;)

머.. 어디갔는지 모르겠다. 다음에 깔끔하게 함 만들어볼까 한다.

(물론 그래도 허접할 것이다. 그래도 난 뿌듯하다~ 뿌하하하하~)


<script language="javascript">

function page(num){

 for (var i=1;i<=3; i++){
  var GObj = document.getElementById("gallery_" + i);
  var PObj = document.getElementById("P_" + i);
 
  if ( i == num ) {
   GObj.style.display = "";
   PObj.style.color = "#68AECD"
   PObj.style.fontWeight = "bold";
   
  } else {
   GObj.style.display = "none";
   PObj.style.color = "#888888"
   PObj.style.fontWeight = "";

  }
 }

}

</script>

</head>

<body style="margin:0 0 0 0">

<div ID="gallery_1" style="display:">
 1page
</div>

<div ID="gallery_2" style="display:none">
 2page
</div>

<div ID="gallery_3" style="display:none">
 3page
</div>


<a href="javascript:page(1);" onFocus="this.blur()"><font id="P_1" style="color:#68AECD;font-weight:bold;">1</font></a> |
<a href="javascript:page(2);" onFocus="this.blur()"><font id="P_2">2</font></a> |
<a href="javascript:page(3);" onFocus="this.blur()"><font id="P_3">3</font></a>

'Web > JavaScript' 카테고리의 다른 글

펼첬다 닫히는 고런~ 꼬라지~ 2탄!!!  (2) 2007.10.22
png와 함께해요~  (0) 2007.10.02
펼첬다 닫히는 고런~ 꼬라지~  (0) 2007.10.01
얍실한 paging script  (0) 2007.10.01
Posted by bitty
TAG JavaScript, javascript paging, JavaScript 팁..
Trackback 0 Comment 0