제목 : jquery datepicker 여러개, 다중, multi 사용법




소스 :



  배송일자1 : <input type="text" size="12" id="deliveryDate1">

  배송일자2 : <input type="text" size="12" id="deliveryDate2">

  배송일자3 : <input type="text" size="12" id="deliveryDate3">

  배송일자4 : <input type="text" size="12" id="deliveryDate4">

  배송일자5 : <input type="text" size="12" id="deliveryDate5">

  배송일자6 : <input type="text" size="12" id="deliveryDate6">


$("input[id^='deliveryDate']").each(function() {


var _this = this.id;


$('#'+_this).datepicker({

regional: 'ko',

changeMonth: true,

changeYear: true,

dateFormat : 'yy-mm-dd',

showOn: "button",

buttonImage: "/admin/Calendar/calendar.gif",

buttonImageOnly: true,

buttonText: "Select date"

});

});




내용 :


each 메소드에서 selector 찾을 때, ^= 를 잘 사용하면 된다.


또는 input name 이 모두 동일 할 때는 *= 를 사용하면 된다.


$("input[name*='deliveryDate']").each(function() {

});


단일 id, name 을 쓸 때는 당연히 =







예제 소스 파일 :


 출처 :  




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 : jquery radio checked none; script




소스 :



var $checkedElement = $('#FrmQuiz input:radio[name=answer]:checked');

if (! $checkedElement.length) {

alert("답변을 선택하시기 바랍니다.");

return false;

}

var answer = $checkedElement.val();




내용 :


라디오버튼 2개 중 1개도 선택하지 않았을 때, 처리법. for if 문도 있으나, jquery 로 해결.





예제 소스 파일 :


 출처 :  




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 : inspinia 2.7 Admin Theme 사용시 왼쪽 메뉴 활성화 script




소스 :


// 메뉴 클릭시 활성화

var $CURRENT_URL = window.location.pathname;

var $SIDEBAR_MENU = $('#side-menu');


$SIDEBAR_MENU.find('a[href="' + $CURRENT_URL + '"]').parents('li').addClass('active');




내용 :


현재 url ( 파라미터 없는 것으로 간주), 


--> 파라미터와 같이 사용하려면 current_url 의 path 를 수정한다.

window.location.href;


왼쪽 메뉴의 id 값을 지정


왼쪽 메뉴의 href 값으로 비교하여 같으면 상위 li 모두에 class 'active' 를 추가한다.






예제 소스 파일 :


 출처 :  




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 : 멀티 form 을 iframe 으로 submit 하는 방법




소스 :


<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

 </head>

 <body>

 <iframe src="iframe.asp" name="hiddenZone1"></iframe>

 <iframe src="iframe.asp" name="hiddenZone2"></iframe>

 <iframe src="iframe.asp" name="hiddenZone3"></iframe>



<input type="checkbox" name="c_guid" value="1"/>

<input type="checkbox" name="c_guid" value="2"/>

<input type="checkbox" name="c_guid" value="3"/>



  <form name="Frm_1">

<input type="text" name="mode" />

<input type="text" name="tt" value="t1" />

  </form>

  <form name="Frm_2">

<input type="text" name="mode" />

<input type="text" name="tt" value="t2" />

  </form>

  <form name="Frm_3">

<input type="text" name="mode" />

<input type="text" name="tt" value="t3" />

  </form>



<input type="button" value="전송" onclick="fnForm();" />

<script type="text/javascript">

function fnForm(){


$( "input:checkbox[name='c_guid']").each(function(index){


if ($("input:checkbox[name='c_guid']").eq(index).is(":checked")){


f_name=$("input:checkbox[name='c_guid']").eq(index).val();


f=eval("document.Frm_"+f_name);

f.mode.value = "ADD";

f.target = "hiddenZone"+f_name;

f.action = "iframe.asp";

f.submit();


}



 });


}

</script>

 </body>

</html>







내용 :


멀티 form 을 iframe 으로 submit 하는 방법.


target 명을 여러개로 보내는게 확실하다.


왜 그런지는 잘 모름 ㅜㅜ






예제 소스 파일 :

test.asp


 출처 :  나




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩




제목 : safari ajax scroll Error 대처법




소스 :



//더보기

var i = 2;

var tf = true;


function receiveMessage(){


$.ajax({

url : "/m/common/exec_getMainGoodsList.asp",

data : "page=" + i + "&cate=<%=cate%>&listtype=<%=listtype%>",

error : function(html, status){

//alert(html+'오류입니다.');

},

success : function(html, status){

i += 1;

if (html == 'no_data')

{

//alert('더이상 상품이 존재하지않습니다.');

} else {

var $items = $(html);


$items.imagesLoaded().then(function(){

$(".cont_list").append($items).masonry('appended',$items);

tf = true;

});


}

}

});


}



$(window).scroll(function(){

var pp = $(window).scrollTop();

var hh = $(window).height();

var bd = $(document).height();

if(tf)

{

if(pp + hh + 300 >= bd){

tf = false;

receiveMessage();

}

}

});




내용 :


화면이 바닥 300px 위가 보여질때, 자동 스크롤 되면서 ajax 내용을 뿌리도록 하는 스크립트이나,


IOS safari 에서는 제대로 작동이 안된다.


위로 스크롤할 때, 다른 브라우저들은 이상이 없으나, safari 는 up scroll 할 때, 계속 좌표를 계산한다.


PC, mobile 둘다 익스플로러, 크롬, 파이어폭스 등은 잘 된다.


PC safari 도 잘된다. 모바일이 문제.


그래서 tf 변수에 true, false 로 제어하니 제대로 된다.




예제 소스 파일 :


 출처 :  




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩




제목 : jquery ajax 후 이미지 로딩이 완료된 후 append 할수 있는 함수




소스 :


// Fn to allow an event to fire after all images are loaded

$.fn.imagesLoaded = function () {


    // Edit: in strict mode, the var keyword is needed

    var $imgs = this.find('img[src!=""]');

    // if there's no images, just return an already resolved promise

    if (!$imgs.length) {return $.Deferred().resolve().promise();}


    // for each image, add a deferred object to the array which resolves when the image is loaded (or if loading fails)

    var dfds = [];

    $imgs.each(function(){


        var dfd = $.Deferred();

        dfds.push(dfd);

        var img = new Image();

        img.onload = function(){dfd.resolve();}

        img.onerror = function(){dfd.resolve();}

        img.src = this.src;


    });


    // return a master promise object which will resolve when all the deferred objects have resolved

    // IE - when all the images are loaded

    return $.when.apply($,dfds);


}



function receiveMessage(){


$.ajax({

url : "/m/common/exec_getMainGoodsList.asp",

data : "page=" + i + "&cate=<%=cate%>&listtype=<%=listtype%>",

error : function(html, status){

//alert(html+'오류입니다.');

},

success : function(html, status){

i += 1;

if (html == 'no_data')

{

//alert('더이상 상품이 존재하지않습니다.');

} else {

var $items = $(html);


$items.imagesLoaded().then(function(){

$(".cont_list").append($items).masonry('appended',$items);

});


}

}

});


}


내용 :





예제 소스 파일 :


 출처 :  http://stackoverflow.com/questions/4774746/jquery-ajax-wait-until-all-images-are-loaded




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩




제목 : jquery 스마트폰 회전시 제어하는 구문




소스 :



function FNareaRelationListCount(){

var areaRelationL = $('#areaRelationList li').length


var areaRelationMaxh = $("#areaRelationList").height();


var areaRelationN = $("#areaRelationList li").filter(function () {

return $(this).position().top + $(this).height() < areaRelationMaxh;

}).length;


if (areaRelationL > areaRelationN)

{

$('#areaRelationBtn').attr('style', 'display:block');

} else {

$('#areaRelationBtn').attr('style', 'display:none');

}

}



var slope = 0;

var supportsOrientationChange = "onorientationchange" in window,

orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";


window.addEventListener(orientationEvent, function() {

if (slope!=window.orientation){

slope = window.orientation;

if(slope == 90 || slope == -90) {

// 가로상태

FNareaRelationListCount();

}

else {

// 세로상태

FNareaRelationListCount();

}

}

}, false);



내용 :


$(window).trigger("orientationchange");


$(window).on("orientationchange", function(e) {

var orientation = window.orientation;


if (orientation == 90 || orientation == -90) {

//alert("landscape");

FNareaRelationListCount();

} else {

//alert("portrait");

FNareaRelationListCount();

}

});


이걸로도 대체 가능





예제 소스 파일 :


 출처 :  




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩




제목 : 반응형 테이블 2번째 - table reflow




소스 :


@media ( min-width: 40em ) {
	/* Show the table header rows and set all cells to display: table-cell */
	.my-custom-breakpoint td,
	.my-custom-breakpoint th,
	.my-custom-breakpoint tbody th,
	.my-custom-breakpoint tbody td,
	.my-custom-breakpoint thead td,
	.my-custom-breakpoint thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */
	.my-custom-breakpoint td .ui-table-cell-label,
	.my-custom-breakpoint th .ui-table-cell-label {
		display: none;
	}
}



<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke">
  <thead>
    <tr>
      <th data-priority="1">Rank</th>
      <th data-priority="persist">Movie Title</th>
      <th data-priority="2">Year</th>
      <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th data-priority="4">Reviews</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>2</th>
      <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
      <td>1942</td>
      <td>97%</td>
      <td>64</td>
    </tr>
    <tr>
      <th>3</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
      <td>1972</td>
      <td>97%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>4</th>
      <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
      <td>1939</td>
      <td>96%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>5</th>
      <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
      <td>1962</td>
      <td>94%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>6</th>
      <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
      <td>1964</td>
      <td>92%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>7</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
      <td>1967</td>
      <td>91%</td>
      <td>122</td>
    </tr>
    <tr>
      <th>8</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
      <td>1939</td>
      <td>90%</td>
      <td>72</td>
    </tr>
    <tr>
      <th>9</th>
      <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
      <td>1952</td>
      <td>89%</td>
      <td>85</td>
    </tr>
    <tr>
      <th>10</th>
      <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
      <td>2010</td>
      <td>84%</td>
      <td>78</td>
    </tr>
  </tbody>
</table>


내용 :


모바일 환경에서 테이블의 가로 길이가 길면, 좌우 스크롤을 둬서 다 보여주던지, 아니면


아래 그림처럼 각 row 마다 title 을 각각 제공하는 식으로 table reflow 를 사용해도 좋다.









예제 소스 파일 :


 출처 :  http://view.jquerymobile.com/1.3.0/docs/widgets/table-reflow/




저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 :  ajax 이미지 업로드


소스 :


<script src="/jscript/ajaxfileupload.js"></script>
  <script>
  function imgUpload()
 {
   $('input:radio[name="basic_pic"]').attr("checked", false);
   $("#p_img").html('')
   $("#profile_img").val('');

   $.ajaxFileUpload
   (
    {
     url:'/member/profile_upload.asp',
     secureuri:false,
     fileElementId:"thumb",
     dataType: 'json',

     success: function (data, status)
     {

      var result = data.msg;
      strhtml="<img src='/data/rental/profile/"+result+" ' border='0' width='100px' height='100px' />";
      $("#p_img").html(strhtml)
      $("#profile_img").val(result);
      return;

     },
     error: function (data, status, e)
     {
      alert(data.error);
     }
    }
   )
 }
  </script>

 

------------------------------

>>member/profile_upload.asp 파일 소스

 

<!--#include virtual="/_include/config.asp"-->
<!--#include virtual="/_lib/function.File.asp"-->
<%
Call defineUpload

thumb_folder = pathBase&"/rental/profile"

thumb = getUploadItem("thumb")

Ext=getFileExt(thumb,false)

filename=Replace(date(),"-","")&rndomstring(10)&"."&ext

if ext<>lcase("jpeg") and ext<>lcase("jpg") and ext<>lcase("gif") and ext<>lcase("bmp") and ext<>lcase("png") then
 response.write  "{error:""ext""}"
 response.end
end if

Call fileUpload("thumb",thumb_folder , filename, sPath, sFilename, sSize)


if Err.Number <> 0 then  '//에러
 result = "error"
 response.write  "{error:""error""}"
else
 response.write "{msg:"""&filename&"""}"
end if

function rndomstring(cnt)
 Dim str,cntArr,flg,tStr
 str=""
 Randomize()
 for cntArr=1 to cnt
 flg=Int(Rnd()*10)
 if flg>5 then
  tStr=Int(Rnd()*10)
 else
  tStr=Int(Rnd()*26)
  tStr=Chr(asc("a")+tStr)
 end if
 str = str & tStr
 next
 rndomstring=str
end Function
%>


 


내용 :



예제 소스 파일 :

ajaxfileupload.js

 


 출처 :  


 

저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩



제목 :  jquery.masonry.min.js


소스 :




내용 :

 

pinterest.com 같은 블럭 매꾸기 li / div 등

 

jquery.masonry.min.js

 

참고


예제 소스 파일 :



저작자 표시 비영리 변경 금지
신고
Posted by 잠수콩