본문 바로가기

JQuery31

jQuery - prop()으로 select 상태 값 변경 prop()을 사용해 select 상태만 변경하기 안녕하세요.고코더 입니다. 이번 시간에는 prop으로 셀렉트 박스의 상태 값을 변경하는 방법을 알아보겠습니다.트리거는 사용자의 이벤트를 대신하는 느낌이라면 prop은 현재의 화면에 보여주는 옵션 상태 값을 변경 합니다. 가장 큰 차이는 change() 값에 바인딩 되지 않습니다 ● 1. 아래 소스를 한번 웹에서 보겠습니다. 12345678910111213141516171819202122function propChagne(){ $("#gocoder").val("c").prop("selected", true);} 셀렉트박스 선택 Go Coder Colored by Color Scriptercs ● 2. 해당 파일을 웹에서 실행하신 다음 버튼을 클릭 합니다. .. 2019. 10. 17.
jQuery - trigger()로 select 박스 선택 값 변경하기 자바스크립트 트리거를 활용해 셀렉트박스 선택 값 변경 안녕하세요.고코더 입니다. 자바스크립트로 프론트를 개발할때 특정 조건에 맞쳐 셀렉트 박스를 변경해야 하는 경우가 있습니다.이때 사용자 대신 셀렉트 박스를 변경하고 싶다면 트리거를 사용하면 됩니다. ● 1.우선 아래 예제를 함께 살펴보겠습니다.1234567891011121314151617function triggerChagne(){ $("#gocoder").val('g').trigger('change');} 셀렉트박스 선택 Go Coder Colored by Color Scriptercs ● 1.해당 파일을 실행하면 화면과 같은 모습이 보입니다. 버튼을 클릭하면 ● 2.왼쪽 select box 가 변경 됩니다. $("#gocoder").val('g')... 2019. 10. 17.
jQuery - 가장 간단한 슬라이드 HTML / Coin Slider 슬라이드 쇼 애니메이션 가장 쉽게 구현 가능한 플러그인 안녕하세요. 고코더 입니다. 슬라드 쇼를 하는 기능에 플러그인은 참 많습니다. 많은 개발자들이 저마다에 방식으로 만들어 놓았습니다. ● 1. 그런데 이번에 소개할 슬라이드 쇼 HTML은 가장 간단하게 구현 가능한 플러그인을 소개해드립니다. 바로 COIN SLIDER 입니다. http://workshop.rs/projects/coin-slider/ ● 2. 얼마나 간단한지 제가 예제를 한번 만들어 보았습니다. 아래 코드를 참조해주세요. 1234567891011121314151617181920212223242526272829 $(document).ready(function() { coinslider({width:260,height:146,navigati.. 2019. 7. 17.
jQuery - Div등 요소의 크기 조절, 사이즈 가져오기 / width(), hegiht(); 디자인 요소의 크기 변경 안녕하세요. 고코더 입니다. jQuery에서는 선택한 요소의 크기의 값을 알거나 변화 시킬 수 있습니다. ● 1. 바로 width()와 height() 메서드 입니다. width() - 선택요소의 가로 크기를 가져오거나 변경한다. height() - 선택요소의 세로 크기를 가져오거나 변경한다. style 속성에 접근하지 않아도 간단한 명령어로 크기를 조절 가능 합니다. ● 2. 예제를 한번 살펴보세요. 12345678910111213141516171819202122 $(document).ready( function() { //해당 DIV 사이즈 조정 $('#gocoder_size').width('300'); $('#gocoder_size').height('300'); alert(.. 2019. 6. 19.
jQuery UI - 이미지 드래그, 리사이징 / resizable() draggable() 제이쿼리 이미지 드래그 드랍, 사이즈 조절 안녕하세요. 고코더 입니다. jQuery UI를 쓸때 가장 많이 활용하게 되는 기능이 두가지가 있습니다. 바로 이미지 드래그와 리사이징 입니다. 레이어 팝업을 만들거나 사용자에게 크기를 조절하게 편의를 제공 하는 기능은 많이 씁니다. 그래서 이번 시간에 제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다. ● 1. 아래 소스를 웹사이트에서 실행해보세요. 1234567891011121314151617 $( document ).ready(function() { $('#GoCoderImg1').resizable(); $('#GoCoderImg2').draggable(); }); Colored by Color Scriptercs ● 2. 하나는 사이즈 조절이 가.. 2019. 6. 11.
jQuery UI - Div 강조하기 / effect highlight Div 반짝 거리게 하기 안녕하세요. 고코더 입니다. Div안에는 많은 것들을 담습니다. 사이트는 강조해야 할 Div가 존재하게 됩니다. ● 1. 얼마전에 만든 제가 만든 QR코드 만들기 사이트에 접속시에 해당 네모 DIV안에 이미지가 나타난다고 알려주고 싶더군요 그래서 알아본 결과 jQuery UI에 제공하는 간단하고 강력력한 기능인 effect를 사용하는 방법이 있습니다. ● 2. 아래에 코드를 웹에서 실행해보세요. 12345678910111213141516171819 $( document ).ready(function() { $('#GoCoderDiv').effect("highlight", 1000); }); DIV 강조 Colored by Color Scriptercs ● 3. 아래처럼 Div가 .. 2019. 6. 3.
jQuery - 가볍고,간단한 깔끔한 화면 한쪽 팝업 / jGrowl 오른쪽 화면 위에 나타나는 javascript 네모난 팝업 레이어 박스 안녕하세요. 고코더 입니다. 예전에 팝업 하면 무조건 window.open 을 통한 브라우저 자체 내장객체를 사용했습니다. 그런데 요즘은 반응형 이슈와 스마트폰에서 팝업을 무조건 막는 정책때메 레이어 팝업을 많이 사용 합니다. 이 layer 팝업중 가장 깔끔한 플러그인을 소개 해드릴려고 합니다. ▼직영하면 j 으르렁 대다 인가 ㅎㅎ https://plugins.jquery.com/jgrowl/ ▼ 고코더 방문자와 구독자를 위해 직접 간단하게 코드를 작성했습니다. 그대로 HTML을 실행하면 화면이 실행 됩니다. 1234567891011121314151617181920212223242526272829303132333435363738394.. 2019. 5. 21.
jQuery - 이미지의 img src 태그로 선택하기 jquery img src selector 안녕하세요. 고코더 입니다. 개발을 하던 중에 이미지의 src 속성 이미지의 주소를 선택하여 수정할 일이 생겼는데 쓸모가 많은 방식인거 같아 블로그를 남겨드립니다. 제이쿼리에서 img의 src 속성으로 당연히 선택을 할 수 있습니다. 제 블로그에 있는 이미지 주소를 사용해 말씀드리겠습니다. https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg ▼ 이미지 src를 선택하는 3가지 방법입니다. 12345678910111. 이미지 주소 전체를 넣어 검색 - 하나의 이미지만 선택할때 유용 합니다. ex) $("img[src='https://tistory1.daumcdn.net/tistory/2778.. 2019. 4. 12.
jQuery - 디자인 요소 툴팁 박스 생성하기 / tooltipsy 레이어 부가설명 박스 달기 안녕하세요. 고코더 입니다. 브라우저는 title 요소에 값을 넣으면 보통 기본 팁 박스를 제공합니다. 하지만 우리의 클라이언트는 특이한걸 원하는 분이 많습니다. 이 타이틀 속성의 툴 팁의 디자인 요소를 넣고 싶어할 수도 있습니다. 그래서 이번 시간에는 toll tip을 바꿀수 있는 플러그인을 소개 하려 합니다. ▼ tooltipsy 라는 플러그인 입니다. http://tooltipsy.com/ ▼ 아주 간단하게 툴박스를 생성할 수 있는데요 아래 예제를 한번 실행해보세요. 123456789101112131415161718192021 $("#gocoder_tooltip").tooltipsy({ css: { 'padding': '5px', 'max-width': '100px', '.. 2019. 3. 26.

티스토리툴바