JQuery 플러그인 - 2025년 2월 26일 업데이트
Jquery Plugins
Alert
/js/jQuery-jConfirm/js/jquery-confirm.js
다운로드 : http://craftpip.github.io/jquery-confirm/
http://ned.im/noty/#/about
상기것도 괜찮은 것 같음 <!- 좀더 최근 적 ui
간단 / 심플
http://www.jqueryscript.net/other/Simple-Elegant-Dialog-Box-Plugin-For-jQuery-vdialog.html
PopOver
popover : bootstrap
기본 사용법
$('[data-toggle="greenfee-popover"]').popover();
추가사용법
"$('[data-toggle="greenfee-popover"]').popover({
html:true,
trigger:'hover'
}); "
Rotate
http://jqueryrotate.com/
새로고침시 특정아이콘만 로테이팅 시키기
jBox
http://stephanwagner.me/jBox
별점
<script src="/js/raty-fa/jquery.raty-fa.js"></script>
"$('#star').raty({
half: true
,score: 2.5
,click: function(score, evt) {
$("#lessonpoint").val(score);
//alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt);
}
});"
"<input type="hidden" id="lessonpoint" name="lessonpoint" value="2.5">
<div id="star" style="display: inline;letter-spacing: -5px; width:0em;"></div>"
이미지 확대
http://dimsemenov.com/plugins/magnific-popup/
http://dimsemenov.com/plugins/magnific-popup/documentation.html
"<a class="image-popup-vertical-fit" href="<?php echo $v["m_fileurl"];?>" title="<?php echo $v["m_history_name"];?> <?php echo $v["m_company"];?>">
<img src="<?php echo $v["m_fileurl"];?>" title="자격증"/>
</a>"
<link rel="stylesheet" href="/js/popup_Magnific/tutormatching.css">
"$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.image-popup-fit-width').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});"
동적 페이지 구축시
" $('.listTable .ajax-popup-link-view').magnificPopup({
type: 'ajax'
,closeOnContentClick:false
,closeOnBgClick:false
,closeBtnInside:false
,callbacks: {
ajaxContentAdded: function() {
console.log("loaded");
angular.element('#patternCtrl').scope().showPatternDialog();
}
,close: function() {
//ng-click="showPattern(key)
angular.element('#patternCtrl').scope().closeModal();
}
}
});"
https://github.com/DoersGuild/jQuery.print
"// 페이지 프린팅
$(".btn-print").click(function(e){
$(".panel.panel-default").print({
globalStyles : true,
stylesheet : "/css/tutormatching.css",
iframe : true,
noPrintSelector : ".avoid-this"
});
})"
datePicker
"<script type="text/javascript" src="/js/jquery.plugins/datepicker/bootstrap-datepicker.js"></script><!-- .datepicker -->
<link rel="stylesheet" href="/js/jquery.plugins/datepicker/datepicker.css" />"
날짜외시간까지체크가능
<script type="text/javascript" src="/js/datetimepicker/jquery.simple-dtpicker.js"></script>
Mask
"<script src="/js/jQuery-Mask-Plugin/jquery.mask.js"></script>
$("#phone").mask("999-9999-9999", { onComplete: function() {} });
"
참조 URL
DownLoad URL
isotope
http://isotope.metafizzy.co/
콘텐츠를 자동으로 소팅, 필터링 하기
data toggle modal
<a class="btn-modal-open" data-target="#modal-layer" data-url='/modal/use-agreement'>개인정보처리방침</a>
"<!-- Modal -->
<div class="textBox_modal modal fade" id="modal-layer" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
</div>
</div>"
"// $('.btn-modal-open').on('click', function(event){
$('.btn-modal-open').click(function(event){
event.preventDefault();
var $myModal = $(this).data('target');
var url = $(this).attr('data-url');
// $('#modal-layer > .modal-dialog').html('')
$($myModal).one('show.bs.modal', function(){
// setTimeout(function() {
// console.log(url);
// $(this).find('.modal-dialog').load(url);
// }.bind(this), 500);
$(this).find('.modal-dialog').load(url);
}).modal('show');
})" "$($myModal).on('show.bs.modal', function(){
여러번 호출되어 one 으로 변경"
jQueryValidation
$(document).ready(function() {
$("#password_form").validate({
rules: {
},
messages: {
},
submitHandler: function(form){
$.ajax({
type: "POST",
url: ",
data: $(form).serialize(),
success: function (data) {
var msg = "";
//eval("var obj="+data)
var obj = jQuery.parseJSON(data);
switch(obj.result){
case "0"://success
alert('정상적으로 변경되었습니다.');
break;
}
$('#loginError').html("<h2>"+msg+"</h2>").show().fadeOut(2500);
}
});
return false;
}
});
});
check box start
data-rule-required="true" data-rule-number="true" data-rule-email="true" data-rule-maxlength="10" data-rule-minlength="5"
data-msg-required="Please enter your email address" data-msg-email="Please enter a valid email address""
"<input id="cemail"name="email"data-rule-required="true"data-rule-email="true"data-msg-required="Please enter your email address"data-msg-email="Please enter a valid email address"> <input id="cemail"name="email"data-rule-required="true"data-rule-email="true"data-msg-email="Please enter a valid email address"> radio <input type="radio"id="gender_male"value="m"name="gender"required=""aria-required="true"> check box: <input type="checkbox"class="checkbox"id="agree"name="agree"required=""aria-required="true">
$("#testform").validate({ rules: { "spam[]": { required: true, minlength: 1 } }, messages: { "spam[]": "Please select at least two types of spam." } });
check box end
"
"에러 출력 위치 조절
<input type="radio"name="gender"data-msg="성별을 입력하세요">
<label for="gender"class="error"style="display: none;">
"
"jqueryvalidation.org/files/demo/errorcontainer-demo.html // only for demo purposes $.validator.setDefaults({ submitHandler: function() { alert("submitted! (skipping validation for cancel button)"); } });
$().ready(function() {
$("#form1").validate({
errorLabelContainer: $("#form1 div.error")
});
var container = $('div.container');
// validate the form when it is submitted
var validator = $("#form2").validate({
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li'
});
$(".cancel").click(function() {
validator.resetForm();
});
});
</script>
" "
jQuery Validation Plugin Demo
"