web standard/jquery2012. 2. 29. 09:45

좌우(상하) 슬라이드

[좌우]
<script type="text/javascript">
var pagging = 0;
$(document).ready(function() {
    var contWidth = $('.thumList').width();
    var cnum = ($('.slide > div').size())-1;
    var slideLeft = 0 - contWidth;
    $('.slide').css('width',contWidth*(cnum+1));
    $('.btnLeft').click(function() {
        pagging--;
        if (pagging < 0) {pagging = 0; };
        $('.magazineTitle img').attr('src', '../images/whatissue/title_magazine0'+pagging+'.gif');
        $('.slide').animate({marginLeft: slideLeft*pagging});
    });
    $('.btnRight').click(function() {
        pagging++;
        var max=cnum;
        if(pagging > max) {pagging = max; };
        $('.magazineTitle img').attr('src', '../images/whatissue/title_magazine0'+pagging+'.gif');
        $('.slide').animate({marginLeft: slideLeft*pagging});
    });
});
</script>

<div class="container">
    <div class="slide clfix">
        <!-- contents01 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents01 -->
        <!-- contents02 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents02 -->
        <!-- contents03 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents03 -->
    </div>
</div>

[상하] (페이징이 추가되고, 소스만 조금 다를뿐 방식은 위와 동일)
<script type="text/javascript">
var page = 1;    //시작페이지 카운트
var slideNum = 3;    //슬라이드 갯수

function pagging(num){
    var $slide = $('.slide');    //슬라이드할 class
    var $pagging = $('.pagging a');    //페이징 class
    var slideHeight = 0 - ($('.slide > ol').height());    //슬라이드에 필요한 수치값
    page = num;
    listTop = slideHeight * (num-1);
    $slide.animate({marginTop:listTop}, {duration:500});
    $pagging.removeClass('on');
    $pagging.eq(num).addClass('on');
}

$(document).ready(function() {
    $(".left").click(function(){
        page--;
        if (page < 1) {page = 1; };
        pagging(page);
        return false;
    });
    $(".right").click(function(){
        page++;
        var max=slideNum;
        if(page > max) {page = max; };
        pagging(page);
        return false;
    });
});

<div class="area">
    <div class="slide clfix">
        <ol>
            <li onclick="link(1);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
        <ol>
            <li onclick="link(11);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
        <ol>
            <li onclick="link(21);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
    </div>
</div>
저작자표시 비영리

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

jQuery Slider plugin  (0) 2014.01.09
width가 100%인 이미지에 맵 걸기  (0) 2013.04.22
lnb 슬라이드메뉴  (0) 2012.02.21
수평네비게이션 기초  (0) 2012.02.13
수직네비게이션 기초  (0) 2012.02.13
Posted by 수라
web standard/jquery2012. 1. 26. 11:42

이미지 순차적으로 스위칭

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<script type="text/javascript">
var num = 1;
$(document).ready(function() {
    $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    $("ul.paging li.prev").click(function() {
        num--;
        if (num < 0) {num = 0; };
        $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    });
    $("ul.paging li.next").click(function() {
        num++;
        var max=($("ul.tabMenu01 li").size())-1;
        $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    });
});
</script>
<style>
* {margin:0;padding:0;}
img {width:100%;border:none;}
</style>
</head>
<body>
<div class="tabCont">
    <div class="cont"><img src="sian_01.jpg" usemap="#link1" alt="" /></div>
</div>
<ul class="paging">
    <li class="prev">prev</li>
    <li class="next">next</li>
</ul>
</body>
</html>
저작자표시 비영리

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

수평네비게이션 기초  (0) 2012.02.13
수직네비게이션 기초  (0) 2012.02.13
스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
iframe 다루기  (0) 2011.11.16
로그인 입력폼 description 제어  (0) 2011.11.09
Posted by 수라
web standard/jquery2011. 11. 16. 14:32

iframe 다루기

<iframe id="PayIFrame"></iframe>


1. src 바꾸기.
$("#PayIFrame").attr("src", "http://www.shop-wiz.com");

2. iframe  내의 문서 객체 접근
iframe 속의 문서에 <div id="target"></div>

$("#PayIFrame").contents().find("#target").html();


3. 부모문서에 접근
$("#parent_id", parent.document)


4. 부모문서의 다른 iframe 접근
$("#parent_id", parent.frames["frame_id"].document)

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

이미지 순차적으로 스위칭  (0) 2012.01.26
스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
로그인 입력폼 description 제어  (0) 2011.11.09
이미지 슬라이드  (0) 2011.11.08
탭메뉴+prev, next  (0) 2011.08.08
Posted by 수라
web standard/jquery2011. 11. 9. 11:44

로그인 입력폼 description 제어

1.로그인창에서 아이디/비번 인풋영역에 설명이 bg로 깔린상태
2.포커싱되면 bg삭제, blur되면 bg 온.
  단, 입력값이 있을때는 blur되도 bg삭제 유지.

[SCRIPT]
<script type="text/javascript">
$(document).ready(function() {
    $(".top-menu .itp-id").focus(function() {
        $(".itp-id").removeClass("empty");
    });
    $(".top-menu .itp-id").blur(function() {
        $(".itp-id").addClass("empty");
    });
    $(".top-menu .itp-pw").focus(function() {
        $(".itp-pw").removeClass("empty");
    });
    $(".top-menu .itp-pw").blur(function() {
        $(".itp-pw").addClass("empty");
    });
    $(".itp-id").each(function() {
        $(this).blur(function() {
            var data=$(this).val();
            var len=data.length;
            if(len<1) {
                $(".itp-id").addClass("empty");
            }
            else {
                $(".itp-id").removeClass("empty");
            }
        });
    });
    $(".itp-pw").each(function() {
        $(this).blur(function() {
            var data=$(this).val();
            var len=data.length;
            if(len<1) {
                $(".itp-pw").addClass("empty");
            }
            else {
                $(".itp-pw").removeClass("empty");
            }
        });
    });
});
</script>

[HTML]
<form method="post" action="">
                <fieldset>
                    <legend>로그인 폼</legend>
                    <ul class="top-menu">
                        <li><input type="text" class="itp-id empty" id="emailId" /> <input type="password" class="itp-pw empty" id="pass" /> <a href="#"><img src="/images/common/btns_login.gif" alt="로그인" /></a></li>
                    </ul>
                </fieldset>
            <form>

[CSS]
#emailId.empty, #pass.empty {background:url('/images/common/bg_dec01.gif') no-repeat; }
#emailId.empty {background-position:0px 0px; }
#pass.empty {background-position:0px -19px; }



간략화

<input type="text" id="searchbox_for" onblur="if(this.value==''){this.value='프로젝트명을 입력해 주세요.'};" onfocus="if(this.value=='프로젝트명을 입력해 주세요.'){this.value=''};" value="프로젝트명을 입력해 주세요.">


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

스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
iframe 다루기  (0) 2011.11.16
이미지 슬라이드  (0) 2011.11.08
탭메뉴+prev, next  (0) 2011.08.08
특정영역 인쇄  (0) 2011.07.18
Posted by 수라
web standard/jquery2011. 11. 8. 14:51

이미지 슬라이드

<!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>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
        <meta name="author" content="caroufredsel.frebsite.nl" />

        <title>carouFredSel: an infinite, circular jQuery carousel</title>

        <script type="text/javascript" language="javascript" src="jquery.js"></script>
        <script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.1.3.js"></script>
        <script type="text/javascript" language="javascript">
            $(function() {

                //    Scrolled by user interaction
                $('#foo2').carouFredSel({
                    scroll: 1, //하나씩 스크롤, 없을시 1페이지씩 스크롤
                    prev: '#prev2',
                    next: '#next2',
                    pagination: "#pager2",
                    auto: false
                });
            });
        </script>

        <style type="text/css" media="all">
            .list_carousel {
                background-color: #ccc;
                margin: 0 0 30px 60px;
                width: 360px;
            }
            .list_carousel ul {
                margin: 0;
                padding: 0;
                list-style: none;
                display: block;
            }
            .list_carousel li {
                font-size: 40px;
                color: #999;
                text-align: center;
                background-color: #eee;
                border: 5px solid #999;
                width: 50px;
                height: 50px;
                padding: 0;
                margin: 6px;
                display: block;
                float: left;
            }

            .clearfix {
                float: none;
                clear: both;
            }
            .prev {
                float: left;
                margin-left: 10px;
            }
            .next {
                float: right;
                margin-right: 10px;
            }
            .pager {
                float: left;
                width: 300px;
                text-align: center;
            }
            .pager a {
                margin: 0 5px;
                text-decoration: none;
            }
            .pager a.selected {
                text-decoration: underline;
            }
            .timer {
                background-color: #999;
                height: 6px;
                width: 0px;
            }
        </style>
    </head>
    <body>
        <div id="intro">
            <h1><a href="http://caroufredsel.frebsite.nl">carouFredSel</a></h1>
            <p>This is a demo page, for more examples, the complete documentation, tips &amp; tricks, a support-forum and even a configuration robot, visit <a href="http://caroufredsel.frebsite.nl">caroufredsel.frebsite.nl</a></p>
        </div>

        <div class="wrapper">
            <p>Carousel scrolled by user interaction.</p>
            <div class="list_carousel">
                <ul id="foo2">
                    <li>c</li>
                    <li>a</li>
                    <li>r</li>
                    <li>o</li>
                    <li>u</li>
                    <li>F</li>
                    <li>r</li>
                    <li>e</li>
                    <li>d</li>
                    <li>S</li>
                    <li>e</li>
                    <li>l</li>
                    <li> </li>
                </ul>
                <div class="clearfix"></div>
                <a id="prev2" class="prev" href="#">&lt;</a>
                <a id="next2" class="next" href="#">&gt;</a>
                <div id="pager2" class="pager"></div>
            </div>
        </div>
       
    </body>
</html>

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

iframe 다루기  (0) 2011.11.16
로그인 입력폼 description 제어  (0) 2011.11.09
탭메뉴+prev, next  (0) 2011.08.08
특정영역 인쇄  (0) 2011.07.18
레이어팝업 브라우저 가운데 띄우기  (0) 2011.07.15
Posted by 수라
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. 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/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/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 수라
web standard/jquery2011. 4. 4. 09:47

가로&세로 슬라이드

<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script src="jQuery.slide.js"></script>
<script>
(function($) {
 $(function() {
   $('#slideshow').slideShow({slideWay:''});
   //$('#slideshow').slideShow();  // 좌/우
   //$('#slideshow').slideShow({slideWay:''}); // 상/하
 });
}) (jQuery);

</script>
</head>
<body>
<div id="slideshow">
    <div style="width:40px;float:left;"><span id="left">이전</span></div>
    <div id="slidesContainer" style="width:260px;height:160px;float:left;overflow:hidden;">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">4</div>
    </div>
    <div style="width:40px;float:left;"><span id="right">다음</span></div>
</div>
</body>
</html>

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

탭메뉴  (1) 2011.06.16
이미지롤오버  (0) 2011.04.06
jquery 예제모음  (0) 2011.03.22
베너 슬라이드&버튼이동  (0) 2011.02.22
[jquery]네임태그이동  (0) 2011.02.22
Posted by 수라

티스토리툴바