제목 : 




소스 :



jquery 에서 url 알아내는 법


var t1 = $(location).attr('host'); 

var t2 = $(location).attr('hostname'); 

var t3 = $(location).attr('href'); 

var t4 = $(location).attr('port'); 

var t5 = $(location).attr('protocol'); 




내용 :


t1=www.test.com:8080

t2=www.test.com

t3=http://www.test.com:8080/test/test/test_1.asp

t4=8080

t5=http:





예제 소스 파일 :


 출처 :  




Posted by 잠수콩



제목 : jquery select box reset. 다른 select 를 모두 초기화하는 방법




소스 :


<script type="text/javascript">

<!--


function fnSelectReset(obj){


var $others = $(obj).closest('table').find('select'),

current = $others.index(obj); // find current


while (++current < $others.length) {

$others.get(current).options.length = 1;

}

}


function fnSelectCate(obj, targetID){

var _val = $(obj).find(":selected").val();

var _targetID = targetID;


var cate = $("#cate").find(":selected").val() != "" ? $("#cate").val() : "";

var c_idx = $("#c_idx").find(":selected").val() != "" ? $("#c_idx").val() : "";

var tNo = $("#tNo").find(":selected").val() != "" ? $("#tNo").val() : "";

var sNo = $("#sNo").find(":selected").val() != "" ? $("#sNo").val() : "";

var pNo = $("#pNo").find(":selected").val() != "" ? $("#pNo").val() : "";

var cNo = $("#cNo").find(":selected").val() != "" ? $("#cNo").val() : "";


var param = 'targetID='+ _targetID +'&cate='+cate+'&c_idx='+c_idx+'&tNo='+tNo+'&sNo='+sNo+'&pNo='+pNo+'&cNo='+cNo;


if (_val != "" && _targetID != "")

{


$.ajax({

type : "POST",

data : param,

url  : "question_search_ajax.asp",

success : function(data) {

try {

var res = data.split("|:|");

if (res[0] == "Error")

{

alert(res[1]);

return false;

} else {

$("#"+targetID).html(data);

}

} catch(e) {

alert("error - " + e.description);

return false;

}

}

});

}

}

//-->

</script>






내용 :


select box 가 여러개 있을 때,


1. fnSelectReset 함수

내 아래의 모든 select box 의 option 을 첫줄 제외하고 모두 지우고 싶을때. 보통 셀렉트박스 초기화 하는 방법


2. fnSelectCate

하위 뎁스의 select option 에 ajax로 호출한 option 들을 붙일 때.






예제 소스 파일 :


 출처 :  




Posted by 잠수콩



제목 : 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 잠수콩