<span class="a b c">multiple classes</span>
$(".a.b.c").trigger("click")
jQuery ajax 옵션중에는 async 옵션이 있습니다.
이것은 기본적으로 ajax가 비동기 처리를 하지만 필요에 따라 동기 요청을 하기 위한 옵션이지만
최근 경험상 적용이 되지 않는 것이 확인되어 api 사이트를 확인해보니
아래와 같은 내용이 확인이 됩니다.
크로스 도메인일 경우 데이터 타입이 jsonp라면 지원되지 않는다.
위의 조건 외에도 1.8 버전 이후부터 지원되지 않음이라고 명시되어있고
콜백 함수를 이용하도록 명시가 되어있으니
1.8버전 혹은 최신 버전을 사용하는 경우 문제가 될 것같습니다.
그런데...되는 경우도 있고..안되는 경우도 있고...모호하네요.
확실하게 그냥 콜백 함수를 사용해야겠습니다.
true)true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp"requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().
Bootstrap modal 팝업창에서 datepicker 사용 시
changeMonth , changeYear 옵션을 true 로 사용할 경우 정상적으로 펼쳐지지 않고
바로 닫히는 버그가 있는데 꽤 오래된 상황임에도 업데이트가 되어지지 않고 있습니다.
하지만, 역시 스택오버플로우
해결 방안을 제시해줍니다.
$('#modal').on('show', function () {
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
});
위와 같이 Show 혹은 modal 팝업 활성화 이후에
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
위와 같은 코딩을 실행해주면 정상적으로 연도 및 월 변경이 가능합니다.
종종 해당 객체가 보여지고있는지 여부에 따라 어떤 액션을 취해야할 경우가 있습니다.
아래와 같이 체크 합니다.
if($(selector).is(":visible"))
{
alert("노출되고있음.");
}else{
alert("숨겨져있음.");
}
gitgub Url : https://github.com/customd/jquery-number
숫자형 처리를 위한 플러그인으로 주요 처리 포맷은 아래와 같습니다.
정수 형
$.number( 5020.2364 ); // Outputs 5,020
소수점 둘째 자리 까지
$.number( 5020.2364, 2 ); // Outputs: 5,020.24
상세 옵션에 대해서는
https://github.com/customd/jquery-number
Select box 간 Option 값 이동, 삭제 , 추가 하는 샘플코드 입니다.
Test Url : http://www.uhoon.co.kr/test/5237.html
<!DOCTYPE html>
<html>
<head>
<title>append option / remove option</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<table>
<tr>
<td>
<select id="sel" name="sel" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
</select>
<input type="button" value="Delete" id="btnRemoveLeft"/>
<input type="button" value="Selected Value " id="getValue"/>
<input type="button" value="All Value " id="getSelectedValue"/>
<input type="text" id="addOption" style="width:183px;"/>
<input type="button" value="Add" id="btnAdd"/>
</td>
<td>
<input type="button" value="Move=>" id="btnMoveRight"/>
<input type="button" value="<=Move" id="btnMoveLeft"/>
<input type="button" value="Copy=>" id="btnCopyLeft"/>
<input type="button" value="<=Copy" id="btnCopyLeft2"/>
</td>
<td>
<select id="sel2" name="sel2" style="WIDTH: 245px; HEIGHT: 240px;" size="20" multiple>
</select>
<input type="button" value="Delete" id="btnRemoveRight"/>
<input type="button" value="Selected Value " id="getValue2"/>
<input type="button" value="All Value" id="getSelectedValue2"/>
<input type="text" id="addOption2" style="width:183px;"/>
<input type="button" value="Add" id="btnAdd2"/>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
<!--
$(function(){
$("#btnRemoveLeft").on("click",function(){
$('#sel option:selected').each( function() {
$(this).remove();
});
});
$("#btnRemoveRight").on("click",function(){
$('#sel2 option:selected').each( function() {
$(this).remove();
});
});
$("#btnMoveRight").on("click",function(){
$('#sel option:selected').each( function() {
$(this).remove().appendTo('#sel2');
});
});
$("#btnMoveLeft").on("click",function(){
$('#sel2 option:selected').each( function() {
$(this).remove().appendTo('#sel');
});
});
$("#getValue").on("click",function(){
var values = "";
$('#sel option').each( function() {
values= values + "/" + $(this).val();
});
alert(values);
});
$("#getValue2").on("click",function(){
var values = "";
$('#sel2 option').each( function() {
values= values + "/" + $(this).val();
});
alert(values);
});
$("#getSelectedValue").on("click",function(){
var values = "";
$('#sel option:selected').each( function() {
values= values + "/" + $(this).val();
});
alert(values);
});
$("#getSelectedValue2").on("click",function(){
var values = "";
$('#sel2 option:selected').each( function() {
values= values + "/" + $(this).val();
});
alert(values);
});
$("#btnCopyLeft").on("click",function(){
$('#sel option:selected').each( function() {
$(this).clone().appendTo('#sel2');
});
});
$("#btnCopyLeft2").on("click",function(){
$('#sel2 option:selected').each( function() {
$(this).clone().appendTo('#sel');
});
});
$("#btnAdd").on("click",function(){
if($('#sel').find("[value='"+$('#addOption').val().replace('"','\'')+"']").length == 0)
{
$('#sel').append('<option value="'+$('#addOption').val().replace('"','\'')+'">'+$('#addOption').val()+"</option>");
}else{
alert("있어요.");
}
});
$("#btnAdd2").on("click",function(){
if($('#sel2').find("[value='"+$('#addOption2').val().replace('"','\'')+"']").length == 0)
{
$('#sel2').append('<option value="'+$('#addOption2').val().replace('"','\'')+'">'+$('#addOption2').val()+"</option>");
}else{
alert("있어요.");
}
});
});
$(window).load(function(e){
});
//-->
</script>
</html>
FadeIn , FadeOut 을 이용한 간단한 이미지 노출.
하나가 사라지며 하나가 보여지는 그런...
워낙 플러그인들이 잘 나와있지만
간단한걸 굳이 서치해서 적용하기 귀찮아서 가볍게 쓰기위해 만들었습니다.
사용법
: 이미지에 "main_img" class를 추가.
* html
<div class="main_img"></div> <div class="main_img" style="display:none;"></div> <div class="main_img" style="display:none;"></div> <!-- 별도 버튼등이 있는 경우...안써도 됨. --> <ul id="main_bar"> <li> <a href="Javascript:fnMain_image(0);"><img id="main_bar1" src="/images/main/bar_on.jpg" ></a> </li> <li> <a href="Javascript:fnMain_image(1);"><img id="main_bar2" src="/images/main/bar_off.jpg" ></a> </li> <li> <a href="Javascript:fnMain_image(2);"><img id="main_bar3" src="/images/main/bar_off.jpg" ></a> </li> </ul>
* JS
<script type="text/javascript">
<!--
// 메인 롤링 s
var main_img = 0;
function fnMain_image(img_num)
{
if (img_num == 0 || img_num)
{
main_img = img_num;
}else{
main_img = parseInt(main_img) + 1;
if( main_img > $(".main_img").length -1 )
{
main_img = 0;
}
}
for (i=0;i < $(".main_img").length ; i++)
{
$(".main_img").eq(i).fadeOut('slow');
// $("#main_bar > li:eq("+i+") > a > img").attr("src","/images/main/bar_off.jpg");
}
$(".main_img").eq(main_img).fadeIn('slow');
//$("#main_bar > li:eq("+main_img+") > a > img").attr("src","/images/main/bar_on.jpg");
}
setInterval(function(){ fnMain_image(); }, 3000);
// 메인 롤링 e
//-->
</script>
플러그인 형태로 쉽게 이용할 수 있는 슬라이더 입니다.
Plugin Url : http://source.woothemes.com/flexslider/
download : 
woothemes-FlexSlider-version-2.2.2-0-gce5441b.zip
License : MIT License
사용 샘플 코드
Step 1.
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
Step 2.
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>
Step 3.
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
Step 3.
옵션 : 상세 설명 https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "fade", //String: Select your animation type, "fade" or "slide"
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
// Usability features
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
// Primary Controls
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
// Secondary Navigation
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false, //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false, //{UPDATED} Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item
playText: 'Play', //String: Set the text for the "play" pausePlay item
// Special properties
controlsContainer: "", //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls: "", //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "", //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "", //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
// Callback API
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){}, //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){} //{NEW} Callback: function(slider) - Fires after a slide is removed
Jquery 를 이용한 조직도 그리기 PlugIn 입니다.
Test Url : http://www.uhoon.co.kr/test/3551/3551.html
Plugin Url : http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/
슬라이더 바 샘플입니다.
Jquery UI 사이트의 Slider bar 중 사용빈도 수가 높은 샘플을 정리해보았습니다.
Test Url : http://www.uhoon.co.kr/test/3377.html
참고 Url : http://jqueryui.com/slider/
1. 최대/최소값을 지정하는 슬라이더 바
2. 구간을 선택하는 슬라이더 바
3. 최대/최소 값중 증가값을 지정하는 슬라이더 바
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$("#slider-range-max").slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-range-max").slider("value"));
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function(event, ui) {
$("#amount2").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount2").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$("#slider").slider({
value:10,
min: 0,
max: 100,
step: 10,
slide: function( event, ui ) {
$( "#amount3" ).val( "$" + ui.value );
}
});
$( "#amount3" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>
<p>
<input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
<p>
<input type="text" id="amount3" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
</body>
</html>