web standard/jquery2011. 8. 8. 22:53

탭메뉴+prev, next

[SCRIPT]
<script type="text/javascript">
//탭메뉴
var num;
$(document).ready(function() {
    $("div.tabCont > div").hide().filter("div:first-child").show();
    //$("ul.tabMenu01 li:first-child").addClass("on");
    $("ul.tabMenu01 li").click(function() {
        num = $("ul.tabMenu01 li").index($(this));
        $("ul.tabMenu01 li.on").removeClass("on");
        $(this).addClass("on");
        $("div.tabCont > div.cont").hide();
        $($("div.tabCont div.cont")[num]).show();
    });
    $("ul.paging li.prev").click(function() {
        num--;
        if (num < 0) {num = 0; };
        $("ul.tabMenu01 li.on").removeClass("on");
        $($("ul.tabMenu01 li")[num]).addClass("on");
        $("div.tabCont > div.cont").hide();
        $($("div.tabCont div.cont")[num]).show();
    });
    $("ul.paging li.next").click(function() {
        num++;
        var max=($("ul.tabMenu01 li").size())-1;
        if(num > max) {num = max; };
        $("ul.tabMenu01 li.on").removeClass("on");
        $($("ul.tabMenu01 li")[num]).addClass("on");
        $("div.tabCont > div.cont").hide();
        $($("div.tabCont div.cont")[num]).show();
    });
    $("ul.tabMenu01 li:first").trigger("click");
});
</script>

[HTML]
<ul class="tabMenu01 tabCeo clfix">
    <li class="tab01">Greeting</li>
    <li class="tab02">Profile</li>
    <li class="tab01">Greeting</li>
    <li class="tab02">Profile</li>
</ul>
<ul class="paging">
    <li class="prev">prev</li>
    <li class="next">next</li>
</ul>
<div class="tabCont">
    <div class="cont">
        1
    </div>
    <div class="cont">
        2
    </div>
    <div class="cont">
        3
    </div>
    <div class="cont">
        4
    </div>
</div>

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

로그인 입력폼 description 제어  (0) 2011.11.09
이미지 슬라이드  (0) 2011.11.08
특정영역 인쇄  (0) 2011.07.18
레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
탭메뉴  (1) 2011.06.16
Posted by 수라
web standard/jquery2011. 7. 18. 15:35

특정영역 인쇄

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Print Portion Example</title>
<style type="text/css">
* {margin:0; padding:0; }
img {border:none;vertical-align:top;}
@media print {
    body div {display:none;}
    body .printable {display:block;}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div><img src="images/img_print110718_01.jpg" width="661" height="40" alt="" /></div>
<div id="printArea"><img src="images/img_print110718_02.jpg" width="661" height="320" alt="" /></div>
<div><img src="images/img_print110718_03.jpg" width="661" height="70" usemap="#link1" alt="" /></div>
<map id="link1" name="link1">
    <area shape="rect" href="#" onclick="divPrint();" coords="275,1,417,39" alt="" />
</map>
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses printArea.
$("#printArea").addClass("printable");
window.print();
}
</script>
</body>
</html>

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

이미지 슬라이드  (0) 2011.11.08
탭메뉴+prev, next  (0) 2011.08.08
레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
탭메뉴  (1) 2011.06.16
이미지롤오버  (0) 2011.04.06
Posted by 수라
web standard/jquery2011. 7. 15. 11:31

레이어팝업 브라우저 가운데 띄우기

$(document).ready(function() {
    $("#ifrmPopup").hide();
    $(".voteList li img").click(function() {
        var top = ( $(window).scrollTop() + ($(window).height() - $('#ifrmPopup').height()) / 2 )
        var left = ( $(window).scrollLeft() + ($(window).width() - $('#ifrmPopup').width()) / 2 )
        $("#ifrmPopup").css('top', top);
        $("#ifrmPopup").css('left', left);
        $("#ifrmPopup").show();
    });
});


[설명]
jQuery의 .scrollLeft() 함수는 좌우로 스크롤된 화면이 왼쪽부터 몇 px인지 구하는 함수. 보통은 0

jQuery의 .scrollTop() 함수는 스크롤된 화면이 맨 위에서부터 몇 px인지 구하는 함수.

jQuery의 .width() 함수는 너비를 구하는 함수인데, $(window).width() 를 하면 현재 화면의 너비를 구한다. 윈도우를 전체화면으로 하지 말고 사이즈를 줄여 놓고 값을 구해 보면 전체 가로 사이즈보다 작게 나오는 것을 알 수 있다.

jQuery의 .height() 함수 역시 마찬가지인데, $(window).height() 라고 하면 윈도우에서 메뉴바 같은 것들을 빼고 실제 사용되는 부분의 높이만 구해 준다.

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

탭메뉴+prev, next  (0) 2011.08.08
특정영역 인쇄  (0) 2011.07.18
탭메뉴  (1) 2011.06.16
이미지롤오버  (0) 2011.04.06
가로&세로 슬라이드  (0) 2011.04.04
Posted by 수라
web standard/script2011. 6. 27. 16:25

오늘하루 창닫기 소스

[index]
<script language="JavaScript">
<!--
function setCookie( name, value, expiredays ){
    var todayDate = new Date();
    todayDate.setDate( todayDate.getDate() + expiredays );
    document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function getCookie( name ){
    var nameOfCookie = name + "=";
    var x = 0;
    while ( x <= document.cookie.length ) {
        var y = (x+nameOfCookie.length);
        if ( document.cookie.substring( x, y ) == nameOfCookie ) {
            if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 ) endOfCookie = document.cookie.length;
            return unescape( document.cookie.substring( y, endOfCookie ) );
        }
        x = document.cookie.indexOf( " ", x ) + 1;
        if ( x == 0 ) break;
    }
    return "";
}
//첫번째 새창띄우기 시작
if ( getCookie( "cookie01" ) != "done" ){ //cookie01는 쿠키의 이름
    noticeWindow = window.open('popup01.html','popup01','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=400,height=300,top=0,left=0');// 팝업창의 경로, 이름, 그외 스크롤바와 크기,위치 설정부분
    noticeWindow.opener = self;
}
// -->
</script>



[popup]
<script language="JavaScript">
<!--

function setCookie( name, value, expiredays ) {
    var todayDate = new Date();
    todayDate.setDate( todayDate.getDate() + expiredays );
    todayDate.setHours(0);
    todayDate.setMinutes(0);
    todayDate.setSeconds(0);
    document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function close_day() {
    //if ( document.forms[0].chkbox.checked ) //'오늘은이창을....'부분의 체크박스와 관련된 값입니다. chkbox는 chkbox의 name값
    setCookie( "cookie01", "done" , 1); // 쿠키값 체크
    self.close();
}

//3일동안열지않음
function close_3day() {
    setCookie( "cookie01", "done" , 3); // 쿠키값 체크
    self.close();
}

// 한달동안 열지 않음
function close_month() {
    setCookie( "cookie01", "done" , 30); // 쿠키값 체크
    self.close();
}

function close_window() {
    self.close();
}

// 새창띄우고 링크적용 후 팝업창닫기
function link_blank(url) {
    window.open(url);
    self.close();
}
// 부모페이지에 링크적용 후 팝업창닫기
function link_opener(url){
    opener.window.location.href=url;
    self.close();
}

// -->
</script>

[html1]
<ul>
    <li><a href="javascript:;" onclick="link_blank('http://test.com');">새창링크</a></li>
    <li><a href="javascript:;" onclick="link_opener('http://test.com');">부모창링크1</a></li>
</ul>
<a href="javascript:;" onclick="close_day();">하루동안 열지 않음</a>
<a href="javascript:;" onclick="close_3day();">3일동안 열지 않음</a>
<a href="javascript:;" onclick="close_month();">한달동안 열지 않음</a>
<a href="javascript:;" onclick="close_window();">닫기</a>

[html2]
<form name="popup">
    <ul>
        <li><a href="javascript:;" onclick="link_blank('http://test.com');">새창링크</a></li>
        <li><a href="javascript:;" onclick="link_opener('http://test.com');">부모창링크1</a></li>
    </ul>
    <input type="checkbox" name="chkbox" onclick="close_day()">오늘 하루 페이지를 열지 않습니다.
    <a href="javascript:;" onclick="close_window();">닫기</a>
</form>

[html3]
<form name="popup">
    <ul>
        <li><a href="javascript:;" onclick="link_blank('http://test.com');">새창링크</a></li>
        <li><a href="javascript:;" onclick="link_opener('http://test.com');">부모창링크1</a></li>
    </ul>
    <input type="checkbox" name="chkbox">오늘 하루 페이지를 열지 않습니다.
    <a href="javascript:;" onclick="close_window();">닫기</a>
</form>





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

url의 변수값을 스크립트로 가져오기  (0) 2011.11.21
자바스크립트(Javascript)로 동적으로 생성한 HTML 소스보기  (0) 2011.08.10
레이어팝업(오늘하루창닫기) 소스  (1) 2011.06.16
탭메뉴 스크립트  (0) 2011.01.06
클릭시 특정id의 class변경  (0) 2011.01.06
Posted by 수라
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/script2011. 6. 16. 15:08

레이어팝업(오늘하루창닫기) 소스

<!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" xml:lang="ko" lang="ko">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=euc-kr" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>레이어팝업 데모</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body {
            font-family:Dotum,"돋움",Verdana,sans-serif;
            font-size:12px;
            line-height:14px;
        }
        div#wikiWrap {
            position:relative;
            width:760px;
            height:442px;
        }
        div#son {
            position:absolute;
            top:30px;
            right:150px;
            width:430px;
            height:311px;
            padding:10px 10px 30px;
            background:#FFF;
        }
        div#son div {
            overflow:hidden;
            width:100%;
            padding-top:3px;
        }
        div#son div p {
            float:left;
            margin-top:5px;
        }
        div#son div p input {
            width: 13px;
            height: 13px;
            vertical-align: middle;
        }
        div#son div button {float:right;}
    </style>
    <script type="text/javascript">
    //쿠키생성과 닫기기능
        function getCookie( name )
        {
            var nameOfCookie = name + "=";
            var x = 0;
            while ( x <= document.cookie.length )
            {
                var y = (x+nameOfCookie.length);
                if ( document.cookie.substring( x, y ) == nameOfCookie )
                {
                    if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
                        endOfCookie = document.cookie.length;
                    return unescape( document.cookie.substring( y, endOfCookie ) );
                }
                x = document.cookie.indexOf( " ", x ) + 1;
                if ( x == 0 )
                    break;
            }
            return "";
        }
        function DivTodayClose()
        {
            setCookie( "popCookie", "done" , 1 ); //popCookie : 쿠키의 네이밍은 임의 설정하면 됨.
            document.getElementById('son').style.display = "none"; //son : 레이어팝업 id 연결
        }
        function DivClose()
        {
            document.getElementById('son').style.display = "none";
        }
        function setCookie( name, value, expiredays )
        {
            var today = new Date();
            today.setDate( today.getDate() + expiredays );
            document.cookie = name + "=" + escape(value) + "; path=/; expires=" + today.toGMTString() + ";";
        }
    </script>
    <script type="text/javascript">
    //레이어팝업 드래그기능
        var dragapproved=false
        var minrestore=0
        var initialwidth,initialheight
        var ie5=document.all&&document.getElementById
        var ns6=document.getElementById&&!document.all
        function iecompattest(){
            return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }
        function drag_drop(e){
            if (ie5&&dragapproved&&event.button==1){
                document.getElementById("son").style.left=tempx+event.clientX-offsetx+"px"
                document.getElementById("son").style.top=tempy+event.clientY-offsety+"px"
            }
            else if (ns6&&dragapproved){
                document.getElementById("son").style.left=tempx+e.clientX-offsetx+"px"
                document.getElementById("son").style.top=tempy+e.clientY-offsety+"px"
            }
        }
        function initializedrag(e){
            offsetx=ie5? event.clientX : e.clientX
            offsety=ie5? event.clientY : e.clientY
            tempx=parseInt(document.getElementById("son").style.left)
            tempy=parseInt(document.getElementById("son").style.top)
 
            dragapproved=true
            document.getElementById("son").onmousemove=drag_drop
        }
        function stopdrag(){
            dragapproved=false;
            document.getElementById("son").onmousemove=null;
        }
    </script>
    </head>
    <body>
        <div id="wikiWrap">
            <img src="http://doctype.kr/wiki/lib/exe/fetch.php?media=%E3%84%B9:mother.jpg" alt="바닥페이지" />
            <div id="son" style="position:absolute; cursor:move; left:150px; top:30px;" onmousedown="initializedrag(event)" onmouseup="stopdrag()"><!-- 드래그 기능을 위해 펑션 연결 -->
                <img src="http://doctype.kr/wiki/lib/exe/fetch.php?media=%E3%84%B9:son.jpg" alt="" />
                <div>
                    <p>
                        <input type="checkbox" id="todayClose" onclick="DivTodayClose();" title="24시간동안 창을 열지 않습니다." />
                        <label for="todayClose">오늘 하루 이창을 열지 않습니다.</label>
                    </p>
                    <button type="button" title="닫기" onclick="DivClose();"><span>닫기</span></button>
                </div>
                <script type="text/javascript">
                //생성한쿠키 연결, 오늘 하루 창을 열지않기 기능을 위해 아래 소스가 필요.
                    cookiedata = document.cookie;
                    if ( cookiedata.indexOf("popCookie=done") < 0 ) //popCookie : 쿠키의 네이밍 연결.
                    {     
                        document.getElementById('son').style.display = "block"; //son : 레이어팝업 id 연결
                    }
                        else
                    {
                        document.getElementById('son').style.display = "none";
                    }
                </script>
            </div>
        </div>
    </body>
</html>

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

자바스크립트(Javascript)로 동적으로 생성한 HTML 소스보기  (0) 2011.08.10
오늘하루 창닫기 소스  (0) 2011.06.27
탭메뉴 스크립트  (0) 2011.01.06
클릭시 특정id의 class변경  (0) 2011.01.06
라디오버튼체크시 레이블스타일변경 스크립트  (0) 2010.11.17
Posted by 수라
life/game2011. 5. 19. 17:55

Rift 소울설명

원문 : http://spriest.egloos.com/2762771

Warrior Souls
Paladin - 밀리 탱킹 중심의 블럭킹과 카운터링 가능
Warlord - 탱킹 트리에 중점을 맞춘 레이드 시 버프와 적 디버프 담당
Beastmaster- 밀리 DPS와 펫 트리 가능
Champion - 밀리 DPS, 데미지딜링용 자가 버프와 적 디버프로 딜링을 극대화, 양손 무기 사용
Paragon - 밀리 DPS, 적절한 상황의 Way of the * 패시브를 활용, 쌍수 무기 사용
Reaver - 탱킹 중심에 물리 공격류보다 마법 공격류 스킬, 데미지 감소류 특화
Riftblade - 원소 데미지 공격형 딜러
Void Knight - 캐스터 잡는 탱커, 침묵, 시전시간 증가, 받는 피해 50%감소, 적군 마나흡수 등 보유
Vindicator -  워리어 PvP Soul. PvP중심의 스킬과 보너스 종류. 21포인트 적용 가능


Rogue Souls
Bladedancer - 밀리 DPS이고, Dodge/Parry 보너스나 리액티브 스킬, 광역 공격 정도로 주로 상대 정면에서 공격
Assassin - 밀리 DPS이고, 전투에서 포지션상 우위를 점 할수 있는 스텔스와 적 배후로 덮치는 백스텝 가능. 그리도 독 사용
Nightblade - 밀리/중거리 DPS + 은신가능하고 Fire와 Death 데미지를 줄 수 있는 원소계열 스킬들 보유
Riftstalker - 탱킹 + 순간이동 - 로그의 탱킹 소울이며, 데미지 감소류 스킬들과 다양한 유틸기 보유
Ranger - 원거리 DPS + 펫 - 다양한 펫과 다양한 원거리 스킬들 보유
Marksman - 원거리 DPS + 빠른 무빙 특화
Saboteur - 원거리 DPS / 광역 공격 - 덫과 메즈에 특화되어 있고, 포인트를 모아서 큰 데미지를 주거나 dot, 광역, 스턴, 슬로우, 아머 감소, 데미지 증가 등 보유
Bard - 서포트 / 힐러 - 다양한 버프 가능하고, 그룹 힐에 능함. (파티의 보조 힐러로 자주 쓰임)
Infiltrator -  로그 PvP Soul. PvP중심의 스킬과 보너스 종류. 21포인트 적용 가능


로그 스킬들은 에너지를 사용하는데 100이 최대치이고, 전투중엔 늦게 재생됨. 콤보 포인트는 피니셔를 쓰거나, 큰 데미지나 좋은 이펙트나 지속 스킬등에 사용


Cleric Souls
Purifier - 단일 대상 힐링및 데미지 흡수류 보호막 사용
Sentinel - 광역 힐링류 스킬 다수 보유 + 침묵 가능
Warden - 물 속성의 HOT(Healing Over Time)이나 데미지 보유
Justicar - 클레릭의 탱킹 소울, 스킬로 인한 높은 어그로 생성, 체력과 방어력 그리고 데미지 감소를 한꺼번에 증가
Inquisitor - 단일 대상 원거리 마법 DPS, 적의 이로운 버프 두개를 제거 가능하며 혼란, 이동속도감소, 스턴 가능 
Druid - 밀리 DPS + 펫, 다양한 유틸기를 보유 적을 재우거나 침묵, 이동속도감소, 스턴 가능
Cabalist - 광역 마법 DPS. 부패 스킬을 이용한 다양한 인장[마나회복, 침묵, 이동속도감소, 스턴, 회복] 플레이가 관건
Shaman - 밀리 DPS로 거의 모든 스킬이 즉시시전, 패시브 변화로 적의 이동속도 감소나 적이 받는 데미지 증가, 추가 데미지 생성 가능
Templar -  클레릭 PvP Soul. PvP중심의 스킬과 보너스 종류. 21포인트 적용 가능


Mage Souls
Archon - 적 디버프및 아군과 자신 버프, 레이드나 그룹 활동시에 강력한 서포터
Dominator - CC 전문 적군을 넉백시키거나 이동속도감소, 스턴 등 다양한 CC 사용
Elementalist - Warter,Fire,Air,Earth의 원소 마법 + 펫 사용
Chloromancer - 메인 힐 가능한 힐러, 적에게 마법 데미지를 입히고 그 대상에게 힐링
Pyromancer - Fire 데미지로 단일 대상 Nuker
Stormcaller - Air & Warter 데미지의 강력한 광역 공격 전문
Warlock - DOT(Damage Over Time) 딜링 및 생명력 흡수 가능
Necromancer - 펫 + 디버프 효과
Archmage - 메이지 PvP Soul. PvP중심의 스킬과 보너스 종류. 21포인트 적용 가능

'life > game' 카테고리의 다른 글

[coc]10홀 클랜전 맵  (0) 2015.04.16
[펌]coc 라벌미공략  (0) 2015.03.17
디아2 할일  (2) 2010.05.26
디아2 큐브조합공식  (0) 2010.05.26
Diablo2 쓸만한 룬워드아이템  (0) 2010.05.25
Posted by 수라
life/music2011. 5. 1. 21:37

나는 가수다(4/30) 원곡

'life > music' 카테고리의 다른 글

링딩동-인순이  (0) 2011.04.14
김범수 - 제발  (0) 2011.03.28
김연우(토이) - 내가 너의 곁에 잠시 살았다는걸  (0) 2011.03.21
김연우 - 여전히아름다운지(토이), 연인  (0) 2011.03.21
김연우 플레이어  (0) 2011.03.21
Posted by 수라
life/music2011. 4. 14. 13:36

링딩동-인순이


'life > music' 카테고리의 다른 글

나는 가수다(4/30) 원곡  (0) 2011.05.01
김범수 - 제발  (0) 2011.03.28
김연우(토이) - 내가 너의 곁에 잠시 살았다는걸  (0) 2011.03.21
김연우 - 여전히아름다운지(토이), 연인  (0) 2011.03.21
김연우 플레이어  (0) 2011.03.21
Posted by 수라
web standard/jquery2011. 4. 6. 10:04

이미지롤오버

<script type="text/javascript">
<!--
$(function(){
    $("img.imgRollOver").mouseover(function(){
        $(this).attr("src",$(this).attr("src").replace("_off","_on"));
    });
    $("img.imgRollOver").mouseout(function(){
        $(this).attr("src",$(this).attr("src").replace("_on","_off"));
    });
});
//-->
</script>
<img src="img1_off.gif" class="imgRollOver" />
<img src="img2_off.gif" class="imgRollOver" />

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

레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
탭메뉴  (1) 2011.06.16
가로&세로 슬라이드  (0) 2011.04.04
jquery 예제모음  (0) 2011.03.22
베너 슬라이드&버튼이동  (0) 2011.02.22
Posted by 수라

티스토리툴바