jQuery 스크롤 탑 컨트롤 - scrolltop control

Open API/Jquery|2016. 11. 10. 09:37
반응형




원본 Url : http://www.xpressengine.com/?mid=download&package_srl=21842038


Test Url : http://www.uhoon.co.kr/test/1183.html



지정된 스크롤 위치 이하로 내려가게 되면 


스크롤탑 컨트롤이 나타나서 클릭시 페이지 상단으로 올라갑니다..




<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>scrolltop control </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
    h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; }
    #scrolltotop{position:fixed;bottom:0px;right:0px}#scrolltotop
    span{width:48px;height:48px;display:block;background:url("/test/1183/top.png") top no-repeat;margin:0px
    15px 10px 0;border-radius:3px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;transition:all 0.2s ease-out}#scrolltotop a:hover
    span{background:url("/test/1183/top.png") bottom no-repeat}
</style>
 
<script type="text/javascript">
<!--
    jQuery(function($){
    $('#scrolltotop').hide();
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#scrolltotop').fadeIn();
            } else {
                $('#scrolltotop').fadeOut();
            }
        });
        $('#scrolltotop a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    });
});
//-->
</script>
</head>
<body>
<div id="scrolltotop" style="display: block;"><a href="#top"><span></span></a></div>
<div style="height:3200px;">a</div>
</body>
</html>


저작자표시

댓글()

jQuery CheckBox 값 읽어오기/셋팅하기

Open API/Jquery|2016. 11. 10. 09:33
반응형



기존에 만들어둔 샘플들 보다 유용하고 간단한것같아서 담아온 글 입니다.


공유해주신 namkyu 님께 감사드립니다.


체크 박스 관련 샘플  (원문 : http://lng1982.tistory.com/80 )


샘플 내용은 


체크박스 모두 체크

체크박스 모두 해제

체크되어 있는 값 추출

받아온 데이터 체크하기


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function() {
 
        // 체크 박스 모두 체크
        $("#checkAll").click(function() {
            $("input[name=box]:checkbox").each(function() {
                $(this).attr("checked", true);
            });
        });
 
        // 체크 박스 모두 해제
        $("#uncheckAll").click(function() {
            $("input[name=box]:checkbox").each(function() {
                $(this).attr("checked", false);
            });
        });
 
        // 체크 되어 있는 값 추출
        $("#getCheckedAll").click(function() {
            $("input[name=box]:checked").each(function() {
                var test = $(this).val();
                console.log(test);
            });
        });
 
        // 서버에서 받아온 데이터 체크하기 (콤마로 받아온 경우)
        $("#updateChecked").click(function() {
            var splitCode = $("#splitCode").val().split(",");
            for (var idx in splitCode) {
                $("input[name=box][value=" + splitCode[idx] + "]").attr("checked", true);
            }
        });
 
        // test case
        test1();
 
    });
 
    function test1() {
 
        console.log("################################################");
        console.log("## test1 START");
        console.log("################################################");
 
        var cnt = $("input:checkbox").size();
        console.log("checkboxSize=" + cnt);
 
        $("input[name=box]:checkbox").each(function() {
            var checkboxValue = $(this).val();
            console.log("checkboxValue=" + checkboxValue);
        });
 
        console.log("----------------------------------------------");
 
        $("#checkboxArea").children().each(function() {
            var checkboxValue = $(this).children(":checkbox").val();
            var text = $(this).children().eq(1).text();
            console.log(text + "=" + checkboxValue);
        });
    }
 
</script>
</head>
<body>
 
    <div id="checkboxArea">
        <li><input type="checkbox" name="box" value="A" /><label>1번째 checkbox</label></li>
        <li><input type="checkbox" name="box" value="B" /><label>2번째 checkbox</label></li>
        <li><input type="checkbox" name="box" value="C" /><label>3번째 checkbox</label></li>
        <li><input type="checkbox" name="box" value="D" /><label>4번째 checkbox</label></li>
    </div>
 
     
 
 
 
    <div id="buttonGroups">
        <input type="button" id="checkAll" value="check all" />
        <input type="button" id="uncheckAll" value="uncheck all" />
        <input type="button" id="getCheckedAll" value="get checked all" />
        <input type="button" id="updateChecked" value="updateChecked" />
    </div>
 
    <input type="hidden" id="splitCode" name="splitCode" value="A,C,D" />
 
</body>
</html>


저작자표시

댓글()

jQuery Moodular - 이미지 회전,슬라이더, 터치 ,모자이크

Open API/Jquery|2016. 11. 10. 09:27
반응형



site : http://www.gougouzian.fr/


Front & Back -end Developer

Plugin & method Url : http://www.gougouzian.fr/projects/jquery/moodular/


Test Url : http://www.uhoon.co.kr/test/885.html


license : MIT License / GPL - GNU General Public License 



이미지 슬라이드 , 회전 , 터치도 지원한다고 합니다. 


대형 배너나 이미지슬라이드등에 용이할것같습니다.


easing을 이용해서 다양한 effect를 지원하는 등..옵션이 상당히 많습니다.



<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>moodular </title>
</head>
<style type="text/css"> 
/* moodular */
#moodular { overflow: hidden }
    #moodular, #moodular li { margin: 0; padding: 0; list-style: none; width: 900px; }
/* examples */
    #moodular, #moodular li { height: 400px; }
        #moodular li p { display: block; height: 400px; }
            #moodular li p span { display: inline-block; padding: 10px 10px; color: #FFF; margin: 10px; }
#nav_wrapper { margin: 0; padding: 0; list-style: none; width: 80px; height: 20px; overflow: hidden }
    #nav_wrapper li { text-align: center; }
        #nav_wrapper li.active { color: #FFF; }
  
</style>  
<body>
 
<ul id="moodular">
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo01.jpg);"><span>가나다라</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo02.jpg);"><span>마바사아</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo03.jpg);"><span>자차카</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo04.jpg);"><span>타파하</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo05.jpg);"><span>www.goodkiss.co.kr</span></p></li>
    <li><p style="background-image: url(http://www.gougouzian.fr/projects/jquery/moodular/assets/img/photo06.jpg);"><span>www.uhoon.co.kr</span></p></li>
</ul>  
<!-- script -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>  
<script src="885/jquery.easing.1.3.js"></script> 
<script src="885/moodular.js"></script>  
<script>
jQuery(document).ready(function () { 
    var couleurs = ["rgba(219,56,92, 0.6)"  ,
    "rgba(104,197,255, 0.6)",
    "rgba(151,90,193, 0.6)",
    "rgba(193,70,136, 0.6)",
    "rgba(168,123,187, 0.6)",
    "rgba(41,186,116, 0.6)",
    "rgba(148,189,36, 0.6)",
    "rgba(240,61,44, 0.6)",
    "rgba(56,155,217, 0.6)",
    "rgba(32,187,185, 0.6)", 
    "rgba(32,169,255, 0.6)"];
 
    jQuery('#moodular li p span').each(function() {
        jQuery(this).css('background-color', couleurs[Math.floor(Math.random() * couleurs.length)]);
    });
 
    jQuery('#moodular').moodular({
/* core parameters */
    // effects separated by space
    effects: 'mosaic',
    // controls separated by space
    controls: 'keys',
    // if you want some yummy transition
    easing: 'easeOutExpo',
    // step 
    step: 1,
    // selector is to specify the children of your element (tagName)
    selector: 'li',
    // if timer is 0 the carrousel isn't automatic, else it's the interval in ms between each step
    timer: 5000,
    // speed is the time in ms of the transition
    speed: 5000,
    // queuing animation ?
    queue: false,
/* parameters for controls or effects */
    // keys control
    keyPrev: 37, // left key
    keyNext: 39, // right key
    // mosaic effects
    slices: [10, 4],
    mode : 'random'//,
    // others
    //your_params : 'cause you can create your own effect or control'
  }); 
});
</script>
</body>
</html>
저작자표시

댓글()
이전 1 ··· 49 50 51 52 53 54 55 ··· 60 다음

티스토리툴바