jQuery

버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억)

빽짱구 — Fri, 29 Mar 2019 10:33:37 +0900

html

<div class="anchor_area">
<div class="quick_pos">
<ul class="quick">
<li><a href="javascript:;" data-anchor="anchor_div1">버튼1a>li>
<li><a href="javascript:;" data-anchor="anchor_div2">버튼2a>li>
<li><a href="javascript:;" data-anchor="anchor_div3">버튼3a>li>
ul>
div>
<div id="anchor_div1" class="anchor_div div1">
버튼1을 클릭했을때 이동했을때 내용
div>
<div id="anchor_div2" class="anchor_div div2">
버튼2을 클릭했을때 이동했을때 내용
div>
<div id="anchor_div3" class="anchor_div div3">
버튼3을 클릭했을때 이동했을때 내용
div>
div>

버튼 anchor_div1 이름은 원하는 이름으로 하되, 클릭 했을때 이동되는 id하고 이름이 같아야합니다. ex)

이동했을때 내용

css

  .anchor_tab{margin:0;padding:0;overflow:hidden}
  .anchor_tab li{float:left;margin:0 5px}
  .anchor_tab li a{display:inline-block;height:30px;padding:0 15px;border:1px solid #999;border-radius:5px;background:#f4f4f4;box-shadow:0 0 5px #eee;color:#333;text-align:center;font-size:14px;line-height:30px}
  .anchor_tab li a:hover{border:1px solid #1e7ae2;color:#1e7ae2;text-decoration:none}
  .anchor_area{margin-bottom:10px}
  .anchor_div{height:500px;padding-top:250px;margin-bottom:20px;;font-size:15px !important;text-align:center}
  .anchor_div.div1{background:#eee}
  .anchor_div.div2{background:#448aca}
  .anchor_div.div3{background:#b3d465}
  .quick_pos{position:relative;width:100%;min-width:500px}
  .quick_pos .quick{position:absolute;top:50px;left:50%;z-index:60;margin-left:250px}
  .quick_pos .quick.fixed{position:fixed}
  .quick_pos .quick li a{display:block;width:30px;height:30px;margin-bottom:10px;border-radius:30px;border:2px solid #fff;background:#ccc;text-indent:-999em}
  .quick_pos .quick li a.on{background:#ff0000}

스타일은 본인에 맞게 꾸며주세요.

script

$(document).ready(function(){
  var $menu = $('.quick li a'),
  $contents = $('.anchor_area .anchor_div')
  $(window).scroll(function(){
  var scltop = $(window).scrollTop();
  $.each($contents, function(idx, item){
  var $target   = $contents.eq(idx),
  i = $target.index(),
  targetTop = $target.offset().top;
  if (targetTop <= scltop) {
  $menu.removeClass('on');
  $menu.eq(idx).addClass('on');
  }
  if (!(200 <= scltop)) {
  $menu.removeClass('on');
  }
  })
  });
 /* 탭 클릭 */
  $('.quick li a').on('click',function(){
  var anchorId = $(this).attr('data-anchor');
  // 스크롤 이동
  scroll_to_anchor_tab(anchorId);
  });
 // 퀵배너 스크롤
  $(window).scroll(function(){
  var quickPos = $('.quick_pos').offset().top;
  var winPos = $(window).scrollTop();
  if( winPos > quickPos ) $('.quick_pos .quick').addClass('fixed');
  else $('.quick_pos .quick').removeClass('fixed');
  });
  });
  // 탭 이동 - 부드러운 스크롤
  function scroll_to_anchor_tab(anchor_id,speed) {
  if( !speed ) var speed = 'slow';
  var a_tag = $("#"+anchor_id);
  if(a_tag.length > 0){
  $('html, body').animate({
  scrollTop: a_tag.offset().top - $('').height() -  $('').height() // 상단에 특정 위치를 제외하고 스크롤할때 해당 이름 작성
  }, speed);
  }
  }

버튼과 같은 이름의 레이어 띄우기

빽짱구 — Tue, 26 Mar 2019 13:05:26 +0900

A라는 버튼을 클릭시 A라는 레이어를 띄우고, B라는 버튼을 클릭시 B라는 레이어를 띄우는 방법입니다.

비슷한 방법은 많으나, 간혹 이렇게 사용할때가 있습니다.

$(document).ready(function(){
$('.layer').click(function(){
var layer_nm = $(this).attr('data-num');
$('.layer_comm').hide();
$('.'+layer_nm).show();
});
});

.layer_comm{position:absolute;top:0;left:0;display:none}

레이어 1내용

레이어 2내용

레이어 3내용

스타일과 구성은 본인에 맞게 적용해주세요.

ajax로 호출시 jquery 실행이 안될때

빽짱구 — Fri, 04 Jan 2019 18:10:07 +0900

html에서는 이상이 없었는데, ajax로 호출할시 jquery가 동작을 안할때 아래부분을 수정해봅시다.

.on('click',function() 이었다면

.live('click',function() 로 수정합니다.

.hover(function() 이었다면

.live('mouseover',function() 로 바꿔줍니다.

jquery 탭메뉴

빽짱구 — Wed, 02 Jan 2019 09:51:02 +0900

html 소스

메뉴1

메뉴2

메뉴3

첫번째 리스트1

첫번째 리스트2

두번째 내용

세번째 내용

srcipt 소스

$(function () {

$(".tab_content").hide();

$(".tab_content:first").show();

$("ul.tabs li").click(function () {

$("ul.tabs li").removeClass("active").css("color", "#333");

//$(this).addClass("active").css({"color": "darkred","font-weight": "bolder"});

$(this).addClass("active").css("color", "darkred");

$(".tab_content").hide()

var activeTab = $(this).attr("rel");

$("#" + activeTab).fadeIn()

});

css 소스

ul.tabs {

margin: 0;

padding: 0;

float: left;

list-style: none;

height: 32px;

border-bottom: 1px solid #eee;

border-left: 1px solid #eee;

width: 100%;

font-family:"dotum";

font-size:12px;

}

ul.tabs li {

float: left;

text-align:center;

cursor: pointer;

width:82px;

height: 31px;

line-height: 31px;

border: 1px solid #eee;

border-left: none;

font-weight: bold;

background: #fafafa;

overflow: hidden;

position: relative;

}

ul.tabs li.active {

background: #FFFFFF;

border-bottom: 1px solid #FFFFFF;

}

.tab_container {

border: 1px solid #eee;

border-top: none;

clear: both;

float: left;

width: 248px;

background: #FFFFFF;

}

.tab_content {

padding: 5px;

font-size: 12px;

display: none;

}

.tab_container .tab_content ul {

width:100%;

margin:0px;

padding:0px;

}

.tab_container .tab_content ul li {

padding:5px;

list-style:none

}

;

#container {

width: 249px;

margin: 0 auto;

}

가로사이즈 구하기

빽짱구 — Tue, 06 Nov 2018 16:44:17 +0900

가로사이즈를 구해서 가로사이즈 margin-left:- 만큼 이동

$(window).load(function(){

// 가로사이즈 구하기

var tooltipWidth = $('.story_slider .tooltip').width();

$('.story_slider .tooltip').css('margin-left',-tooltipWidth);

});

가로사이즈를 구한값의 절반에 10을 더함 그리고 margin-left:- 만큼 이동

$(window).load(function(){

// 가로사이즈 구하기

var tooltipWidth = $('.story_slider .tooltip').width()/2 +10;

$('.story_slider .tooltip').css('margin-left',-tooltipWidth);

});

jquery - 이미지 체크박스, 라디오 버튼

빽짱구 — Tue, 16 Oct 2018 15:09:46 +0900

html

/* checkbox */
체크1
체크2
체크(선택불가)

/* radio */
라디오1
라디오2
라디오(선택불가)

input에 class명과 label의 class명을 정확히 작성해 주셔야 합니다. 변경시 스크립트도 수정을 해줘야 합니다.

css

/* checkbox */
input.id_check{position:absolute;left:-3000em}
label.type-checkbox{display:inline-block;height:20px;margin-right:7px;padding-left:27px;font-size:13px;color:#666;vertical-align:middle;background:url(/images/study/jquery/img_checkbox_radio/img_checkbox.png) no-repeat;line-height:20px}
label.type-checkbox.checked{background:url(/images/study/jquery/img_checkbox_radio/img_checkbox_checked.png) no-repeat}
label.type-checkbox.disabled{background:url(/images/study/jquery/img_checkbox_radio/img_checkbox_disabled.png) no-repeat}

/* radio */
input.id_radio{position:absolute;left:-3000em}
label.type-radio{display:inline-block;height:20px;margin-right:7px;padding-left:27px;font-size:13px;color:#666;vertical-align:middle;background:url(/images/study/jquery/img_checkbox_radio/img_radio.png) no-repeat;line-height:20px}
label.type-radio.checked{background:url(/images/study/jquery/img_checkbox_radio/img_radio_checked.png) no-repeat}
label.type-radio.disabled{background:url(/images/study/jquery/img_checkbox_radio/img_radio_disabled.png) no-repeat}

script

$(document).ready(function(){
$.fn.customizeCRInput = function(options) {
var options = $.extend({
checked_class : "checked"
}, options);
return this.each(function(){
var input = $(this);
input.on("change",function(){
var is_checked = input.is(":checked");
var type = input.attr("type");
var id = input.attr("id");
var label = $("label[for="+id+"]");
if (type == "checkbox") {
if (input.is(":checked")) {
label.addClass(options.checked_class);
} else {
label.removeClass(options.checked_class);
}
} else if (type == "radio") {
$("input[name="+input.attr("name")+"]").each(function(idx){
$("label[for="+$(this).attr("id")+"]").removeClass(options.checked_class);
});
label.addClass(options.checked_class);
}
});
});
};
$("input[type=checkbox].id_check").customizeCRInput(); // 체크박스 실행 스크립트
$("input[type=radio].id_radio").customizeCRInput(); // 라디오 버튼 실행 스크립트
});

선택 됐을때의 색상, 폰트크기는 원하는데로 수정하시면 됩니다.

본문글 집중모드 효과

빽짱구 — Tue, 09 Oct 2018 17:56:38 +0900

웹미니 사이트 게시판 뷰에서 사용한 방법입니다.

집중모드를 사용하면 주변 딤처리를 하여 좀더 게시글을 읽을때 집중을 해주는 효과입니다.

집중모드 켜기를 누르면 본문 영역을 제외한 부분이 dim 처리가 됩니다.

html

원하는 위치에 버튼 소스를 삽입하세요.

하단부분에 dim 처리 소스를 삽입합니다. (아무곳이나)

css

/* dim 처리 */

.bg_post_mode{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:998;background:#000;opacity:.8;}

body.post_mode .bg_post_mode{display:block;}

body.post_mode .viewDocument{position:relative;z-index:999;background:#fff;box-shadow:0 0 10px #111;}

viewDocument 집중모드가 되야하는 영역 class명으로 꼭 바꿔주셔야합니다.

/* 버튼 */

. btn_post_mode{}

버튼 스타일은 본인에 맞게 꾸며주세요.

script

$(document).ready(function(){

// post mode

$('.btn_post_mode').on('click',function(){

var $s = $(this).find('span');

$s.html($s.text() == '집중모드 켜기' ? '집중모드 끄기' : '집중모드 켜기')

$('body').toggleClass('post_mode');

});

스크롤 고정형 퀵배너

빽짱구 — Fri, 07 Sep 2018 14:17:20 +0900

html 소스

css 소스

.quick_pos{position:relative;width:100%;min-width:1100px}
.quick_pos .quick{position:absolute;top:50px;left:50%;z-index:60;margin-left:600px}
.quick_pos .quick.fixed{position:fixed}

script 소스

/* 퀵배너 스크롤 */
$(window).scroll(function(){
	var quickPos = $('.quick_pos').offset().top;
	var winPos = $(window).scrollTop();

	if( winPos > quickPos ) $('.quick_pos .quick').addClass('fixed');
	else $('.quick_pos .quick').removeClass('fixed');
});

html과 css 본인에 사이트에 맞게 꾸며주시면 됩니다.

버튼 클릭시 원하는 곳으로 부드럽게 이동

빽짱구 — Fri, 07 Sep 2018 13:59:54 +0900

script 소스

html 소스

anchor_div">버튼

버튼 anchor_div 이름은 원하는 이름으로 하되, 클릭 했을때 이동되는 id하고 이름이 같아야합니다.

anchor_div">

이동했을때 내용

jquery 토글 기능

빽짱구 — Thu, 06 Sep 2018 22:58:05 +0900

html

리스트 내용1

리스트 내용2 버튼 눌렀을때 보여질 내용

리스트 내용2

리스트 내용2 버튼 눌렀을때 보여질 내용

css

.view_reply{padding:10px 15px;border-bottom:1px solid #000}

.view_reply .reply_1dep{padding:8px 0;font-size:13px}

.view_reply .bt_more{position:relative;top:-1px;left:5px;padding:5px 8px;border:1px solid #000;border-radius:3px;background:#444;color:#fff;cursor:pointer}

.view_reply .wrap_reply_2dep{padding:15px 0;border-top:1px dotted #ddd;color:#999;font-size:13px}

script

$(document).ready(function(){

$('.view_reply .wrap_reply_2dep').hide();

$('.reply_1dep .bt_more').click(function(){

if ($(this).hasClass('on')){

$(this).removeClass('on');

$(this).parent().parent().find('.wrap_reply_2dep').slideUp();

}else{

$(this).addClass('on');

$(this).parent().parent().find('.wrap_reply_2dep').slideDown();

}

});

해당 영역 높이값 자동으로 가져오기

빽짱구 — Wed, 27 Apr 2016 08:35:23 +0900

페이지 로딩시 원하는 영역(?) 높이값을 자동으로 체크해주는 소스입니다.

이요소의 높이값이 자동으로 늘어남

menu_list 는 원하는 이름으로 수정하시면 됩니다. 수정시 스크립트도 수정해주세요.

해상도별로 CSS호출하기

빽짱구 — Wed, 14 Oct 2015 09:32:02 +0900

iscroll 사용시 동적일때 문제

빽짱구 — Thu, 20 Feb 2014 11:58:13 +0900

모바일 페이지 제작시 스크롤문제로 iscroll.js 를 사용할때가 있다.

아이폰,안드로이드 모두 정상동작하나, 동적일때가 문제이다.

예를들어 검색버튼을 눌렀을때 스크롤될 리스트들이 호출될때 스크롤이 생기지 않는 문제가 있다. (가로,세로 폰을 돌리면 스크롤이 생기긴한다.)

이럴때 해결방법이다.

[스크랩] jQuery 팁 & 튜토리얼

사뎅이 — Tue, 14 Jan 2014 14:03:44 +0900

제이쿼리

[jQuery] 001. 제이쿼리를 이용한 12달 달력 코딩하기 Customizing and Theming jQuery UI Datepicker [미리보기]

[jQuery] 002. 포토샵과 제이쿼리를 이용한 이미지 슬라이드 만들기 Customizing and Theming jQuery UI Datepick [미리보기]

[jQuery] 003. 페이지 번호를 통한 페이지 스크롤 바 만들기 Extreme Makeover: jPaginator CSS3 Edition [미리보기]

[jQuery] 004. CSS와 제이쿼리를 이용한 레이어 팝업 만들기 Super Simple Lightbox with CSS and jQuery [미리보기]

[jQuery] 005. CSS3와 jQuery를 이용한 말풍선(Tooltips) 만들기 How to Create Link Tooltips Using CSS3 and JQuery [미리보기]

[jQuery] 006. 클릭하면 말풍선(tooltip) 이미지 나오게 하기 How to Create Script-Free CSS3 Tooltips [미리보기]

[jQuery] 007. CSS3와 jQuery를 이용한 아코디언 메뉴 만들기 Free Content Accordion (CSS3+jQuery)

[jQuery] 008. CSS3를 이용한 12달 달력(Calendar) 코딩하기 How to Create Calendar using jQuery and CSS3 [미리보기]

[jQuery] 009. 장면효과가 멋있는 이미지 슬라이드 만들기 How to Create an Image Slider using jQuery and CSS3 [미리보기]

[jQuery] 010. 제이쿼리와 CSS3를 이용한 로그인 폼 만들기 How to Create Login Form with CSS3 and jQuery [미리보기]

[jQuery] 011. 게시글 숫자가 포함된 아코디언 메뉴 코딩하기 How to Create Accordion Menu (CSS3+jQuery) [미리보기]

[jQuery] 012. HTML5, PHP, CSS3를 이용한 업로드 폼 만들기 How to Create an Upload Form using jQuery [미리보기]

[jQuery] 013. 제이쿼리, HTML5, CSS3를 이용한 비디오 플레이어 How to Create an Video Player in jQuery [미리보기]

[jQuery] 014. 플러그인을 이용한 책넘기기 효과(Flipboard) 만들기 Experimental Page Layout Inspired by Flipboard [미리보기]

[jQuery] 015. 오디오 플러그인을 이용한 슬라이드 이미지 만들기 Audio Slideshow with jPlayer [미리보기]

[jQuery] 016. 제이쿼리를 이용한 3D이미지 효과 슬라이드 만들기 Slideshow with jmpress.js [미리보기]

[jQuery] 017. 수평형 구조의 반응형 레이아웃 페이지 코딩하기 Responsive Horizontal Layout [미리보기]

[jQuery] 018. 전환효과가 부드러운 이미지 슬라이드 코딩하기 Parallax Content Slider with CSS3 and jQuery [미리보기]

[jQuery] 019. 풀스크린을 이용한 화면효과 이미지 슬라이드 Fullscreen Slit Slider with jQuery and CSS3 [미리보기]

[jQuery] 020. 메뉴 선택에 따른 배경화면 움직이게 만들기 Create a Parallax Scrolling Website Using Stellar.js [미리보기]

[jQuery] 021. 화면에 따라 변하는 3D Responsive 이미지 만들기 Responsive 3D Panel Layout [미리보기]

[jQuery] 022. 화면에 따라 변하는 이미지 그리드 만들기 Animated Responsive Image Grid [미리보기]

[jQuery] 023. 화면에 따라 변하는 포토부스 갤러리 만들기 Photo Booth Strips with Lightbox [미리보기]

[jQuery] 024. 제이쿼리를 이용한 3D이미지 슬라이더 만들기 Triple Panel Image Slider [미리보기]

[jQuery] 025. 제이쿼리 플러그인을 이용한 책 넘기기 효과 BookBlock: A Content Flip Plugin [미리보기]

[출처] 제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다. (하드코딩하는사람들) |작성자 최고의별자리

제이쿼리 모바일(jquery mobile) 샘플사이트 및 데모

빽짱구 — Tue, 29 Jan 2013 12:49:04 +0900

제이쿼리 모바일을 이용한 모바일웹과 앱 샘플 사이트 및 데모 입니다.

http://jquerymobile.com/ (제이쿼리 모바일 데모)

http://www.jqmgallery.com/ (제이쿼리 모바일을 이용한 사이트)

제이쿼리 모바일을 이용하면 손쉽게 모바일 사이트를 앱과 같은 효과를 주면서 제작할수 있습니다.

물론 앱으로 만들수도 있습니다.

다만 원하는 디자인으로 css수정하는게 어렵다는게 함정