'스크립트'에 해당되는 글 3건

  1. 2011.06.16 탭메뉴 1
  2. 2010.05.04 슬라이드쇼+인터벌전환+카테고리연동(ie전용)
  3. 2010.05.03 ie6에서 png파일 처리방법.
web standard/jquery2011. 6. 16. 16:07

탭메뉴

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
        $("ul.tab li").click(function() {
        var num = $("ul.tab li").index($(this));
        $("ul.tab li.on").removeClass("on");
        $(this).addClass("on");
        $("div.tabCont > div").hide();
        $($("div.tabCont div")[num]).show();
    });
    $("ul.tab li:first").trigger('click');
});
</script>

<ul class="tab">
     <li>tab01</li>
     <li>tab02</li>
     <li>tab03</li>
</ul>
<div class="tabCont">
     <div>cont 01</div>
     <div>cont 02</div>
     <div>cont 03</div>
</div>


tab_jquery.html

tab_jquery_img.html

tab_jquery_img1.html


'web standard > jquery' 카테고리의 다른 글

특정영역 인쇄  (0) 2011.07.18
레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
이미지롤오버  (0) 2011.04.06
가로&세로 슬라이드  (0) 2011.04.04
jquery 예제모음  (0) 2011.03.22
Posted by 수라
web standard/script2010. 5. 4. 15:59

슬라이드쇼+인터벌전환+카테고리연동(ie전용)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script type="text/javascript">
/* <![CDATA[ */
curMenu = -1;
timer = 0;
goInterval = 1500;
function goMenu(menuNum) {
    var menuBox = document.getElementById('menu').childNodes;
    var contBox = document.getElementById('cont').childNodes;
    for(i=0;i<menuBox.length;i++){
        var menuItem = menuBox[i].getElementsByTagName("a")[0];
        if(i == menuNum){
            menuItem.style.color = "red";
            contBox[i].style.display = "block";
        }else{
            menuItem.style.color = "#222";
            contBox[i].style.display = "none";
        }
    }
    curMenu = menuNum;

    if (timer == 0){
        t=setTimeout("goNext();",goInterval);
        timer = 1;
    } else if (timer == 1) {
        clearTimeout(t);
        t=setTimeout("goNext();",goInterval);
    }
}
function goPrev() {
    var menuBox = document.getElementById('menu').childNodes;
    menuLink = menuBox.length - 1;
    curMenu--;
    if(curMenu < 0) {
        curMenu = menuLink;
    }
    goMenu(curMenu);
}

function goNext() {
    var menuBox = document.getElementById('menu').childNodes;
    curMenu++;
    if(curMenu == menuBox.length) {
        curMenu = 0;
    }
    goMenu(curMenu);
}
/* ]]> */
</script>
<style type="text/css">
* {list-style:none;font-size:12px;color:#333333;font-family:gulim;}
a {text-decoration:none;}
ul {float:left;}
li {float:left;margin-right:10px;height:20px;}

ul#menu li a {color:#999999;}
div#cont {}
div#cont div {display:none;}
</style>
</head>

<body>
<ul id="menu">
    <li><a href="javascript:goMenu(0);">메뉴0</a></li>
    <li><a href="javascript:goMenu(1);">메뉴1</a></li>
    <li><a href="javascript:goMenu(2);">메뉴2</a></li>
    <li><a href="javascript:goMenu(3);">메뉴3</a></li>
    <li><a href="javascript:goMenu(4);">메뉴4</a></li>
</ul>
<ul id="nav">
    <li><a href="javascript:goPrev();">이전</a></li>
    <li><a href="javascript:goNext();">다음</a></li>
</ul>
<br style="clear:both;" />
<div id="cont">
    <div>내용0</div>
    <div>내용1</div>
    <div>내용2</div>
    <div>내용3</div>
    <div>내용4</div>
</div>
<script type="text/javascript">goNext();</script>
</body>
</html>

'web standard > script' 카테고리의 다른 글

ie6에서 png처리방법  (2) 2010.05.13
pack된 js unpacker해주는 사이트  (0) 2010.05.12
ie6에서 png파일 처리방법.  (0) 2010.05.03
레이어 하나만 또는 여러개 펼침제어(갯수제한없음)  (0) 2010.03.22
레이어 온오프 제어  (0) 2010.03.22
Posted by 수라
web standard/script2010. 5. 3. 16:42

ie6에서 png파일 처리방법.

[스크립트]
<script type="text/javascript">
function setPng24(obj) {
 obj.width=obj.height="1";
 obj.className=obj.className.replace(/\bpng24\b/i,"");
 obj.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
 obj.src="";
 return "";
}
</script>

[스타일]
<style type="text/css">
.png24 {tmp:expression(setPng24(this));}
</style>


'web standard > script' 카테고리의 다른 글

pack된 js unpacker해주는 사이트  (0) 2010.05.12
슬라이드쇼+인터벌전환+카테고리연동(ie전용)  (0) 2010.05.04
레이어 하나만 또는 여러개 펼침제어(갯수제한없음)  (0) 2010.03.22
레이어 온오프 제어  (0) 2010.03.22
딜레이를 둔 마우스오버 메뉴  (0) 2010.03.22
Posted by 수라

티스토리툴바