jQuery 상하 좌우 자동 롤링 배너
Open API/Jquery2016. 11. 11. 09:32
반응형
Plugin Url : http://songsungkyun.cafe24.com/jqueryrolling/index.html
Test Url : http://www.uhoon.co.kr/test/1891.html
부드럽게 롤링되는 배너
가로로 , 세로로 무한 롤링~
댓글()
Open API/Jquery에 해당하는 글 47건
- jQuery 상하 좌우 자동 롤링 배너2016.11.11
- jQuery datepicker 달력 샘플2016.11.11
- Jquery 갤러리 "jQuery-awesome-images-Gallery-lightbox"2016.11.11
- jQuery 수동으로 이벤트 실행시키기 "trigger"2016.11.11
- jQuery 스크롤 탑 컨트롤 - scrolltop control2016.11.10
- jQuery CheckBox 값 읽어오기/셋팅하기2016.11.10
- jQuery Moodular - 이미지 회전,슬라이더, 터치 ,모자이크2016.11.10
- jQuery input 타입을 hidden / text 변경하기2016.11.10
jQuery datepicker 달력 샘플
Open API/Jquery2016. 11. 11. 09:30
반응형
API Url : http://jqueryui.com/datepicker/
Document : http://api.jqueryui.com/datepicker/
Test Url : http://www.uhoon.co.kr/test/1876.html
딱히 설명이 필요없는....달력입니다..
DatePicker
다양한 기능이 있지만 개인적으로 주로 사용하는 옵션은 아래와 같습니다..
주로 영문상태를 쓰지만 요일, 월 한글명은 필수옵션은 아닙니다.
* 기간 선택
- 시작일 변경시 종료일 min Date 를 시작일로 변경
- 종료일 변경시 시작일의 max Date 를 종료일로 변경
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>datepicker</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script>
$(function() {
// 기간 설정 타입 1
// start Date 설정시 end Date의 min Date 지정
$( "#startDt" ).datepicker({
dateFormat: "yy-mm-dd",
dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토" ],
monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
monthNamesShort: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
defaultDate: "+1w",
numberOfMonths: 1,
changeMonth: true,
showMonthAfterYear: true ,
changeYear: true,
onClose: function( selectedDate ) {
$( "#endDt" ).datepicker( "option", "minDate", selectedDate );
}
});
// end Date 설정시 start Date max Date 지정
$( "#endDt" ).datepicker({
dateFormat: "yy-mm-dd",
dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토" ],
monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
monthNamesShort: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
defaultDate: "+1w",
numberOfMonths: 1,
changeMonth: true,
showMonthAfterYear: true ,
changeYear: true,
onClose: function( selectedDate ) {
$( "#startDt" ).datepicker( "option", "maxDate", selectedDate );
}
});
// 기간 설정 타입 2
// start Date 설정시 end Date 가 start Date보다 작을 경우 end Date를 start Date와 같게 설정
$("#startDt").datepicker({
dateFormat: "yy-mm-dd",
defaultDate: "+1w",
numberOfMonths: 1,
changeMonth: true,
showMonthAfterYear: true ,
changeYear: true,
onClose: function( selectedDate ) {
if ($( "#endDt" ).val() < selectedDate)
{
$( "#endDt" ).val(selectedDate);
}
}
});
// end Date 설정시 end Date 가 start Date 보다 작을 경우 start Date를 end Date와 같게 설정
$( "#endDt" ).datepicker({
dateFormat: "yy-mm-dd",
defaultDate: "+1w",
numberOfMonths: 1,
changeMonth: true,
showMonthAfterYear: true ,
changeYear: true,
onClose: function( selectedDate ) {
if ($("#startDt" ).val() > selectedDate)
{
$("#startDt" ).val(selectedDate);
}
}
});
//날짜
$( "#date" ).datepicker({
changeMonth: true ,
changeYear: true ,
showMonthAfterYear: true ,
dateFormat: "yy-mm-dd",
dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토" ],
monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
monthNamesShort: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
defaultDate: "+1w",
numberOfMonths: 1
});
});
</script>
</head>
<body>
<div>
<label for="날짜">날짜</label><input type="text" id="date" value=""/>
</div>
<div style="padding-top:50px;">
<label for="기간">기간</label><input type="text" id="startDt" /> ~ <input type="text" id="endDt" />
</div>
</body>
</html>
댓글()
Jquery 갤러리 "jQuery-awesome-images-Gallery-lightbox"
Open API/Jquery2016. 11. 11. 09:26
반응형
Url : http://www.htmldrive.net/items/show/275/jQuery-awesome-images-Gallery-lightbox
Test Url : http://www.uhoon.co.kr/test/1862/1862.html
소스는 Test 페이지를 확인해주세요.
※ 적용시 script.js에서 좌우 이동 버튼 및 클로즈 등..이미지 경로 변경해주셔야 정상적으로 나옵니다...
* 자주 가는 강추 사이트 http://www.htmldrive.net
자료 정말 많습니다..
댓글()
jQuery 수동으로 이벤트 실행시키기 "trigger"
Open API/Jquery2016. 11. 11. 09:24
반응형
임의 이벤트 실행을 하기 위한 방법입니다..
예를 들어 버튼의 클릭 이벤트를 프로그램으로 실행하는 방법..
API Url : http://api.jquery.com/trigger/
Test Url : http://www.uhoon.co.kr/test/1858.html
( 화면 로딩이 완료된 후 첫번째 버튼의 클릭 이벤트를 실행합니다. )
$("button:first").trigger('click');
댓글()
jQuery 스크롤 탑 컨트롤 - scrolltop control
Open API/Jquery2016. 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/Jquery2016. 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/Jquery2016. 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>
댓글()
jQuery input 타입을 hidden / text 변경하기
Open API/Jquery2016. 11. 10. 09:24
반응형
jQuery를 이용한 Attr 속성 변경시 기본 문법에 의하면 아래와 같이 할 수 있겠지만
실행이 되지 않습니다.
( 추후는 모르겠지만 현재 버전에서는.. 1.9.2 )
$("form[name='폼'] input[name='이름']").attr('type','hidden');
그래서 노가다 이긴 하지만 아래와 같이 변경이 가능합니다.
var objName = $("form[name='폼'] input[name='이름']").attr('name');
var objId = $("form[name='폼'] input[name='아이디']").attr('id');
var objValue = $("form[name='폼'] input[name='이름']").attr('value');
var html = ' <input type="text" name="'+objName+'" id="'+objId+'" style="width:70px;" value="'+objValue+'" />';
$("form[name='폼'] input[name='이름']").after(html).remove();
댓글()
블로그 소개
Yo.
정보저장소