'web standard/jquery'에 해당되는 글 25건

  1. 2011.11.21 스크롤 따라다니는 퀵메뉴
  2. 2011.11.16 iframe 다루기
  3. 2011.11.09 로그인 입력폼 description 제어
  4. 2011.11.08 이미지 슬라이드
  5. 2011.08.08 탭메뉴+prev, next
  6. 2011.07.18 특정영역 인쇄
  7. 2011.07.15 레이어팝업 브라우저 가운데 띄우기
  8. 2011.06.16 탭메뉴 1
  9. 2011.04.06 이미지롤오버
  10. 2011.04.04 가로&세로 슬라이드
web standard/jquery2011. 11. 21. 16:20

스크롤 따라다니는 퀵메뉴

참조 : http://blog.nettor.com/jquery_quick/quick.html

<script type="text/javascript">
var quick_menu = $('#quick_menu');
var quick_top = 100;
/* quick menu initialization */
quick_menu.css('top', $(window).height() );
$(document).ready(function(){
    quick_menu.css('top', quick_top );
    //quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 500 ); //스크롤중간에서 refresh할떄 이동
    $(window).scroll(function(){
        quick_menu.stop();
        quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 1000 );
    });
});
</script>


저작자표시 비영리

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

수직네비게이션 기초  (0) 2012.02.13
이미지 순차적으로 스위칭  (0) 2012.01.26
iframe 다루기  (0) 2011.11.16
로그인 입력폼 description 제어  (0) 2011.11.09
이미지 슬라이드  (0) 2011.11.08
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. 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/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 수라

티스토리툴바